Question

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

我是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 （徽标）组件高度应为 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 完全忽略其 {{1 }} 属性（但文本仍然正确调整大小）。所以问题是：

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

Answer 1

你说你得到了Row的预期行为，所以你应该使用它。 Row提供的警告要求您从其子元素中删除垂直锚点（顶部和底部）。

Row元素为其子元素提供水平（左和右）类似锚的行为，但如果使用顶部和底部锚点，则不会介意（注意顶部和底部不在警告中）。

换句话说，删除＆＃34; anchors.left＆＃34;和/或＆＃34; anchors.right＆＃34;来自＆＃34; logoimage＆＃34;，＆＃34; logotext＆＃34;以及＆＃34;其他正确＆＃34; （如果你计划在某些时候取消注释它），而不是＆＃34; anchors.top＆＃34;行，这应该停止警告并保持正确的行为。

另一种方法是只删除Row元素并使用Item或FocusScope（如果您计划在＆＃34;顶部栏和＃34;区域中设置输入元素），这将不会尝试接管锚定操作，并且如果你真的喜欢锚，这可能更适合你。

Answer 2

如果你想让它的子项拉伸，你需要为你的布局赋予宽度，使用width：parent.width或更好，使用锚点{left：parent.left;右：parent.right}并且在布局的子区域内的垂直线上没有锚点。

Answer 3

1）不，这不是RowLayout的错误 2）考虑RowLayout比Row更受欢迎，因为它对于组件放置最具表现力。 Row组件比图形或动画应用程序的Rowlayout更好 3）稳定版现已推出，但您的错误不是错误;）

QML Row vs. RowLayout

3 个答案: