如何在QML中使用按钮，GroupBox，文本和ProgressBar设置基本的GridLayout

Question

[抱歉，这个问题很简单，但是我正在查看有关如何使用GridLayout，Buttons，Text和GroupBox中的ProgressBar设置QML的官方文档。我正在尝试实现的布局如下：

问题我遇到的问题是我正在努力实现上述布局。我在理解如何在页面内以正确的方式放置元素时遇到一些问题。

到目前为止我所做的：

1]我发现了一个非常有用的example，为了理解这个概念，我成功地复制了它。

[2）另外，我碰到了this other source，因为它可以解释并阐明GridLayout的某些功能，但仍然无法完全解决问题，因此很有帮助。

3）此source也有帮助，但不能再向前推进。

[4）除了上述几点，我还研究了offcial documentation。官方文档很有用，但仍然无法正确设置我要在页面中定位的组件。

编辑

最新的修改使我向前迈进，现在它的布局看起来更好并且接近于我要实现的目标。

我想出了一种使用GridLayout的方法（只是因为我仍然没有第二种选择可以放心使用），因此可以更好地使用它。我发现的解决方案是为需要的每个条目使用GroupBox，但是我仍然遇到一些剩余的问题，如您在发布的EDITS中看到的那样，我不确定原因，例如：] >

1

）为什么当我在两列中使用TextField时，GridLayout区域位于左侧？似乎所有组件都只推送到一列。我希望TextField（和相关的Text）位于中间。

2]

第一个TextField正确地将文本放在中间。我对其他文本也做了相同的操作，但是它们仍然在左侧，不确定发生了什么。

3）

尽管我在Button Test和目标中使用了Clear List，但为什么第一个按钮和最后一个按钮分别columns: 2和GridLayout只占据布局的一列他们俩都占据了整行。

[4）

尽管添加了ProgressBar，但仍然看不到，并且不确定为什么不能在TextField中写入。

5）

调试器无错误

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLmltZ3VyLmNvbS90SDJOY1Y0LnBuZyJ9” alt =“混淆布局”>

最新更新和编辑

根据最新评论并提供最新更新。我仍然需要解决几个尚存的疑问：

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属性。非常感谢您指出正确的方向，如果这个问题很简单，对不起。 

很抱歉，如果这个问题很简单，但是我正在查看有关如何在QML中使用按钮，文本，GroupBox和ProgressBar设置GridLayout的官方文档。我正在尝试实现的布局是...

Answer 1

花了我几天的时间，但我达到了我想要的布局，请参见打印屏幕下方：