【发布时间】：2020-03-20 06:00:39
【问题描述】：
对不起，如果这个问题很简单，但我正在查看有关如何在QML 中设置GridLayout 和Buttons、Text、GroupBox 和ProgressBar 的官方文档。
我试图实现的布局如下：
问题我正在努力实现上面的布局。 我在理解如何在页面内以正确方式定位元素时遇到了一些问题。
到目前为止我做了什么：
1) 我发现了一个非常有用的example，我成功地复制了它以便理解这个概念。
2) 我还遇到了this other source，它帮助解释并明确了GridLayout 的一些功能，但仍然不能完全解决问题。
3) 这个source 也有帮助，但不能更进一步。
4) 除了以上几点我也一直在研究offcial documentation。官方文档很有用，但我试图在页面中放置的组件仍然没有正确设置。
编辑
最新的修改推动了我前进，现在它的布局看起来更好，更接近我想要实现的目标。
我想出了一种更好的方式来使用GridLayout（只是因为我仍然没有第二个可以放心使用的选择）。我找到的解决方案是为我需要的每个条目使用GroupBox，但我还有一些剩余的问题，正如您从我发布的 EDITS 中看到的那样，我不确定其原因，因为示例：
1) 为什么TextField 区域在左侧，而我使用GridLayout 2 列？似乎所有组件都只推送到一列。
我希望TextField（和相关的Text）位于中心。
2) 第一个TextField 正确地将文本放在中间。我对其他文本做了同样的事情，但它们仍然在左边，不确定发生了什么。
3) 尽管我在@987654349 中使用了columns: 2，但为什么第一个和最后一个按钮，分别Button Test 和Clear List 只占据布局的一列@ 并且目标是它们都占据整行。
4) 尽管我添加了 ProgressBar，但我仍然看不到它，并且不确定为什么可以在 TextField 中写入，尽管这应该是不可能的。
5)调试器没有错误
最新更新和编辑
下面根据最新的cmet最新更新和建议。 我仍然需要解决几个剩余的疑问：
1) ProgressBar 看起来还是很奇怪，并没有根据窗口的宽度进行扩展。为此我也去了official documentation，但仍然不知道为什么。
2)Button Test 和窗口的上边距之间仍然没有空格。
3) GroupBox 或 RowLayout 不会延伸到窗口的宽度。为此，我咨询了以下source，这对ColumnLayout 很有用，但似乎不适用于其他地方。
我在这个练习中使用的代码如下，它经过修改，你只能复制/粘贴，它会起作用：
main.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.12
import QtQuick.Controls 1.4 as QQC1
ApplicationWindow {
visible: true
width: 640
height: 520
title: qsTr("GridLayout Example")
id: testwindow
ColumnLayout {
// anchors.fill: parent
// anchors.margins: 35
spacing: 10
width: parent.width
Button {
id: buttonTest
text: "Button Test"
Layout.fillWidth: true
font.pointSize: 20
}
GroupBox {
id: box1
title: "Connection"
font.pointSize: 20
Layout.alignment: parent.width
spacing: 10
GridLayout {
width: parent.width
columns: 1
RowLayout {
spacing: 200
Layout.fillWidth: true
Layout.fillHeight: false
Label {
id: textField
text: "Eddie"
font.pointSize: 15
}
Text {
id: connected
text: "Not-Connected"
color: "red"
font.pointSize: 15
horizontalAlignment: Text.AlignRight
}
}
}
}
GroupBox {
id: box2
title: "Log-In Info"
font.pointSize: 20
width: parent.width
spacing: 10
GridLayout {
width: parent.width
columns: 1
RowLayout {
spacing: 200
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: parent.width
Label {
id: textField3
text: "Status"
font.pointSize: 15
}
Text {
id: logInStatus
text: "Logged In"
color: "red"
font.pointSize: 15
horizontalAlignment: Text.AlignRight
}
}
}
}
GroupBox {
id: box3
title: "Log-In ID"
font.pointSize: 20
width: parent.width
spacing: 10
GridLayout {
width: parent.width
columns: 1
RowLayout {
spacing: 200
Layout.fillWidth: true;
Layout.fillHeight: true
Label {
id: textField5
text: "Logged in as:"
font.pointSize: 15
}
Text {
id: loggedInAs
text: "Name"
color: "red"
font.pointSize: 15
horizontalAlignment: Text.AlignRight
}
}
}
}
GroupBox {
id: box4
title: "Email"
font.pointSize: 20
width: parent.width
spacing: 10
GridLayout {
width: parent.width
columns: 1
RowLayout {
spacing: 200
Layout.fillWidth: true;
Layout.fillHeight: true
Label {
id: textField7
text: "Email:"
font.pointSize: 15
}
Text {
id: notSentEmail
text: "Not Sent"
color: "red"
font.pointSize: 15
horizontalAlignment: Text.AlignRight
}
}
}
}
Button {
id: buttonClearList
text: "Clear List"
Layout.fillWidth: true
font.pointSize: 20
}
QQC1.ProgressBar {
ProgressBar {
Layout.fillWidth: true
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
leftMargin: -parent.leftMargin
rightMargin: -parent.rightMargin
}
}
}
}
}
我怎样才能实现上面的布局？在过去的几天里，我一直在努力了解如何将组件正确定位到布局中，并研究文档中的 anchor 属性。
非常感谢您指出正确的方向，再次抱歉，如果这个问题很简单。
【问题讨论】：
-
不清楚你在问什么。请澄清你的问题。请把问题重新组织成一个表格：我想得到什么——我为此做了什么——我得到了什么。
-
@folibis，非常感谢您花时间阅读我的问题。我以更简单的方式重新组织了这个问题。抱歉，如果它看起来令人困惑。目标是在我发布的打印屏幕上实现布局，但不幸的是我在定位元素时遇到了一些问题。
-
呃，page.qml（应该命名为“Page.qml”）的顶部有一个错误，根本无法加载它（GridLayout 没有
spacing属性）。 再次你没有看到 Qt 给你的有用的调试警告消息。例如，它显然是在“提醒”你不能在布局中使用锚点，带有一行 # 和所有内容。或者您有一堆未定义的对“红色”的引用。请修正缩进，你可能会发现一些东西。 -
@MaximPaperno，感谢您的回答。我纠正了错误，但仍然没有结果。我发了this 可能有用吗？
-
我看到了一个潜在的相关question。我想知道我是否应该将所有内容视为一行而不是使用
GridLayout。
标签： qt qml label qt5 grid-layout