QML布局元素

code_shenbing

已于 2023-05-13 12:01:23 修改

阅读量807

点赞数

CC 4.0 BY-SA版权

分类专栏： QML Qt学习程序开发文章标签： qt c++ 前端

于 2023-04-25 13:45:12 首次发布

本文链接：https://blog.youkuaiyun.com/XiaoWang_csdn/article/details/130362777

QML 同时被 3 个专栏收录

42 篇文章

订阅专栏

Qt学习

40 篇文章

订阅专栏

程序开发

36 篇文章

订阅专栏

本文介绍了QML作为QtQuick的声明式脚本语言，用于创建用户界面。QML适用于移动、桌面和Web应用的开发，提供了灵活的元素布局方式，如填充、靠左对齐、靠右对齐、水平和垂直居中等，并通过实例演示了如何使用这些布局策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

八相对于水平居中向右偏移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主要应用场景：

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

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

三实例演示

一元素布局介绍

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

二子控件充满父控件

import QtQuick
import QtQuick.Window

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        width: 200
        height: 200
        color: "red"
            Rectangle {
                width: 100
                height: 100
                //有了锚定anchors属性之后，即便设置长宽也不生效
                anchors.fill: parent  //填充负控件
                //anchors.left: parent.left //基于父控件靠左对齐
                //anchors.right: parent.right  //基于父控件靠右对齐
                //anchors.horizontalCenter: parent.horizontalCenter //水平居中对齐
                //anchors.verticalCenter: parent.verticalCenter //垂直居中对齐
                //anchors.centerIn: parent  //相对于父控件居中
                //anchors.horizontalCenterOffset: 20 //相对于水平居中向右偏移20，此属性配合horizontalCenter使用才有效
                anchors.margins: 8

            }
        }
}

三基于父控件靠左对齐

import QtQuick
import QtQuick.Window

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        width: 200
        height: 200
        color: "red"
        anchors.centerIn: parent
            Rectangle {
                width: 100
                height: 100
                //有了锚定anchors属性之后，即便设置长宽也不生效
                //anchors.fill: parent  //填充负控件
                anchors.left: parent.left //基于父控件靠左对齐
                //anchors.right: parent.right  //基于父控件靠右对齐
                //anchors.horizontalCenter: parent.horizontalCenter //水平居中对齐
                //anchors.verticalCenter: parent.verticalCenter //垂直居中对齐
                //anchors.centerIn: parent  //相对于父控件居中
                //anchors.horizontalCenterOffset: 20 //相对于水平居中向右偏移20，此属性配合horizontalCenter使用才有效
                anchors.margins: 8

            }
        }
}

四基于父控件靠右对齐

import QtQuick
import QtQuick.Window

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        width: 200
        height: 200
        color: "red"
        anchors.centerIn: parent
            Rectangle {
                width: 100
                height: 100
                //有了锚定anchors属性之后，即便设置长宽也不生效
                //anchors.fill: parent  //填充负控件
                //anchors.left: parent.left //基于父控件靠左对齐
                anchors.right: parent.right  //基于父控件靠右对齐
                //anchors.horizontalCenter: parent.horizontalCenter //水平居中对齐
                //anchors.verticalCenter: parent.verticalCenter //垂直居中对齐
                //anchors.centerIn: parent  //相对于父控件居中
                //anchors.horizontalCenterOffset: 20 //相对于水平居中向右偏移20，此属性配合horizontalCenter使用才有效
                anchors.margins: 8
                color: "blue"

            }
        }
}

五水平居中对齐

import QtQuick
import QtQuick.Window

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        width: 200
        height: 200
        color: "red"
        anchors.centerIn: parent
            Rectangle {
                width: 100
                height: 100
                //有了锚定anchors属性之后，即便设置长宽也不生效
                //anchors.fill: parent  //填充负控件
                //anchors.left: parent.left //基于父控件靠左对齐
                //anchors.right: parent.right  //基于父控件靠右对齐
                anchors.horizontalCenter: parent.horizontalCenter //水平居中对齐
                //anchors.verticalCenter: parent.verticalCenter //垂直居中对齐
                //anchors.centerIn: parent  //相对于父控件居中
                //anchors.horizontalCenterOffset: 20 //相对于水平居中向右偏移20，此属性配合horizontalCenter使用才有效
                anchors.margins: 8
                color: "blue"

            }
        }
}

六垂直居中对齐

import QtQuick
import QtQuick.Window

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        width: 200
        height: 200
        color: "red"
        anchors.centerIn: parent
            Rectangle {
                width: 100
                height: 100
                //有了锚定anchors属性之后，即便设置长宽也不生效
                //anchors.fill: parent  //填充负控件
                //anchors.left: parent.left //基于父控件靠左对齐
                //anchors.right: parent.right  //基于父控件靠右对齐
                //anchors.horizontalCenter: parent.horizontalCenter //水平居中对齐
                anchors.verticalCenter: parent.verticalCenter //垂直居中对齐
                //anchors.centerIn: parent  //相对于父控件居中
                //anchors.horizontalCenterOffset: 20 //相对于水平居中向右偏移20，此属性配合horizontalCenter使用才有效
                anchors.margins: 8
                color: "blue"

            }
        }
}

七相对于父控件居中

import QtQuick
import QtQuick.Window

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        width: 200
        height: 200
        color: "red"
        anchors.centerIn: parent
            Rectangle {
                width: 100
                height: 100
                //有了锚定anchors属性之后，即便设置长宽也不生效
                //anchors.fill: parent  //填充负控件
                //anchors.left: parent.left //基于父控件靠左对齐
                //anchors.right: parent.right  //基于父控件靠右对齐
                //anchors.horizontalCenter: parent.horizontalCenter //水平居中对齐
                //anchors.verticalCenter: parent.verticalCenter //垂直居中对齐
                anchors.centerIn: parent  //相对于父控件居中
                //anchors.horizontalCenterOffset: 20 //相对于水平居中向右偏移20，此属性配合horizontalCenter使用才有效
                anchors.margins: 8
                color: "blue"

            }
        }
}

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

import QtQuick
import QtQuick.Window

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        width: 200
        height: 200
        color: "red"
        anchors.centerIn: parent
            Rectangle {
                width: 100
                height: 100
                //有了锚定anchors属性之后，即便设置长宽也不生效
                //anchors.fill: parent  //填充负控件
                //anchors.left: parent.left //基于父控件靠左对齐
                //anchors.right: parent.right  //基于父控件靠右对齐
                anchors.horizontalCenter: parent.horizontalCenter //水平居中对齐
                //anchors.verticalCenter: parent.verticalCenter //垂直居中对齐
                //anchors.centerIn: parent  //相对于父控件居中
                anchors.horizontalCenterOffset: 20 //相对于水平居中向右偏移20，此属性配合horizontalCenter使用才有效
                anchors.margins: 8
                color: "blue"

            }
        }
}