当前位置:   article > 正文

QML布局元素_qml 右对齐

qml 右对齐

目录

一 QML介绍

二 QML的使用场合

三 实例演示

一 元素布局介绍

二 子控件充满父控件

三 基于父控件靠左对齐

四 基于父控件靠右对齐

五 水平居中对齐

六 垂直居中对齐

七   相对于父控件居中

八 相对于水平居中向右偏移20,此属性配合horizontalCenter使用才有效


QML介绍

QML是Qt Quick的缩写,它是一种新型的、面向对象的、跨平台的脚本语言,可以用来描述用户界面或应用程序的交互逻辑。QML可以在Qt应用程序中使用,也可以在其他JavaScript应用程序中使用。

QML使用XML语法来描述应用程序的用户界面,其中包括各种组件、布局、控件和事件处理程序等。这种语言非常易于学习和使用,因为它具有简单的语法、清晰的结构和易于理解的类型系统。此外,QML还支持自定义组件和自定义控件,使开发人员能够根据需要灵活地设计和重构用户界面。

QML可以帮助开发人员快速构建原生桌面应用程序、移动应用程序和Web应用程序等。由于它是Qt框架的一部分,因此可以利用Qt提供的丰富功能和工具,如Qt Creator、Qt Widgets等。因此,使用QML可以大大提高开发效率和应用程序的质量。

二 QML的使用场合

QML是一种用于描述应用程序用户界面的声明式编程语言,主要应用于移动应用程序、桌面应用程序和Web应用程序等领域。以下是QML主要应用场景:

  1. 移动应用程序:QML可以帮助开发人员快速构建原生移动应用程序,如游戏、音乐播放器、地图应用等。由于QML可以将用户界面分解为一个个小的元素,并且可以对这些元素进行美化和自定义,因此非常适合构建移动应用程序。
  2. 桌面应用程序:QML可以用于开发桌面应用程序,如窗口管理器、文本编辑器、数据分析工具等。QML可以将界面分解为各个小的部件,并且可以使用Qt提供的各种组件和工具来构建高效的桌面应用程序。
  3. Web应用程序:QML可以用于开发Web应用程序,如网页浏览器、表单验证器、媒体播放器等。由于QML可以将界面分解为小的元素,并且可以使用JavaScript来操作这些元素,因此非常适合构建Web应用程序。

QML是一种非常灵活和易于使用的编程语言,可以帮助开发人员快速构建高效的用户界面,并且可以在不同的应用程序领域中使用。

三 实例演示

一 元素布局介绍

QML使用anchors(锚)对元素进行布局。anchoring(锚定)是基础元素对象的基本属性,可以被所有的可视化QML元素使用。一个anchors(锚)就像一个协议,并且比几何变化更加强大。Anchors(锚)是相对关系的表达式,你通常需要与其它元素搭配使用。

二 子控件充满父控件

  1. import QtQuick
  2. import QtQuick.Window
  3. Window {
  4. width: 640
  5. height: 480
  6. visible: true
  7. title: qsTr("Hello World")
  8. Rectangle {
  9. width: 200
  10. height: 200
  11. color: "red"
  12. Rectangle {
  13. width: 100
  14. height: 100
  15. //有了锚定anchors属性之后,即便设置长宽也不生效
  16. anchors.fill: parent //填充负控件
  17. //anchors.left: parent.left //基于父控件靠左对齐
  18. //anchors.right: parent.right //基于父控件靠右对齐
  19. //anchors.horizontalCenter: parent.horizontalCenter //水平居中对齐
  20. //anchors.verticalCenter: parent.verticalCenter //垂直居中对齐
  21. //anchors.centerIn: parent //相对于父控件居中
  22. //anchors.horizontalCenterOffset: 20 //相对于水平居中向右偏移20,此属性配合horizontalCenter使用才有效
  23. anchors.margins: 8
  24. }
  25. }
  26. }

三 基于父控件靠左对齐

  1. import QtQuick
  2. import QtQuick.Window
  3. Window {
  4. width: 640
  5. height: 480
  6. visible: true
  7. title: qsTr("Hello World")
  8. Rectangle {
  9. width: 200
  10. height: 200
  11. color: "red"
  12. anchors.centerIn: parent
  13. Rectangle {
  14. width: 100
  15. height: 100
  16. //有了锚定anchors属性之后,即便设置长宽也不生效
  17. //anchors.fill: parent //填充负控件
  18. anchors.left: parent.left //基于父控件靠左对齐
  19. //anchors.right: parent.right //基于父控件靠右对齐
  20. //anchors.horizontalCenter: parent.horizontalCenter //水平居中对齐
  21. //anchors.verticalCenter: parent.verticalCenter //垂直居中对齐
  22. //anchors.centerIn: parent //相对于父控件居中
  23. //anchors.horizontalCenterOffset: 20 //相对于水平居中向右偏移20,此属性配合horizontalCenter使用才有效
  24. anchors.margins: 8
  25. }
  26. }
  27. }

 

