How to set a basic GridLayout with Buttons, GroupBox, Text and ProgressBar in QML
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.
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
}
}
}
}
- pass two column values in a table as parameter in KDB function
- What is the explicit promise construction antipattern and how do I avoid it?
- Return value from list of list when criteria met in KDB
- Node.js recursive calls with q framework for multiple GET requests
- Convert a column of dictionary datatype to table in kdb
- Aren't promises just callbacks?
- Resolve promises one after another (i.e. in sequence)?
- kdb+/q When to actually reload the hdb?
- KDB Update dictionary column from a table
- How to check if an object is a Promise?
- Restify.js (Connect/Express) middleware ignoring call to next() within promise callback
- Automate the process of data cleaning and saving tables into CSV
- How to write KDB query output to a text file
- Kdb+ keyed table syntax in tick.q
- NodeJS My SQL query with Chain promise
- How to get resolved value/rejected error in finally block?
- Concat string with number in kdb+ q
- How does Angular $q.when work?
- Open window inside promise
- How to use .finally() without .then()?
- Limit Q promise concurrency in Node js
- AngularJS Promises, $q, defer
- Are there still reasons to use promise libraries like Q or BlueBird now that we have ES6 promises?
- MongoDB indexing , please explain difference between 1 and -1
- Serialize a list of js promises call
- Angular Js : '$q.defer is not a function' error
- Remove rows containing null values efficiently
- Select time windows across multiple days from datetime column
- Function to Convert decimals to percentage in KDB
- update where symbol length less than 3 characters KDB+/Q