服务器之家

服务器之家 > 正文

QT QML的元素布局的实现

时间:2021-08-20 12:03     来源/作者:jamescat

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

QT QML的元素布局的实现

这张图片中,有如下问题:

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

代码修改完以后的效果:

QT QML的元素布局的实现

改变宽度试一下:

QT 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

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部