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

Question

Sorry if this question is simple but I am reviewing the official documentation on how to set up a GridLayout with Buttons , Text , GroupBox and a ProgressBar in QML . The layout I am trying to achieve is the following below:

The problem I have is that I am struggling to achieve the layout above. I am having some problems understanding how to position the elements in the correct way inside the page.

What I have done so far:

1) I found a very useful example which I replicated successfully in order to understand the concept.

2) Also I came across this other source which helped because it explained and made clear some of the functions of the GridLayout but could still not solve completely the problem.

3) This source also helped but could not more forward.

4) In addition to the above points I also have been studying the offcial documentation . The official documentation is useful but still the components I am trying to position in the page are not properly set.

EDITS

The latest modification pushed me forward and now the lay-out it looks much better and close to what I am trying to achieve.

I figured out a way to use GridLayout (only because I still don't have a second choice that I can use with confidence) in a better way. The solution I found was to use a GroupBox for every entry I need, but I have some remaining problems as you can see from the EDITS I posted and I am not sure the cause of that, for example:

1 ) Why the TextField area is on the left while I used GridLayout with 2 columns? It seems that all components are pushed to one column only. I wanted the TextField (and related Text ) to be on the center.

2) The first TextField carries correctly the text in the center. I did the same for the other texts but they are still on the left and am not sure what that is happening.

3) Why the first and the last button, respectively Button Test and Clear List occupy only, again, one column of the lay-out despite I used columns: 2 in the GridLayout and the goal would be that they both occupy the whole row.

4) I still don't see the ProgressBar despite I added it and am not sure why is possible to write in the TextField despite that should not be possible.

5) no errors from the debugger

LATEST UPDATES & EDITS

Below the latest updates according to the latest comments and advise. I still have to solve a couple of remaining doubts:

1) The ProgressBar still looks very strange and does not extend according to the width of the window. For this I also went on the official documentation but still could not figure out why.

2) There is still no space between the Button Test and the top margin of the window.

3) GroupBox or the RowLayout does not extend for the width of the window. For this I consulted the following source which was useful for the ColumnLayout but it does not seem to apply elsewhere.

The code I am using for this exercise is the following below, it is modified and you can only copy/paste and it will work:

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

    }
}

How can I achieve the lay-out above? I have been working hard in the past couple of days to understand how to position the components correctly into the lay-out and studying the anchor property from the documentation. Thank you very much for pointing in the right direction and again, sorry if this question is a simple one.

Answer 1

It took me some days of hard work, but I achieved the lay-out I was looking for, see below the print screen:

The complete working code is below if anyone needs:

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

    }
}