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

Question

在此代码中，一些项目首先是不可见的。我想让他们在点击按钮的时候可以看到他们在我放置的地方。

为了给他们留下空间，当隐藏选项可见时，我将其他项目放置在显示的位置。

我的问题是，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服从由我设定的细胞位置，而不管其他项目是否可见或不可见。

请帮忙。

Answer 1

的医生说了GridLayout是：

[...]这是一个类似的基于工具QGridLayout。全部可见 GridLayout元素的子元素将属于该布局。 [...]。

所以你看到的是开发人员所遵循的实施方法的直接后果。确实，能见度的变化触发了Item的重新定位，正如this代码路径中所见。

而不是考虑visible属性，你可以使用opacity属性：不透明的Item是由布局考虑，导致预期的可见行为。例如，见这个简单的例子：

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 
      } 
     } 
    } 
} 

记住，非不透明Item s的还是渲染，不同于无形的，而且，显然这取决于你的实际使用情况，可有不同程度的过度表现的影响。