如何在 QML 中设计多级流体布局 [英] How to design a multi-level fluid layout in QML
问题描述
我在 QML 中设计了一个布局，以了解有关其功能的更多信息，并对设计此类布局的最佳实践"有一些疑问.这里是:
它本质上是一个ColumnLayout，由三个RowLayout组成，每一个都有一些Rectangle.每个 Row 和 Rectangle 的大小应该计算如下:
- 第一行:高度 = 40%，宽度 = 100%
- 红色矩形填充整个区域
- 第二行:高度 = 20%，宽度 = 100%
- 深绿色矩形:高度 = 100%，宽度 = 20%，
- 浅绿色矩形:高度 = 100%，宽度 = 80%
- 第三行:高度 = 40%，宽度 = 100%
- 深蓝色矩形:高度 = 100%，宽度 = 40%，
- 蓝色矩形:高度 = 100%，宽度 = 20%
- 浅蓝色矩形:高度 = 100%，宽度 = 40%
我提出的 QML 正在运行，如下所示.我对此有一些疑问:
- 我使用 Layout.preferredHeight: x*parent.height 模式设置了宽度和高度百分比.其他选项导致了一些问题(例如，preferredHeight 导致了绑定循环警告).我的方法是否正确有效?
- 作为 hack，我为第 2 行和第 3 行的第一个元素设置了 Layout.fillWidth: true，这对我来说没有意义，但确实有效.如果我将它们的宽度设置为百分比(例如 Layout.preferredWidth: 0.2*parent.width)，它们的行将折叠到宽度 0.这是预期的行为吗?有没有更好的解决方法?
- 您对布局有什么建议吗?我走在正确的道路上吗?
这是我用于布局的 QML 代码:
应用程序窗口 {×:500是:100宽度:250身高:150可见:真列布局 {anchors.fill:父级间距:0行布局{间距:0Layout.preferredHeight: 0.4*parent.height布局.fillHeight:假长方形 {布局.fillHeight:真布局.fillWidth:真红色"}}行布局{间距:0Layout.preferredHeight: 0.2*parent.height布局.fillHeight:假长方形 {布局.fillHeight:真布局.fillWidth:真颜色:深绿色"}长方形 {布局.fillHeight:真Layout.preferredWidth: 0.8*parent.width颜色:浅绿色"}}行布局{间距:0Layout.preferredHeight: 0.4*parent.height布局.fillHeight:假长方形 {布局.fillHeight:真布局.fillWidth:真颜色:深蓝"}长方形 {布局.fillHeight:真Layout.preferredWidth: 0.2*parent.width颜色:蓝色"}长方形 {布局.fillHeight:真Layout.preferredWidth: 0.4*parent.width颜色:浅蓝色"}}}}更新:
我的方法似乎比我预期的更老套:
- 在此布局中将 Text 元素作为子元素会引发 绑定循环 警告，例如:
<块引用>
QML QQuickLayoutAttached:检测到属性preferredWidth"的绑定循环
如果在 矩形 中包含换行文本，则警告会消失.
- spacing: 0 似乎起着重要作用.省略它会导致绑定循环警告.
虽然我在 QML 中的流畅布局设计方法可行，但它存在一些严重问题，可能不属于最佳实践".
QtQuick.Layout 对经典锚定系统没有提供任何真正的改进.我会建议避免使用它们.您可以使用锚点更好地控制布局.
这是没有 QtQuick.Layout 的完全相同的设计:
应用程序窗口 {×:500是:100宽度:250身高:150可见:真柱子 {anchors.fill:父级排 {anchors.left: 父级.left锚点.right: 父级.right高度:0.4 * 父级高度长方形 {anchors.top: 父级.topanchors.bottom:父级.bottom宽度:父宽度红色"}}排 {anchors.left: 父级.left锚点.right: 父级.right高度:0.2 * 父级高度长方形 {anchors.top: 父级.topanchors.bottom:父级.bottom宽度:0.2 * parent.width颜色:深绿色"}长方形 {anchors.top: 父级.topanchors.bottom:父级.bottom宽度:0.8 * parent.width颜色:浅绿色"}}排 {anchors.left: 父级.left锚点.right: 父级.right高度:0.4 * 父级高度长方形 {anchors.top: 父级.topanchors.bottom:父级.bottom宽度:0.4 * parent.width颜色:深蓝"}长方形 {anchors.top: 父级.topanchors.bottom:父级.bottom宽度:0.2 * parent.width颜色:蓝色"}长方形 {anchors.top: 父级.topanchors.bottom:父级.bottom宽度:0.4 * parent.width颜色:浅蓝色"}}}}到目前为止，我从未遇到过任何没有 QtQuick.Layout 就无法完成的设计.
I have designed a layout in QML to learn more about its features and have some questions on the "Best Practices" in designing such layout. Here it is:
It is essentially a ColumnLayout consisted of three RowLayouts, each one with some Rectangles. The size of each Row and Rectangle should be calculate such as:
- First row: Height = 40%, Width = 100%
- Red Rectangle filling the whole area
- Second row: Height = 20%, Width = 100%
- Dark-green Rectangle: Height = 100%, Width = 20%,
- Light-green Rectangle: Height = 100%, Width = 80%
- Third row: Height = 40%, Width = 100%
- Dark-blue Rectangle: Height = 100%, Width = 40%,
- Blue Rectangle: Height = 100%, Width = 20%
- Light-blue Rectangle: Height = 100%, Width = 40%
The QML I have came up with is working and is in the following. I have some questions about it:
- I have set the width and height percentages using Layout.preferredHeight: x*parent.height pattern. Other options caused some issues (e.g. preferredHeight caused binding loop warnings). Is my approach correct and efficient?
- As a hack, I set Layout.fillWidth: true for the first element of Row #2 and Row #3, which doesn't make sense to me, but does work. If I set their width as percentage (e.g. Layout.preferredWidth: 0.2*parent.width) their row will collapse to width 0. Is this an expected behavior? Is there any better workaround?
- Do you have any recommendation on the layouts? Am I on the right path?
Here is my QML code for the layout:
ApplicationWindow {
x: 500
y: 100
width: 250
height: 150
visible: true
ColumnLayout {
anchors.fill: parent
spacing: 0
RowLayout {
spacing: 0
Layout.preferredHeight: 0.4*parent.height
Layout.fillHeight: false
Rectangle {
Layout.fillHeight: true
Layout.fillWidth: true
color: "red"
}
}
RowLayout {
spacing: 0
Layout.preferredHeight: 0.2*parent.height
Layout.fillHeight: false
Rectangle {
Layout.fillHeight: true
Layout.fillWidth: true
color: "darkGreen"
}
Rectangle {
Layout.fillHeight: true
Layout.preferredWidth: 0.8*parent.width
color: "lightGreen"
}
}
RowLayout {
spacing: 0
Layout.preferredHeight: 0.4*parent.height
Layout.fillHeight: false
Rectangle {
Layout.fillHeight: true
Layout.fillWidth: true
color: "darkBlue"
}
Rectangle {
Layout.fillHeight: true
Layout.preferredWidth: 0.2*parent.width
color: "blue"
}
Rectangle {
Layout.fillHeight: true
Layout.preferredWidth: 0.4*parent.width
color: "lightBlue"
}
}
}
}
Update:
My approach seems to be more hacky than I expected:
- Putting Text elements as children in this layout raises binding loop warnings like:
QML QQuickLayoutAttached: Binding loop detected for property "preferredWidth"
If a wrap Text inside a Rectangle the warnings disappear.
- The spacing: 0 seems to play an important role. Omitting it will causes binding loop warnings.
While my approach to fluid layout design in QML works, it has some serious issue and might not fall under the "best practices".
QtQuick.Layout does not provide any real improvements over the classical anchoring system. I would recommand to avoid them. You can have way more control over your layout using anchors.
Here is the exact same design without QtQuick.Layout :
ApplicationWindow {
x: 500
y: 100
width: 250
height: 150
visible: true
Column {
anchors.fill: parent
Row {
anchors.left: parent.left
anchors.right: parent.right
height: 0.4 * parent.height
Rectangle {
anchors.top: parent.top
anchors.bottom: parent.bottom
width: parent.width
color: "red"
}
}
Row {
anchors.left: parent.left
anchors.right: parent.right
height: 0.2 * parent.height
Rectangle {
anchors.top: parent.top
anchors.bottom: parent.bottom
width: 0.2 * parent.width
color: "darkGreen"
}
Rectangle {
anchors.top: parent.top
anchors.bottom: parent.bottom
width: 0.8 * parent.width
color: "lightGreen"
}
}
Row {
anchors.left: parent.left
anchors.right: parent.right
height: 0.4 * parent.height
Rectangle {
anchors.top: parent.top
anchors.bottom: parent.bottom
width: 0.4 * parent.width
color: "darkBlue"
}
Rectangle {
anchors.top: parent.top
anchors.bottom: parent.bottom
width: 0.2 * parent.width
color: "blue"
}
Rectangle {
anchors.top: parent.top
anchors.bottom: parent.bottom
width: 0.4 * parent.width
color: "lightBlue"
}
}
}
}
So far I never met any design that was impossible to do without QtQuick.Layout.
这篇关于如何在 QML 中设计多级流体布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
