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

Question

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

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

到目前为止我做了什么：

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

2) 我也遇到了这很有帮助，因为它解释并明确了 GridLayout 的一些功能，但仍然无法解决完全是问题。

3)这个也有帮助，但不能更进一步。

4) 除了以上几点我还一直在研究offcial documentation。官方文档很有用，但我试图在页面中定位的组件仍然没有正确设置。

编辑

最新的修改推动了我前进，现在它的布局看起来好多了并且接近我想要实现的目标。

我想出了一个更好的方法来使用GridLayout（只是因为我仍然没有可以放心使用的第二选择）。我找到的解决方案是对我需要的每个条目使用 GroupBox，但是我还有一些遗留问题，正如您从我发布的 EDITS 中看到的那样，我不确定原因，例如：

1) 为什么 TextField 区域在左边，而我使用 GridLayout 2 列？似乎所有组件都只被推到一列。我希望 TextField（和相关的 Text）位于中心。

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

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

4) 尽管我添加了 ProgressBar 我仍然没有看到它，并且我不确定为什么可以在 TextField 中写入尽管那应该是不可能的。

5)调试器没有错误

最新更新和编辑

下面根据最新评论更新最新消息，指教。我还需要解决几个遗留的疑惑：

1) ProgressBar看起来还是很奇怪，没有按照window的宽度延伸。为此我也上了official documentation但还是想不通为什么。

2)Button Test和window的上边距之间仍然没有space。

3) GroupBox 或 RowLayout 不延伸 window 的宽度。为此，我参考了以下，它对 ColumnLayout 很有用，但它似乎不适用于其他地方。

我在这个练习中使用的代码如下，它被修改了，你只能 copy/paste 它会起作用：

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

Answer 1

经过几天的努力，我实现了我正在寻找的布局，见下面的打印屏幕：

如果有人需要，完整的工作代码如下：

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 520
    title: qsTr("GridLayout Example")
    id: testwindow
    ColumnLayout {
        anchors.topMargin: 350 // margin from top of the page
        anchors.fill: parent
        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.fillWidth: true
            spacing: 10
            GridLayout {
                width: parent.width
                columns: 1
                RowLayout {
                    spacing: 200
                    Layout.fillWidth: true
                    Layout.fillHeight: false
                    Label {
                        id: textField
                        text: "Connection:"
                        font.pointSize: 15
                        Layout.fillWidth: true
                    }
                    Text {
                        id: connected
                        text: "Not-Connected"
                        color: "red"
                        font.pointSize: 15
                        horizontalAlignment: Text.AlignRight
                        Layout.fillWidth: true
                    }
                }
            }
        }
        GroupBox {
            id: box2
            title: "Log-In Info"
            font.pointSize: 20
            Layout.fillWidth: true

            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
                        Layout.fillWidth: true
                    }
                    Text {
                        id: logInStatus
                        text: "Not Logged-In"
                        color: "red"
                        font.pointSize: 15
                        horizontalAlignment: Text.AlignRight
                        Layout.fillWidth: true
                    }
                }
            }
        }
        GroupBox {
            id: box3
            title: "Log-In ID"
            font.pointSize: 20
            Layout.fillWidth: true

            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
                        Layout.fillWidth: true
                    }
                    Text {
                        id: loggedInAs
                        text: "Name"
                        color: "red"
                        font.pointSize: 15
                        horizontalAlignment: Text.AlignRight
                        Layout.fillWidth: true
                    }
                }
            }
        }
        GroupBox {
            id: box4
            title: "Email"
            font.pointSize: 20
            Layout.fillWidth: true

            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
                        Layout.fillWidth: true
                    }
                    Text {
                        id: notSentEmail
                        text: "Not Sent"
                        color: "red"
                        font.pointSize: 15
                        horizontalAlignment: Text.AlignRight
                        Layout.fillWidth: true
                    }
                }
            }
        }
        Button {
            id: buttonClearList
            text: "Clear List"
            Layout.fillWidth: true
            font.pointSize: 20
        }
        ProgressBar {
            id: control

            Layout.fillWidth: true
            value: 0
            height: 20

            clip: true
            background: Rectangle {
                implicitWidth: 200
                implicitHeight: 20 // it was 6
                border.color: "#999999"
                radius: 5
            }
            contentItem: Item {
                implicitWidth: 200
                implicitHeight: 20 // it was 4

                Rectangle {
                    id: bar
                    width: control.visualPosition * parent.width
                    height: parent.height
                    radius: 5
                }
                LinearGradient {
                    anchors.fill: bar
                    start: Qt.point(0, 0)
                    end: Qt.point(bar.width, 0)
                    source: bar
                    gradient: Gradient {
                        GradientStop { position: 0.0; color: "#17a81a" }
                        GradientStop { id: grad; position: 0.5; color: Qt.lighter("#17a81a", 2) }
                        GradientStop { position: 1.0; color: "#17a81a" }
                    }
                    PropertyAnimation {
                        target: grad
                        property: "position"
                        from: 0.1
                        to: 0.9
                        duration: 1000
                        running: true
                        loops: Animation.Infinite
                    }
                }
                LinearGradient {
                    anchors.fill: bar
                    start: Qt.point(0, 0)
                    end: Qt.point(0, bar.height)
                    source: bar
                    gradient: Gradient {
                        GradientStop { position: 0.0; color: Qt.rgba(0,0,0,0) }
                        GradientStop { position: 0.5; color: Qt.rgba(1,1,1,0.3) }
                        GradientStop { position: 1.0; color: Qt.rgba(0,0,0,0.05) }
                    }
                }
            }
            PropertyAnimation {
                target: control
                property: "value"
                from: 0
                to: 1
                duration: 5000
                running: true
                loops: Animation.Infinite
            }
        }

    }
}

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

How to set a basic GridLayout with Buttons, GroupBox, Text and ProgressBar in QML

qt

label

grid-layout

qml

qt5