Qt QML 锚在自定义项中不起作用

Posted 2023-02-16

【中文标题】Qt QML 锚在自定义项中不起作用

【英文标题】：Qt QML anchor not working in custom Item

【发布时间】：2017-02-26 16:17:27

【问题描述】：

我是 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
    

我做错了什么？

谢谢

【问题讨论】：

我建议也发布一个屏幕截图，而不是试图解释 ui 问题，即，而不是“此矩形未显示在 first_item 下方...但它显示在绝对顶部，与矩形重叠标题”一个截图可以节省一千个单词:)

它有一个 mcve，比千张图片更能解释问题。值得称道的第一篇文章！

【参考方案1】：

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

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

如果您没有任何理由将Rectangle 包含在Item 中，我建议您将Rectangle 本身作为文件的***元素。

拥有Item 的原因可能是：

隐藏Rectangles 属性 Item 有多个子代，它们在逻辑上是 Rectangle 的兄弟姐妹 ...可能存在其他原因 ;-)

不过，您需要确保***项目始终具有正确的尺寸。所以你应该设置宽度和高度，最好在组件声明中设置implicitWidth和implicitHeight。

示例 1：没有Item

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

示例 2：使用Item

import QtQuick 2.5
Item 
    id:testComponent
    implicitHeight: 60  // < This
    implicitWidth: 300  // < and that are important to have the dimensions

    Rectangle 
        id: text_content

        anchors.fill: parent
        color: "DarkGray"
        opacity: 0.9
        border.color: "blue"
        border.width: 3
        radius: 5
        z:6
    

【讨论】：

非常感谢您澄清想法！

【参考方案2】：

您将所有Rectangle 锚定到Item，因此您没有得到想要的结果。简单更改顶部Rectangle的id如下

Item

    id: root        
    Rectangle
    
        id:main_screen
        ...