11

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

我是 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组件它的高度应该跟随 logo 的高度，并且告诉Image(logo) 组件它的高度应该是Rectangle(mainwindow) 组件的 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 测试版，直到发布稳定版本？
4

3 回答 3

5

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

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

换句话说，从“logoimage”、“logotext”和“otherrect”中删除“anchors.left”和/或“anchors.right”行（如果你打算在某个时候取消注释），但不是“anchors.top” " 行，这应该会停止警告并保持正确的行为。

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

于 2014-03-27T13:17:07.587 回答
1

如果您希望布局拉伸其子级，则需要为布局指定宽度，可以使用 width: parent.width，或者更好的是使用 anchors { left: parent.left; 右： parent.right } 并且布局的子元素内的垂直线上没有锚点。

于 2013-06-17T11:55:54.717 回答
0

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

于 2013-08-08T14:01:36.063 回答