英文:
QT QML Gridlayout desperation
问题
我需要一个相当简单的QML布局。
我已经花了一些时间尝试GridLayout,我实际上认为它适用于这个要求 - 但它不起作用。
应该是这样的
而现在是这样的 - 右边的矩形(黄色)完全丢失了。
这是我的当前代码
ApplicationWindow {
property real _encoderWidth: 254
property real _headerHeight: 188
property real _leftSideWidth: 70
property real _keyboard1Height: 100
property real _keyboard2Height: 180
visible: true
id: root
objectName: "mainScreen"
width: 600 + _encoderWidth + _leftSideWidth
height: 800 + _headerHeight + _keyboard1Height + _keyboard2Height
minimumHeight: height
maximumHeight: height
minimumWidth: width
maximumWidth: width
GridLayout {
id: grid
anchors.fill: parent
rows: 4
columns: 3
Rectangle {
id: left
Layout.column: 0
Layout.rowSpan: 4
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: root.height
Layout.maximumHeight: root.height
Layout.minimumWidth: _leftSideWidth
Layout.maximumWidth: _leftSideWidth
color: "blue"
}
Rectangle {
id: top
Layout.row: 0
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: _headerHeight
Layout.maximumHeight: _headerHeight
Layout.minimumWidth: root.width
Layout.maximumWidth: root.width
color: "red"
}
Rectangle {
id: right
Layout.row: 0
Layout.column: 2
Layout.rowSpan: 4
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: root.height
Layout.maximumHeight: root.height
Layout.minimumWidth: _encoderWidth
Layout.maximumWidth: _encoderWidth
color: "yellow"
}
Rectangle {
id: content
Layout.row: 1
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: 800
Layout.maximumHeight: 800
Layout.minimumWidth: 600
Layout.maximumWidth: 600
color: "green"
}
Rectangle {
id: bottom1
Layout.row: 2
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: _keyboard1Height
Layout.maximumHeight: _keyboard1Height
Layout.minimumWidth: root.width
Layout.maximumWidth: root.width
color: "lightgray"
}
Rectangle {
id: bottom2
Layout.row: 3
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: _keyboard2Height
Layout.maximumHeight: _keyboard2Height
Layout.minimumWidth: root.width
Layout.maximumWidth: root.width
color: "gray"
}
}
}
布局不需要是动态的,窗口大小是固定的,不能更改。
欢迎任何改进的提示或建议。
非常感谢和最好的祝愿
Arne
英文:
I need a fairly simple layout in qml.
I have now struggled for some time with the GridLayout, which I had actually classified as correct for this requirement - but it does not work.
This is how it should be
And this is how it is currently - the right rectangle (yellow) is completely missing.
This is my current code
ApplicationWindow {
property real _encoderWidth: 254
property real _headerHeight: 188
property real _leftSideWidth: 70
property real _keyboard1Height: 100
property real _keyboard2Height: 180
visible: true
id: root
objectName: "mainScreen"
width: 600 + _encoderWidth + _leftSideWidth
height: 800 + _headerHeight + _keyboard1Height + _keyboard2Height
minimumHeight: height
maximumHeight: height
minimumWidth: width
maximumWidth: width
GridLayout {
id: grid
anchors.fill: parent
rows: 4
columns: 3
Rectangle {
id: left
Layout.column: 0
Layout.rowSpan: 4
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: root.height
Layout.maximumHeight: root.height
Layout.minimumWidth: _leftSideWidth
Layout.maximumWidth: _leftSideWidth
color: "blue"
}
Rectangle {
id: top
Layout.row: 0
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: _headerHeight
Layout.maximumHeight: _headerHeight
Layout.minimumWidth: root.width
Layout.maximumWidth: root.width
color: "red"
}
Rectangle {
id: right
Layout.row: 0
Layout.column: 2
Layout.rowSpan: 4
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: root.height
Layout.maximumHeight: root.height
Layout.minimumWidth: _encoderWidth
Layout.maximumWidth: _encoderWidth
color: "yellow"
}
Rectangle {
id: content
Layout.row: 1
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: 800
Layout.maximumHeight: 800
Layout.minimumWidth: 600
Layout.maximumWidth: 600
color: "green"
}
Rectangle {
id: bottom1
Layout.row: 2
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: _keyboard1Height
Layout.maximumHeight: _keyboard1Height
Layout.minimumWidth: root.width
Layout.maximumWidth: root.width
color: "lightgray"
}
Rectangle {
id: bottom2
Layout.row: 3
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumHeight: _keyboard2Height
Layout.maximumHeight: _keyboard2Height
Layout.minimumWidth: root.width
Layout.maximumWidth: root.width
color: "gray"
}
}
}
The layout does not have to be dynamic, the window size is fixed and cannot be changed.
Any tip or suggestion for improvement is welcome.
Many thanks and best regards
Arne
答案1
得分: 1
以下是您窗口中发现的两个奇怪之处:
- 如果您固定了所有尺寸,为什么要使用布局?
- 除了“green”(您在那里使用了600),为什么在您的中间列中使用
root.width
?可能正是这一点导致了黄色矩形超出了视口。
我不确定这些是否是您正在寻找的比例。
- 我在顶部添加了2个变量。
- 我保留了布局,尽管尺寸应该是固定的。
- 我设置了首选尺寸而不是最小/最大尺寸。请注意,由于您似乎没有考虑矩形之间的间距(
rowSpacing
和columnSpacing
),确保矩形适应窗口的代价是它们的尺寸会略有不同于您的期望。 - 我去掉了左侧和右侧项目的显式设置高度(它们应该填充它们跨越的所有4行)。
- 我去掉了中间列中除1个项目之外的所有项目的显式设置宽度(它们都应该填充可用宽度)。
这留下:
ApplicationWindow {
property real _baseWidth: 600
property real _baseHeight: 400
property real _encoderWidth: 254
property real _headerHeight: 188
property real _leftSideWidth: 70
property real _keyboard1Height: 100
property real _keyboard2Height: 180
visible: true
id: root
objectName: "mainScreen"
width: _baseWidth + _encoderWidth + _leftSideWidth
height: _baseHeight + _headerHeight + _keyboard1Height + _keyboard2Height
minimumHeight: height
maximumHeight: height
minimumWidth: width
maximumWidth: width
GridLayout {
id: grid
anchors.fill: parent
rows: 4
columns: 3
Rectangle {
id: left
Layout.row: 0
Layout.column: 0
Layout.rowSpan: 4
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredWidth: _leftSideWidth
color: "blue"
}
Rectangle {
id: top
Layout.row: 0
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: _headerHeight
Layout.preferredWidth: _baseWidth
color: "red"
}
Rectangle {
id: content
Layout.row: 1
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: _baseHeight
color: "green"
}
Rectangle {
id: bottom1
Layout.row: 2
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: _keyboard1Height
color: "lightgray"
}
Rectangle {
id: bottom2
Layout.row: 3
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: _keyboard2Height
color: "gray"
}
Rectangle {
id: right
Layout.row: 0
Layout.column: 2
Layout.rowSpan: 4
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredWidth: _encoderWidth
color: "yellow"
}
}
}
如果需要,您可以进一步微调,包括布局的间距。
英文:
2 things I found strange in your window:
- Why use a layout if you fix all the sizes?
- Why use
root.width
for items in your middle column (except forgreen
, you used 600 there)?<br/>It is probably that very point that pushed the yellow rectangle outside the viewport.
I'm not sure these are the proportions you are looking for.
- I added 2 variables at the top.
- I kept the layout even though sizes are supposed to be fixed.
- I set the preferred sizes instead of min/max sizes.<br/>Note that since you do not seem to have taken the space between rectangles into consideration (
rowSpacing
andcolumnSpacing
), the cost of ensuring rectangles fit in the window is that their sizes are going to be slightly different from what you expect. - I removed the explicitly set height for the left and right item (they are supposed to fill all 4 rows they span across.
- I removed the explicitly set width for all but 1 item in the middle column (they are all supposed to fill the available width).
This leaves:
ApplicationWindow {
property real _baseWidth: 600
property real _baseHeight: 400
property real _encoderWidth: 254
property real _headerHeight: 188
property real _leftSideWidth: 70
property real _keyboard1Height: 100
property real _keyboard2Height: 180
visible: true
id: root
objectName: "mainScreen"
width: _baseWidth + _encoderWidth + _leftSideWidth
height: _baseHeight + _headerHeight + _keyboard1Height + _keyboard2Height
minimumHeight: height
maximumHeight: height
minimumWidth: width
maximumWidth: width
GridLayout {
id: grid
anchors.fill: parent
rows: 4
columns: 3
Rectangle {
id: left
Layout.row: 0
Layout.column: 0
Layout.rowSpan: 4
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredWidth: _leftSideWidth
color: "blue"
}
Rectangle {
id: top
Layout.row: 0
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: _headerHeight
Layout.preferredWidth: _baseWidth
color: "red"
}
Rectangle {
id: content
Layout.row: 1
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: _baseHeight
color: "green"
}
Rectangle {
id: bottom1
Layout.row: 2
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: _keyboard1Height
color: "lightgray"
}
Rectangle {
id: bottom2
Layout.row: 3
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: _keyboard2Height
color: "gray"
}
Rectangle {
id: right
Layout.row: 0
Layout.column: 2
Layout.rowSpan: 4
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredWidth: _encoderWidth
color: "yellow"
}
}
}
I let you fine-tune the thing if needed, such as including the spacing of the layout.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论