[英]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
.抱歉,如果这个问题很简单,但我正在查看有关如何在
QML
使用Buttons
、 Text
、 GroupBox
和ProgressBar
设置GridLayout
的官方文档。 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. 1)我找到了一个非常有用的例子,我成功复制了它以理解这个概念。
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. 2)我也遇到了这个其他来源,它有帮助,因为它解释并明确了
GridLayout
一些功能,但仍然无法完全解决问题。
3) This source also helped but could not more forward. 3)这个来源也有帮助,但不能再转发了。
4) In addition to the above points I also have been studying the offcial documentation . 4)除了以上几点,我也一直在研究官方文档。 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.我想出了一种以更好的方式使用
GridLayout
(只是因为我仍然没有可以放心使用的第二个选择)。 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:我找到的解决方案是对我需要的每个条目使用
GroupBox
,但是正如您从我发布的EDITS 中看到的那样,我还有一些问题,我不确定其原因,例如:
1 ) Why the TextField
area is on the left while I used GridLayout
with 2 columns? 1 ) 为什么
TextField
区域在左侧,而我使用GridLayout
和 2 列? It seems that all components are pushed to one column only.似乎所有组件都只推送到一列。 I wanted the
TextField
(and related Text
) to be on the center.我希望
TextField
(和相关的Text
)位于中心。
2) The first TextField
carries correctly the text in the center. 2)第一个
TextField
正确地承载了中心的文本。 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. 3)为什么第一个和最后一个按钮,分别是
Button Test
和Clear List
仅占据布局的一列,尽管我在GridLayout
使用了columns: 2
并且目标是它们都占据整行。
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. 4)尽管我添加了它,但我仍然没有看到
ProgressBar
并且我不确定为什么可以在TextField
写入,尽管这应该是不可能的。
5) no errors from the debugger 5)调试器没有错误
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. 1)
ProgressBar
看起来还是很奇怪,并没有根据窗口的宽度进行扩展。 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. 2)
Button Test
和窗口的上边距之间仍然没有空间。
3) GroupBox
or the RowLayout
does not extend for the width of the window. 3)
GroupBox
或RowLayout
不扩展窗口的宽度。 For this I consulted the following source which was useful for the ColumnLayout
but it does not seem to apply elsewhere.为此,我查阅了以下对
ColumnLayout
有用的来源,但它似乎不适用于其他地方。
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.在过去的几天里,我一直在努力了解如何将组件正确地放置到布局中并从文档中研究
anchor
属性。 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
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.