QML 布局:如何为行或列布局中的项目赋予权重? [英] QML Layouts: How to give weights to items in a row or column layout?
问题描述
我试图通过为每个项目指定一种重量来找出按比例布局项目的方法.例如 Android 的 布局.
I'm trying to figure out a way to layout items proportionally by specifying a kind of weight for each item. For example the way Android does their layouts.
我试图实现它的方式是这样的:
The way I'm trying to achieve it is like so:
import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
GridLayout {
columns: 4
width: 640
height: 480
Rectangle {
color: "red"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.columnSpan: 1
}
Rectangle {
color: "#80000000"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.columnSpan: 2
}
Rectangle {
color: "blue"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.columnSpan: 1
}
}
我希望中间矩形的宽度是其他两个矩形的总和,但它们的宽度都是相等的.
I would expect the width of the middle rectangle to be the sum of the other two rectangles, but instead they are all equal widths.
在 Layout 附加属性上使用关系绑定似乎总是会导致奇怪的绑定循环.我知道我可以只使用 Row 来代替关系绑定,但如果可能的话,我更喜欢使用 Layouts.
Using relational bindings on the Layout attached properties seems to always lead to weird binding loops. I know I could just use a Row instead with relational bindings, but I'd prefer to use Layouts if possible.
编辑
这似乎按我想要的方式工作,但我不知道为什么会这样.它的行为就像 preferredWidth
值是项目的重量一样.
This seems to work the way I want it to, but I don't know why it works. It behaves as if the preferredWidth
value is the weight of the item.
import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
RowLayout {
width: 640
height: 480
Rectangle {
color: "red"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.preferredWidth: 1
}
Rectangle {
color: "#80000000"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.preferredWidth: 2
}
Rectangle {
color: "blue"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.preferredWidth: 1
}
}
推荐答案
不确定是否有意,但 Layout.preferredWidth
(或 Layout.preferredHeight
for ColumnLayouts)可以用作重量".当还指定 Layout.minimumWidth
时,事情就会中断,但我认为在尝试根据权重实现布局时指定最小尺寸没有多大意义.
Not sure if intentional or not but Layout.preferredWidth
(or Layout.preferredHeight
for ColumnLayouts) can be used as a "weight". Things break when also specifying Layout.minimumWidth
, but I don't think it makes much sense to be specify minimum dimensions when trying to implement layouts in terms of weights anyways.
import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
RowLayout {
width: 640
height: 480
Rectangle {
color: "red"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.preferredWidth: 1
}
Rectangle {
color: "#80000000"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.preferredWidth: 2
}
Rectangle {
color: "blue"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.preferredWidth: 1
}
}
这篇关于QML 布局:如何为行或列布局中的项目赋予权重?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!