我希望动态调整大小的窗口具有列布局,以便列中的最后一项填充剩余的剩余空间.我可以通过动态计算
javascript中最后一项的高度来做到这一点.我还可以将最后一项移出列并将顶部绑定到列的底部和容器的底部,但是我还必须从其内容中计算列的新大小.
import QtQuick 2.0
import QtQuick.Controls 1.1
Rectangle {
id: rect
anchors.fill: parent
Column {
id: myColumn
anchors.fill: parent
Rectangle {
id: container
signal clicked
width: label.width + 20; height: label.height + 6
anchors { right: parent.right }
border.width: 1
MouseArea {
id: mouseArea
anchors.fill: parent
onClicked: {
if (myColumn.state == 'hidden') { myColumn.state = '' }
else { myColumn.state = 'hidden'; }
}
}
Text {
id: label
text: { if (myColumn.state == '') {"Hide"} else {"Show"} }
anchors.centerIn: parent
}
}
Text {
id: textualBox
text: "A Big Box"
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
anchors { left: parent.left; right: parent.right }
height: 200
}
TableView {
id: table
width: parent.width
height: { myColumn.height - container.height - textualBox.height }
model: myData
TableViewColumn { role: "name"; title: "name"; width: 60 }
TableViewColumn { role: "stuff"; title: "stuff"; width: 60 }
}
states: State {
name: 'hidden'
PropertyChanges {
target: textualBox
height: 20
text: "a little Box"
}
}
}
ListModel {
id: myData
ListElement{ name: "content" ; stuff: "4.5" }
ListElement{ name: "content" ; stuff: "4.5" }
ListElement{ name: "content" ; stuff: "4.5" }
}
}
有更优雅的方式吗？
解决方法
您可以使用ColumnLayout和Layout.fillHeight附加属性而不是Column
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
ApplicationWindow {
visible: true
width: 640
height: 480
ColumnLayout{
anchors.fill: parent
Rectangle {
color: "red"
Layout.fillWidth: true
height: 30
}
Rectangle {
color: "blue"
Layout.fillWidth: true
Layout.fillHeight: true
}
}
}
