QML GridLayout 不遵守我指定的单元格排列

Posted 2023-02-16

【中文标题】QML GridLayout 不遵守我指定的单元格排列

【英文标题】：QML GridLayout does not obey my specified cell arrangements

【发布时间】：2016-03-15 09:19:32

【问题描述】：

在这段代码中，有些项目一开始是不可见的。我希望通过单击按钮在我放置它们的位置可以看到它们。

为了给它们留出空间，我将另一个项目放置在隐藏选项可见时将显示的位置。

我的问题是GridLayout 在其他项目不可见时不遵守代码中设置的以下单元格位置。

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1

Window 
    visible: true
    height: 500; width: 500

    GridLayout 
        id: gridLayout

        property bool secondScreenOptionsVisible: false

        property int hmmiButtonRow: 0
        property int hmmiButtonCol: 0

        Rectangle 
            id: hmmi; visible: gridLayout.secondScreenOptionsVisible
            Layout.row: gridLayout.hmmiButtonRow; Layout.column: gridLayout.hmmiButtonCol;
            height: 50; width: 50; color: "pink";
            Layout.alignment: Qt.AlignTop
            Text  text: "HMMI"; anchors.centerIn: parent 
        

        property int optionsButtonRow: 1
        property int optionsButtonCol: 0

        Rectangle 
            id: optionsButton; visible: gridLayout.secondScreenOptionsVisible
            Layout.row: gridLayout.optionsButtonRow; Layout.column: gridLayout.optionsButtonCol;
            height: 50; width: 50; color: "red"
            Layout.alignment: Qt.AlignTop
            Text  text: "Options..."; anchors.centerIn: parent 
        

        property int flipperControlRow: 3
        property int flipperControlCol: 0

        Rectangle 
            id: flipperControl;
            Layout.row :gridLayout.flipperControlRow; Layout.column: gridLayout.flipperControlCol;
            height: 200; width: 50;
            color: "brown";
            Layout.rowSpan: 4
            Layout.alignment: Qt.AlignTop
            Text  text: "Flipper"; anchors.centerIn: parent 
        
    

输出：

当所有项目都可见时：

当其他两项被隐藏时，GridLayout 不遵守规则。

我希望GridLayout 服从我设置的单元格位置，而不管其他项目是否可见。

请帮忙。

【参考方案1】：

文档为GridLayout 说：

[...] 它类似于基于小部件的 QGridLayout。 GridLayout 元素的所有 visible 子元素都将属于该布局。 [...]。

因此，您所看到的是开发人员遵循的实施方法的直接结果。实际上，可见性的变化会触发 Items 重新定位，如 this 代码路径所示。

您可以使用opacity 属性而不是考虑visible 属性：布局考虑了非透明Items，从而产生预期的可见行为。例如看这个简单的例子：

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1

Window 
    visible: true
    height: 400; width: 400

    GridLayout 
        anchors.fill: parent
        id: gridLayout
        rows: 3
        columns: 3

        Repeater 
            id: rep
            model: 9

            Rectangle 
                color: "black"
                Layout.preferredWidth: 100
                Layout.preferredHeight:  100
                Layout.alignment: Qt.AlignCenter
                opacity: index === rep.count - 1
            
        
    

请注意，非不透明的Items 仍会被渲染，与不可见的不同，对性能的影响程度不同，具体取决于您的实际用例。

【讨论】：

链接已损坏。我猜它指的是 5.5 左右，但您能否编辑它以更正链接？也许this 是它指向的地方？

@Mitch 感谢您的指点。我已经用新网址更新了链接。