QML Row vs. RowLayout

Avi*_*vio 11 layout row qml qt5

我正在尝试为我的应用程序编写一个顶部栏,主要应该包含应用程序徽标(一个小图像)和应用程序标题(只是文本).此外,我希望这个顶栏可以根据窗口的高度自动调整大小.

我是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
        }
        */
    }
}
Run Code Online (Sandbox Code Playgroud)

我告诉Row组件它的高度应该遵循徽标的高度,并告诉Image(徽标)组件它的高度应该是Rectangle(主窗口)组件的1/20.

使用Row容器,代码行为与预期一样,但我得到一个恼人的警告(QML Row: Cannot specify left, right, horizontalCenter, fill or centerIn anchors for items inside Row. Row will not function.),我必须做很多锚定.相反,如果我使用RowLayout容器,我可以删除大多数锚点,但Image完全忽略其height属性(但文本仍然正确调整大小).所以问题是:

  1. 这是RowLayout组件的错误吗?我正在使用支持Android的Qt-5.1.0-Beta,所以这可能是一个解释
  2. 如何Row在不使用锚点的情况下使用组件,从而避免警告?
  3. 我遗漏了一些重要的东西,或者我几乎走在正确的轨道上,但我必须忍受Qt的这个测试版,直到稳定版本发布?

Jay*_*Jay 5

您说您使用 Row 获得了预期的行为,因此您可能应该使用它。Row 给出的警告要求您从其子元素中删除垂直锚点(顶部和底部)。

Row 元素为其子元素提供类似水平(左和右)锚点的行为,但它不介意您是否使用顶部和底部锚点(请注意,顶部和底部不在警告中)。

换句话说,从“logoimage”、“logotext”和“otherrect”中删除“anchors.left”和/或“anchors.right”行(如果您计划在某个时候取消注释),但不删除“anchors.top” ” 行,这应该停止警告并保持正确的行为。

另一种方法是仅删除 Row 元素并使用 Item 或 FocusScope(如果您计划在“顶栏”区域中包含输入元素),这不会尝试接管锚定操作,并且可能更适合您如果你真的喜欢主播。