Question

我是qml的新手。我开始使用自定义项目开发一个小应用程序。当我尝试在应用程序anchor.top: first_item.bottom中使用时，为了定位自定义组件的矩形，一个在另一个下面的矩形不起作用。

内容文件main.qml：

import QtQuick 2.5

Item
{
    id:main_screen
    Rectangle
    {
        width: 300
        height: 60

        id: text_content
        color: "DarkGray"
        opacity: 0.9
        border.color: "blue"
        border.width: 3
        radius: 5
        z:6

        Text {
            id: titleText
            width: parent.width
            height: parent.height
            font.pointSize: 20
            font.family: "Arial"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            text: "Test - title"
            color: "White"; style: Text.Raised;
        }
    }


//..................This rectangle is shown below main_screen... so is OK
    Custom_item
    {
        id:first_item
        anchors.top: main_screen.bottom
    }

//..................This rectangle is not shown below first_item... but it shown on absolute top, in overlap of  retangle title
    Custom_item
    {
        id:second_item
        anchors.top: first_item.bottom
    }

//..................This rectangle is not shown below second_item... but it shown on absolute top, in overlap of  retangle title
    Custom_item
    {
        id:third_item
        anchors.top: second_item.bottom
    }
}

内容文件Custom_item.qml

import QtQuick 2.5

Item
{
    id:testComponent

    Rectangle
    {
        width: 300
        height: 60

        id: text_content

        color: "DarkGray"
        opacity: 0.9
        border.color: "blue"
        border.width: 3
        radius: 5
        z:6
    }
}

我做错了什么？

由于

Answer 1

问题在于您要锚定的对象的尺寸。

虽然Rectangle有width和height，但封闭的Item没有，所以它的高度和宽度基本上是0像素，而{ {1}}突出它。

如果您没有任何理由将Rectangle括在Rectangle内，我建议您将Item本身作为顶级元素该文件。

拥有Rectangle的原因可能是：

隐藏Item属性
Rectangles有多个孩子，他们是Item
......可能存在其他原因; - ）

然而，您需要确保顶层物品始终具有正确的尺寸。因此，您应该设置宽度和高度，更好地在组件声明中设置implicitWidth和implicitHeight。

示例1：没有Rectangle

Item

示例2：使用import QtQuick 2.5 Rectangle { id: root width: 300 height: 60 color: "DarkGray" opacity: 0.9 border.color: "blue" border.width: 3 radius: 5 z:6 }

Item

Answer 2

您正在将所有Rectangle锚定到Item，因此您无法获得所需的结果。简单地更改顶部Rectangle的ID，如下所示

Item
{
    id: root        
    Rectangle
    {
        id:main_screen
        ...
    }
}

Qt QML锚点不在自定义项目中工作

2 个答案: