QT QML的元素布局的实现

本文介绍QT QML跨平台移动APP开发中的元素布局的相关问题，先看一张图，我们来分析一下其中的问题：

这张图片中，有如下问题：

整体的布局没有居中显示
班级名称：
没有和 请输入班级名称输入框垂直对齐
和输入框的距离太远
班主任的提示也一样
最后的Button一行，需求要求右对齐，在QML的程序中没有实现

代码修改完以后的效果：

改变宽度试一下：

原代码说明：

main.qml

1. import QtQuick 2.12
2. import QtQuick.Window 2.12
3.  
4. Window {
5. visible: true
6. width: 640
7. height: 480
8. title: qsTr("QML 元素布局")
9.  
10. InputPage{
11. // 充满父类
12. anchors.fill: parent
13. // 设置margins
14. anchors.margins: 10
15. }
16. }

InputPage.qml

1. import QtQuick 2.0
2. import QtQuick.Controls 2.12
3.  
4. Page {
5. // 定义参数，每行的高度
6. property int rowHeight: 40
7. // 定义参数，每行中，每列的间距
8. property int rowSpacing: 8
9. // 定义一列
10. Column{
11. id: column
12. // 充满父类Page类
13. anchors.fill: parent
14. // 定义Column中，每行Row的间距
15. spacing: 10
16. Row{
17. // 宽度去Page的0.8
18. width: parent.width * 0.8
19. height: rowHeight
20. spacing: rowSpacing
21. // Row水平居中显示
22. anchors.horizontalCenter: parent.horizontalCenter
23.  
24. Label{
25. text: "班级名称"
26. // 定义垂直居中显示
27. verticalAlignment: className.verticalAlignment
28. // 显示字符，水平靠右显示
29. horizontalAlignment: Text.AlignRight
30.  
31. // 设置宽度，Row的宽度的0.3
32. width: parent.width * 0.3
33. height: parent.height
34.  
35. }
36.  
37. TextField{
38. id: className
39. placeholderText: "请输入班级名称"
40. // 设置宽度，Row的宽度的0.60
41. width: parent.width * 0.60
42. height: parent.height
43. }
44. }
45.  
46. // 同上一行代码
47. Row{
48. width: parent.width * 0.8
49. height: rowHeight
50. spacing: rowSpacing
51. anchors.horizontalCenter: parent.horizontalCenter
52.  
53. Label{
54. text: "班主任"
55. verticalAlignment: teacherInChargeClass.verticalAlignment
56. horizontalAlignment: Text.AlignRight
57.  
58. width: parent.width * 0.3
59. height: parent.height
60.  
61. }
62.  
63. TextField{
64. id: teacherInChargeClass
65. placeholderText: "请输入班主任姓名"
66. width: parent.width * 0.6
67. height: parent.height
68. }
69. }
70.  
71. Row{
72. width: parent.width * 0.8
73. height: rowHeight
74. spacing: rowSpacing
75. anchors.horizontalCenter: parent.horizontalCenter
76.  
77. // 设置Button一行的左侧的充满宽度
78. Label{
79. text: ""
80. // 宽度说明
81. // 上述两行（班级名称，班主任）的总宽度是id=column的宽度的0.9倍
82. // 三个Button的宽度 = b1.width*3
83. // 三个Button的宽度，其中间的间隔有两个间隔宽度
84. // 所以本行的宽度和上两行的宽度是一致的，这样就保证了button右对齐的
85. width: parent.width * 0.9 - b1.width*3 - rowSpacing*2
86. height: parent.height
87. }
88.  
89. Button{
90. id: b1
91. text: "新增"
92. width: parent.width * 0.15
93. height: parent.height
94. }
95.  
96. Button{
97. id: b2
98. text: "保存"
99. width: parent.width * 0.15
100. height: parent.height
101. }
102.  
103. Button{
104. id: b3
105. text: "放弃"
106. width: parent.width * 0.15
107. height: parent.height
108. }
109. }
110. }
111. }

参考课程 《QT QML跨平台移动APP编程》

原文链接：https://blog.csdn.net/jamescat/article/details/104517910