四 基于父控件靠右对齐

  1. import QtQuick
  2. import QtQuick.Window
  3. Window {
  4. width: 640
  5. height: 480
  6. visible: true
  7. title: qsTr("Hello World")
  8. Rectangle {
  9. width: 200
  10. height: 200
  11. color: "red"
  12. anchors.centerIn: parent
  13. Rectangle {
  14. width: 100
  15. height: 100
  16. //有了锚定anchors属性之后,即便设置长宽也不生效
  17. //anchors.fill: parent //填充负控件
  18. //anchors.left: parent.left //基于父控件靠左对齐
  19. anchors.right: parent.right //基于父控件靠右对齐
  20. //anchors.horizontalCenter: parent.horizontalCenter //水平居中对齐
  21. //anchors.verticalCenter: parent.verticalCenter //垂直居中对齐
  22. //anchors.centerIn: parent //相对于父控件居中
  23. //anchors.horizontalCenterOffset: 20 //相对于水平居中向右偏移20,此属性配合horizontalCenter使用才有效
  24. anchors.margins: 8
  25. color: "blue"
  26. }
  27. }
  28. }

 

五 水平居中对齐

  1. import QtQuick
  2. import QtQuick.Window
  3. Window {
  4. width: 640
  5. height: 480
  6. visible: true
  7. title: qsTr("Hello World")
  8. Rectangle {
  9. width: 200
  10. height: 200
  11. color: "red"
  12. anchors.centerIn: parent
  13. Rectangle {
  14. width: 100
  15. height: 100
  16. //有了锚定anchors属性之后,即便设置长宽也不生效
  17. //anchors.fill: parent //填充负控件
  18. //anchors.left: parent.left //基于父控件靠左对齐
  19. //anchors.right: parent.right //基于父控件靠右对齐
  20. anchors.horizontalCenter: parent.horizontalCenter //水平居中对齐
  21. //anchors.verticalCenter: parent.verticalCenter //垂直居中对齐
  22. //anchors.centerIn: parent //相对于父控件居中
  23. //anchors.horizontalCenterOffset: 20 //相对于水平居中向右偏移20,此属性配合horizontalCenter使用才有效
  24. anchors.margins: 8
  25. color: "blue"
  26. }
  27. }
  28. }

 

六 垂直居中对齐

  1. import QtQuick
  2. import QtQuick.Window
  3. Window {
  4. width: 640
  5. height: 480
  6. visible: true
  7. title: qsTr("Hello World")
  8. Rectangle {
  9. width: 200
  10. height: 200
  11. color: "red"
  12. anchors.centerIn: parent
  13. Rectangle {
  14. width: 100
  15. height: 100
  16. //有了锚定anchors属性之后,即便设置长宽也不生效
  17. //anchors.fill: parent //填充负控件
  18. //anchors.left: parent.left //基于父控件靠左对齐
  19. //anchors.right: parent.right //基于父控件靠右对齐
  20. //anchors.horizontalCenter: parent.horizontalCenter //水平居中对齐
  21. anchors.verticalCenter: parent.verticalCenter //垂直居中对齐
  22. //anchors.centerIn: parent //相对于父控件居中
  23. //anchors.horizontalCenterOffset: 20 //相对于水平居中向右偏移20,此属性配合horizontalCenter使用才有效
  24. anchors.margins: 8
  25. color: "blue"
  26. }
  27. }
  28. }

七   相对于父控件居中

  1. import QtQuick
  2. import QtQuick.Window
  3. Window {
  4. width: 640
  5. height: 480
  6. visible: true
  7. title: qsTr("Hello World")
  8. Rectangle {
  9. width: 200
  10. height: 200
  11. color: "red"
  12. anchors.centerIn: parent
  13. Rectangle {
  14. width: 100
  15. height: 100
  16. //有了锚定anchors属性之后,即便设置长宽也不生效
  17. //anchors.fill: parent //填充负控件
  18. //anchors.left: parent.left //基于父控件靠左对齐
  19. //anchors.right: parent.right //基于父控件靠右对齐
  20. //anchors.horizontalCenter: parent.horizontalCenter //水平居中对齐
  21. //anchors.verticalCenter: parent.verticalCenter //垂直居中对齐
  22. anchors.centerIn: parent //相对于父控件居中
  23. //anchors.horizontalCenterOffset: 20 //相对于水平居中向右偏移20,此属性配合horizontalCenter使用才有效
  24. anchors.margins: 8
  25. color: "blue"
  26. }
  27. }
  28. }

 

八 相对于水平居中向右偏移20,此属性配合horizontalCenter使用才有效

  1. import QtQuick
  2. import QtQuick.Window
  3. Window {
  4. width: 640
  5. height: 480
  6. visible: true
  7. title: qsTr("Hello World")
  8. Rectangle {
  9. width: 200
  10. height: 200
  11. color: "red"
  12. anchors.centerIn: parent
  13. Rectangle {
  14. width: 100
  15. height: 100
  16. //有了锚定anchors属性之后,即便设置长宽也不生效
  17. //anchors.fill: parent //填充负控件
  18. //anchors.left: parent.left //基于父控件靠左对齐
  19. //anchors.right: parent.right //基于父控件靠右对齐
  20. anchors.horizontalCenter: parent.horizontalCenter //水平居中对齐
  21. //anchors.verticalCenter: parent.verticalCenter //垂直居中对齐
  22. //anchors.centerIn: parent //相对于父控件居中
  23. anchors.horizontalCenterOffset: 20 //相对于水平居中向右偏移20,此属性配合horizontalCenter使用才有效
  24. anchors.margins: 8
  25. color: "blue"
  26. }
  27. }
  28. }

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/117473?site
推荐阅读
相关标签
  

闽ICP备14008679号