調整ColumnLayout當Repeater的代表高度變化

我已經成立了一個名爲test1.qml與文件，內容如下：調整ColumnLayout當Repeater的代表高度變化

import QtQuick 2.6 
import QtQuick.Layouts 1.3 

Rectangle { 
    width: 800; height: 1000; 

    ColumnLayout { 
     anchors.centerIn: parent 

     // Header goes here 

     Repeater { 
      model: 3 
      delegate: MyRectangle { 
       width: 150 
       height: width 
       color: "#44ff0000" 
      } 
     } 

     // Footer goes here 

    } 
}

我還設置定義了一個名爲test2.qml文件如下：

import QtQuick 2.6 
import QtQuick.Layouts 1.3 

Rectangle { 
    width: 800; height: 1000; 

    ColumnLayout { 
     anchors.centerIn: parent 

     // Header goes here 

     Repeater { 
      model: 3 
      delegate: Column { 
       MyRectangle { 
        width: 150 
        height: width 
        color: "#44ff0000" 
       } 
      } 
     } 

     // Footer goes here 

    } 
}

最後，MyRectangle.qml有以下內容：

import QtQuick 2.6 

Rectangle { 
    MouseArea { 
     anchors.fill: parent 
     onClicked: { 
      parent.height += 50 
     } 
    } 
}

我的目標是，被點擊MyRectangle的實例時，它們的高度有所改變，而且ColumnLayout應該擴大，以使項目保持它們的間距。

當我運行test.qml，結果不是我所期望的，因爲MyRectangle重疊的情況下對方，因爲他們被點擊。但是，test2.qml給出了所需的行爲，並且MyRectangle的實例保持其空間，因爲放大了ColumnLayout。

在derM的請求下，我認爲下面的GIF可能有助於更清楚地解釋這一點。

test1.qml的（不期望的）行爲：

test2.qml的（期望的）行爲：

爲什麼是它我必須將對象包裝在列中以實現設計紅色的結果？

來源

2017-11-18 Knute Knudsen

中繼器沒有佈局。當你只有一個孩子時，你爲什麼要使用Column或RowLayout作爲委託？ – derM

Repeater只是創建一些委託實例，可能傳遞每個實例的模型數據。佈局可以通過將Repeater放置在代表將要參與的佈局中而應用於外部，或者每個代表可以關注其自己的位置，例如通過設置x和y值 – derM

您的意見是有道理的，我最初嘗試使用只是一個矩形。然而，當我這樣做時，我的所有物品都堆疊在一起。將「height：myDelegate.height」添加到Rectangle會正確地佈局代理，但是Repeater（它本身就是ColumnLayout的一部分）沒有得到正確的高度，Repeater下面的項目被佈置在它。經過多次試驗和錯誤之後，我發現Column或ColumnLayout會照顧我的問題。不過，我很想知道爲什麼Rectangle不能正常工作。 –

的原因可能聽起來很奇怪：

的[...]Layout - 家庭不僅有安排的對象，而且要調整它們的大小。你不應該設置或改變它的大小。

要完成工作，當您不使用可用的附屬屬性來設置尺寸時，它將使用您的Item的implicitWidth/Height。

如果您尚未設置隱式維度，則uppon將新項目添加到佈局中，它們的隱式維度將設置爲等於它們的集合dimsions。但這不是一種約束！因此，如果您現在更新height，則implicitHeight將保持原始大小，因此佈局不會對更改做出反應。

如果您將Column添加到您的代理，則事情會發生變化：Column根據其子代的邊界矩形更新其implicitHeight。如果您現在調整Rectangle的高度，則Column將調整implicitHeight，而Layout將對此更改做出反應。

現在你有以下解決方案：

使用Layout附加屬性，設置和改變大小的提示。使用代表implicitHeight代替height。雖然這可能在語義上是錯誤的。
不要使用ColumnLayout，而只需要一個常規的Column，當您不需要額外的佈局功能（附件屬性和調整項目大小等）時，這似乎是您的問題。

Column { 
    anchors.centerIn: parent 
    spacing: 5 

    // Header goes here 

    Repeater { 
     model: 3 
     delegate: 
      Rectangle { 
       width: 150 
       height: width 
       color: "#44ff0000" 
       MouseArea { 
        anchors.fill: parent 
        onClicked: { 
         console.log(parent.implicitHeight) 
         parent.height += 50 
        } 
       } 

     } 
    } 
    // Footer goes here 

}

來源

2017-11-27 20:29:41 derM

調整ColumnLayout當Repeater的代表高度變化

回答

相關問題