Я создал файл test1.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: 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:
Почему мне приходится заключать объекты в столбец для достижения желаемого результата?