调整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的代表高度变化

回答

相关问题