devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

QML布局元素_qml 右对齐

作者：从前慢现在也慢 | 2024-02-20 00:18:04

赞

踩

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

三 基于父控件靠左对齐

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

 

四 基于父控件靠右对齐

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

 

五 水平居中对齐

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

 

六 垂直居中对齐

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

七   相对于父控件居中

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

 

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

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

 

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

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号