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的還是渲染，不同於無形的，而且，顯然這取決於你的實際使用情況，可有不同程度的過度表現的影響。