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

Question

抱歉，如果這個問題很簡單，但我正在查看有關如何在QML使用Buttons 、 Text 、 GroupBox和ProgressBar設置GridLayout的官方文檔。 我試圖實現的布局如下：

我的問題是我正在努力實現上面的布局。 我在理解如何在頁面內以正確的方式定位元素時遇到了一些問題。

到目前為止我做了什么：

1）我找到了一個非常有用的例子，我成功復制了它以理解這個概念。

2）我也遇到了這個其他來源，它有幫助，因為它解釋並明確了GridLayout一些功能，但仍然無法完全解決問題。

3）這個來源也有幫助，但不能再轉發了。

4)除了以上幾點，我也一直在研究官方文檔。 官方文檔很有用，但我試圖在頁面中定位的組件仍然沒有正確設置。

編輯

最新的修改推動了我前進，現在布局看起來好多了，接近我想要實現的目標。

我想出了一種以更好的方式使用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看起來還是很奇怪，並沒有根據窗口的寬度進行擴展。 為此，我還查閱了官方文檔，但仍然無法弄清楚原因。

2) Button Test和窗口的上邊距之間仍然沒有空間。

3) GroupBox或RowLayout不擴展窗口的寬度。 為此，我查閱了以下對ColumnLayout有用的來源，但它似乎不適用於其他地方。

我在這個練習中使用的代碼如下，它被修改，你只能復制/粘貼，它會起作用：

主文件

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
            }
        }

    }
}