QML Row vs. RowLayout

Я пытаюсь написать верхнюю панель для моего приложения, которое должно содержать главным образом логотип приложения (небольшое изображение) и название приложения (только текст). Более того, я бы хотел, чтобы этот верхний барабан автоматически изменялся в соответствии с высотой окна.

Я новичок в QML, но я полагаю, что я должен обернуть эти компоненты внутри Row или RowLayout. Это мой пример кода:

import QtQuick 2.0
import QtQuick.Layouts 1.0

Rectangle
{
    id: mainwindow
    width: 1024
    height: 600

    Row
    {
        id: rowlayout
        height: logoimage.height
        spacing: 5

        property int count: 3

        anchors
        {
            left: parent.left
            right: parent.right
            top: parent.top
        }   

        Image
        {   
            id: logoimage
            source: "qrc:/images/resources/images/icon.png"
            height: mainwindow.height / 20
            anchors.top: parent.top
            anchors.left: parent.left
        }   
        Text
        {   
            id: logotext
            text: qsTr("This is my logo text")
            font.pixelSize: parent.height
            font.family: "Sans Serif"
            height: parent.height
            verticalAlignment: Text.AlignVCenter
            anchors.top: parent.top
            anchors.left: logoimage.right
        }
        /*
        Rectangle
        {
            id: otherrect
            height: parent.height
            color: "lightgreen"
            anchors.top: parent.top
            anchors.left: logotext.right
            anchors.right: parent.right
        }
        */
    }
}

Я передаю компоненту Row, что его высота должна соответствовать высоте логотипа и компоненту Image (логотип), что его высота должна быть 1/20 из компонента Rectangle (mainwindow).

Используя контейнер Row, код ведет себя как ожидалось, но я получаю раздражающее предупреждение (QML Row: Cannot specify left, right, horizontalCenter, fill or centerIn anchors for items inside Row. Row will not function.), и мне нужно сделать много привязки. И наоборот, если я использую контейнер RowLayout, я могу удалить большинство якорей, но Image полностью игнорирует его height (но текст по-прежнему изменяется правильно). Итак, вопросы:

• - это ошибка в компоненте RowLayout? Я использую Qt-5.1.0-Beta​​strong > с поддержкой Android, поэтому это может быть объяснение.
• Как я могу использовать компонент Row без использования якорей в своих дочерних элементах и, таким образом, избежать предупреждения?
• Мне не хватает чего-то важного, или я почти на правильном пути, но я должен нести эту бету Qt до тех пор, пока не будет выпущена стабильная версия.

Ответы

Ответ 1

Вы сказали, что получаете ожидаемое поведение с Row, поэтому вы, вероятно, должны его использовать. Предупреждение о том, что Row дает, просит вас удалить вертикальные анкеры (сверху и снизу) из своих дочерних элементов.

Элемент Row обеспечивает горизонтальное (левое и правое) поведение привязки для своих дочерних элементов, но не против, если вы используете верхние и нижние привязки (обратите внимание, что верх и низ не были в предупреждении).

Другими словами, удалите строки "anchors.left" и/или anchors.right из "logoimage", "logotext" и "otherrect" (если вы планируете раскомментировать его в какой-то момент), но не "anchors.top", и это должно остановить предупреждение и сохранить правильное поведение.

Альтернативой является просто удалить элемент Row и использовать Item или FocusScope (если вы планируете иметь элементы ввода в своей области "верхняя панель" ), которые не будут пытаться взять на себя операции привязки, и это может быть лучше подходит для вас, если вам действительно нравятся якоря.

Ответ 2

Вам нужно указать ширину вашего макета, если вы хотите, чтобы он расширил его дочерние элементы с шириной: parent.width или лучше с помощью anchors {left: parent.left; right: parent.right} и никаких якорей на вертикальных линиях внутри дочерних элементов макета.

Ответ 3

1) НЕТ, это не ошибка RowLayout 2) Считайте, что RowLayout предпочтительнее Row, потому что наиболее выразительно для размещения компонентов. Компонент Row лучше, чем Rowlayout только для графических или анимационных приложений 3) Стабильная версия теперь доступна, но ваши ошибки не являются ошибками;)