我有一個QML ListView，我試圖動態地添加元素到它。我希望在ListView中添加/洗掉元素時，背景矩形也能動態地縮放。現在我得到了一個系結回圈，我明白它們是什么，但我不知道它是從哪里來的。我改變了一下代碼，有一次我能夠擺脫系結回圈，但是ListView不能被滾動。有沒有人有什么想法？
import QtQuick 2.15
import QtQuick.Window 2.0
視窗 {
可見的。true
寬度：800
高度。800
矩形 {
id: listContainer
高度: childrenRect.height
寬度: parent.width
顏色: "透明"
錨點 {
top: parent.top
topMargin: 30
左邊：parent.left
leftMargin: 45 45
}
串列視圖 {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
模型：myModel
高度：childrenRect.height
頭部。
文本 {
z: 2
高度。50
文本。"HEADER"/span>
color: "black"。
}
委托。 組件 {
專案 {
文本 {
id: userName;
text: name;
color: "black";
字體.像素大小。50; font.pixelSize: 50
錨點 {
left: parent.left
leftMargin: 20 20
}
}
矩形 {
高度。1
color: 'black'/span>
寬度: listContainer.width
錨點 {
left: userName.left
top: userName.top
topMargin: -12
leftMargin: -15
}
}
}
}
間隔。80。
}
}
ListModel {
id: myModel
}
/* 在啟動時用默認值填充模型 */
Component.onCompleted: {
for (var i = 0; i < 100; i ) {
myModel.append({
名稱。"大動物：" i
})
}
}
}
編輯：正如@Aditya所建議的，系結回圈可以通過擁有一個靜態的ListView高度來移除，但我不希望它是這樣的。我正在使用矩形作為ListView的背景，我希望它能根據ListView的大小來調整。例如，如果我只添加了兩個元素，我希望矩形也能根據這兩個元素進行縮放，而不是覆寫整個螢屏。這就造成了一個問題：
importQtQuick 2.15
import QtQuick.Window 2.0
視窗 {
可見的。true
寬度：800
高度。800
矩形 {
id: listContainer
高度: childrenRect.height
寬度: parent.width
color: "黃色"
錨點 {
top: parent.top
topMargin: 30
左邊：parent.left
leftMargin: 45 45
}
串列視圖 {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
模型：myModel
高度。800//childrenRect.height。
頭部。
文本 {
z: 2
高度。50
文本。"HEADER"/span>
color: "black"。
}
委托。 組件 {
專案 {
文本 {
id: userName;
text: name;
color: "black";
字體.像素大小。50; font.pixelSize: 50
錨點 {
left: parent.left
leftMargin: 20 20
}
}
矩形 {
高度。1
color: 'black'/span>
寬度: listContainer.width
錨點 {
left: userName.left
top: userName.top
topMargin: -12
leftMargin: -15
}
}
}
}
間隔。80。
}
}
ListModel {
id: myModel
}
/* 在啟動時用默認值填充模型 */
Component.onCompleted: {
for (var i = 0; i < 2; i ) {
myModel.append({
名稱。"大動物：" i
})
}
}
}
我還試著將標題與ListView分離到一個不同的組件中，并將listview錨定在它的下面，這樣做是有效的。唯一的問題是它不能和listview一起滾動。最壞的情況是，我可以為它制作一個滾動影片，但這似乎是一個低效的解決方案，我想知道為什么這個方法不可行。
uj5u.com熱心網友回復：
你可能也在用Item作為委托中的頂層，因為它沒有給出任何隱含的大小，而ListView使用它來計算滾動的需求。你可以簡單地直接使用Text作為委托（你也不需要Component）并把線/矩形放在里面。如果這樣做，您可以使用ListView的contentHeight屬性來確定背景的大小。
此外，我建議將ListView作為頂層，然后做任何造型，我的意思是，將背景Rectangle放在里面。
importQtQuick 2.12
import QtQuick.Window 2.12
視窗 {
寬度：640
高度。480
可見。true
標題。qsTr("Hello World"/span>)
串列視圖 {
id: listView
模型。3
anchors.fill: parent
矩形 { //背景
color: "黃色"
z: -1
width: listView.width
高度: listView.contentHeight
}
委托。文本 {
文本。"name" index
color: "black";
font.pixelSize。50; font.pixelSize: 50
leftPadding。20
矩形 {
高度。1
顏色: 'black'
width: listView.width
y: - 12
x: -15
}
}
間隔。80 Btw，如果你打算把ListView放在一些RowLayout或其他地方，你可能也想在ListView中獲得implicitHeight: contentHeight。
uj5u.com熱心網友回復：
系結回圈源于ListView的height: childrenRect.height陳述句。看起來ListView需要一個固定的高度，或者至少不依賴于childrenRect。這很可能是ListView元素如何知道視圖應該是可滾動的以查看下面的元素。
這真的取決于你想通過設定高度來匹配childrenRect來實作什么，但是在我的例子中，ListView的高度是根據孩子們的情況來改變的（根據你的愿望，大概）。在100個專案的情況下，高度為7970。在模型中有5個專案的情況下，結果是350。你可以通過添加除錯或console.log()與onHeightChanged來檢查。然而，作為這種縮放的結果，ListView被假定為足夠大以查看整個資料集，而不管window父容器的大小。
您不需要縮放 ListView 的高度來匹配內容；這是它的構建目的。它允許滾動因為內容太大，無法在其有限的高度內顯示。
我能夠實作擺脫系結回圈，并能夠通過簡單地將陳述句改為靜態值來進行滾動，以父級高度 800 為例：
我能夠實作擺脫系結回圈，并能夠進行滾動。
Window {
可見。true
寬度：800
高度。800
矩形 {
id: listContainer
高度: childrenRect.height
寬度: parent.width
顏色: "透明"
錨點 {
top: parent.top
topMargin: 30
左邊：parent.left
leftMargin: 45 45
}
串列視圖 {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
模型：myModel
高度。800//childrenRect.height。
頭部。
文本 {
z: 2
高度。50
文本。"HEADER"/span>
color: "black"。
}
委托。 組件 {
專案 {
文本 {
id: userName;
text: name;
color: "black";
字體.像素大小。50; font.pixelSize: 50
錨點 {
left: parent.left
leftMargin: 20 20
}
}
矩形 {
高度。1
color: 'black'/span>
寬度: listContainer.width
錨點 {
left: userName.left
top: userName.top
topMargin: -12
leftMargin: -15
}
}
}
}
間隔。80。
}
}
ListModel {
id: myModel
}
/* 在啟動時用默認值填充模型 */
Component.onCompleted: {
for (var i = 0; i < 100; i ) {
myModel.append({
名稱。"大動物：" i
})
}
}
}
編輯:
我覺得你只是想為一個可擴展的ListView保證一個背景。將靜態背景作為一個容器是可行的，但對于現代的unser界面來說并不是很好--任何彈跳效果或類似的效果都不會移動矩形。你可以通過將矩形錨定在ListView元素上來實作這一點，但這是一個非常迂回的方法。相反，你可以直接設定一個矩形來代替ListView委托的每個元素的樣式。
delegate: 組件 {
專案 {
矩形{
寬度：listContainer.width
height: userName.height 13。
//加入13以調整下面設定的邊距。
錨點 {
left: userName.left
top: userName.top
topMargin: - 12
leftMargin: 15 15
//只是從下面的其他矩形中復制。
}
梯度。梯度 {
//I am just using gradient here for a better understanding of spacing. 你可以使用顏色。
GradientStop { position: 0.0; color: "aqua"/span> }
GradientStop { position: 1.0; color: "green" }
}
}
文本 {
id: userName;
text: name;
color: "black";
字體.像素大小。50; font.pixelSize: 50
錨點 {
left: parent.left
leftMargin: 20 20
}
}
矩形 {
高度。1
color: 'black'/span>
寬度: listContainer.width
錨點 {
left: userName.left
top: userName.top
topMargin: -12
leftMargin: -15
}
}
}
}
這將確保ListView后面的矩形背景看起來是隨著專案滾動的。實際上，我們已經把一個矩形分解成多個，只是給每個元素設定了一個。你也可以使用這種型別的造型來實作串列中的交替顏色，例如。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/327634.html
標籤：
上一篇：maven-dependency-plugin中的目標copy-dependencies未被執行
下一篇：在上傳/部署Zip檔案時，AWSElasticBeanstalk自定義nginx.conf檔案在.platformhooks中沒有被創建。