于项目的原因，接触到qml语言。经过一段时间的熟悉和使用，发现只要有基本的开发能力，那么快速掌握qml的入门知识，并不难。

本文首先将简单介绍qml, 紧接着引入第一个入门例子hello world。然后将采用图文并茂的示例来介绍qml的界面布局、监听事件、简单动画效果、自定义属性、自定组件等。最后再总结概述。

一、qml简介

qml是一种描述性的脚本语言，语法类似css, 可以在脚本中创建图像对象，并支持各种特效，并且文件是以.qml结尾。

qml文档描述 了一个对象树。各个元素可以以嵌套的方式来组合成复杂的图形功能。q ml是Qt quick的核心组件之一。

qml是运行时解释，不需要重新编译。

二、第一个例子

使用Qt Creator来创建空的qml工程，注意本文所有的示例均使用了Qt5.9的版本。

创建工程完成之后，pro文件添加使用quick组件，并且配置使用了C++11

main.cpp的内容如下所示，这里可以暂时不需要了解其内容含义。只需要知道 这是程序启动的入口。

然后我们来介绍下main.qml的内容含义，import需要使用的组件，Window表示的是一个窗体，内部内容使用大括号包含起来，visible设置窗体的可见性，width表示窗体的宽度，height表示窗体的高度，title设置窗体的标题。

运行后的效果图，是一个标题为Hello World的空窗体。

三、界面布局

qml通过anchor锚点来进行界面的布局， 首先看下效果图，一个黑色背景窗体，四边有四个红色边框的白色矩形，中间一个红色边框的白色正方形。

qml文件的实现如下，关键字Rectangle表示一个矩形组件，Rectangle可以嵌套使用。接下来说明顶部白色矩形的实现，定义id为topBar, 背景色color是白色，边框border.width的宽度是2，边框颜色border.color是红色。anchors.left: leftBar.right表示顶部矩形的左侧位于左侧边框的右侧。

四、函数功能

qml支持函数功能，通过两个不同时刻窗口对比来查看效果，左侧窗口是当窗体宽度小于320像素的效果，右侧窗口是当窗体宽度小于640像素的效果。

qml文件实现中，Rectangle包含了Text文本对象，Text内部定义了函数getColor，当Rectangle的宽度小于320时，返回red, 当宽度小于等于640时，返回black, 其他情况返回blue。

五、动画效果

qml支持动画效果，首先看下使用Behavior的效果图，窗体分为上下两个矩形，当鼠标按下上方区域不动的时候，下方矩形中的正方形就会从左上角移动到右下角，当鼠标释放的时候，正方形又会从右下角回到左上角。

qml文件中，上方矩形实现鼠标按下和释放的监控事件，并且接受事件中，修改下方矩形的x和y的坐标值。下方矩形实现上图所示的动画效果，easing.type指定的是一种缓和曲线。

六、自定义属性

qml支持自定义属性，调用自定义属性值显示文本信息

qml文件中，自定义属性以关键字property开始，然后是说明类型，最后是属性的名称和值。

七、自定义组件

qml没有提供直接的圆形组件，所以，这里自定义圆形组件。

实现圆形组件Circle.qml, 定义了整型属性d, 可以由外部传入，radius表示半径。

然后看下main.qml如何调用呢，其使用方法与通用组件的方式是一样的，如下所示自定义圆形组件Circle的使用。

八、Column定位器

qml提供的定位器的功能，比如Row、Column、Grid、Flow。下面就看下Column的使用效果。

首先自定义组件Article.qml, 该组件接受两个属性值，并且分别显示到两个Text对象上。

main.qml中使用Column定位器来组织显示Article对象。

九、注册单例

qml还支持注册C++的单例模型，然后在qml中直接调用，实现了与C++代码的通信。

实现实现用于事件上报的单例模型，具体实现代码如下所示。

然后在main.cpp中将EventSender注册到qml中, 后续qml文件才能调用

最后看下qml如何调用上面注册成功的单例，很简单，只要import EventSender, 然后就可以调用EventSender的函数。

十、总结

本文通过一个简单的例子开始qml的学习，然后结合示例分别介绍说明了锚布局、函数功能、动画效果、自定义属性、自定义组件、定位器、注册单例的使用方法。这些基本的例子可以为后续深入的学习打下基础，同时也分享出来给大家参考。

T是c++中一个较为成熟的第三方库，开发者可以通过QT开发pc软件或手机软件。而QML是QT参考了JavaScript的语法和特性，最新推出的开发方式。

大家好，我是老赵，本文介绍下QML的更多的布局方式。

实际开发中，需求是千变万化的。

1、对于那些固定尺寸的控件，可以通过设置x，y或width、height的像素值来控制。

2、对于那些相对尺寸的控件，可以设置x，y或width、height，成为一个函数表达式，来控制他们的位置和大小。

QML当中，是能获取到当前程序的屏幕宽度，也能获取页面里各个元素的宽度（可以通过parent或id），通过这些参数，计算出一些特定的位置点，让整个布局，可以自动适配当前屏幕宽度，自动布局。

例子：4.1

import QtQuick 2.13
import QtQuick.Window 2.13

Window {

    visible: true
    width: 640
    height: 480
    title: qsTr("布局演示:例子4.1")

    Rectangle{
        id:rec1
        x:parent.width/3
        y:parent.height/3

        width: parent.width/4
        height: parent.width/4

        color:"grey"

   			 }

    Rectangle{
        x:rec1.width/4+30
        y:rec1.height/5-10

        width:parent.width-rec1.width*2
        height: rec1.height - parent.height/5

        color:"green"

    }
}

注意例子里的parent，是指上一级元素，如果上面没其他元素，只有程序本身，那就是指程序的window的宽度和高度。

3、有时候，页面的宽度是固定的，但是里面每个元素的大小都不确定，同时我们又希望这些元素都能顺序排列，就涉及到今天主要讲的：Row、Column、Grid、Flow。未来还会有RowLayout，ColumnLayout等等更高级的模块，不过差别不是很大，初学者把刚才提到的4个掌握清楚就足够了。

Row：行容器。

• Row是一个水平布局容器，按照水平方向排列内部的子元素。
• 这些子元素会依次水平排列，如果空间不够，会自动换行到下一行。
• 可以设置spacing属性来控制每个子元素之间的间距。
• Row中的子元素可以设置Layout.alignment属性来控制在垂直方向上的对齐方式。

Column：列容器。其他都和Row一样。

Grid：行列容器。参数要稍微复杂点，不过本质上和Row和Column是一样的。

如果你对Excxl（微软的办公三件套之一。Word，Excel，PowerPoint）熟悉，就很容易理解这3个东西了。

Flow：简单理解为自由度更高，有更多参数的Grid就行了。

• Flow是一个自动流式布局容器，用于按照水平和垂直方向自动排列子元素。
• 子元素会根据可用空间自动排列，如果空间不够，会自动换行到下一行。
• 可以设置layoutDirection属性来指定子元素的排列方向，可以是从左到右、从右到左、从上到下、从下到上。
• Flow中的子元素可以设置Layout.alignment属性来控制对齐方式。

例子4.2

import QtQuick 2.13
import QtQuick.Window 2.13

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("布局演示:例子4.2")

    Row{//行容器
        anchors.top: parent       //居上
        anchors.left: parent.left //居左

        spacing: 10  //间隔10像素

        Rectangle{
            width: 100
            height: 100
            color: "red"
        }
        Rectangle{
            width: 100
            height: 100
            color: "red"
        }
        Rectangle{
            width: 100
            height: 100
            color: "red"
        }
    }
    Column{//列容器
        anchors.bottom: parent.bottom//居下
        anchors.right: parent.right //居右

        spacing: 10  //间隔10像素

        Rectangle{
            width: 100
            height: 100
            color: "yellow"
        }
        Rectangle{
            width: 100
            height: 100
            color: "yellow"
        }
        Rectangle{
            width: 100
            height: 100
            color: "yellow"
        }

    }
    Grid{//行列容器
        anchors.bottom: parent.bottom //居下
        anchors.left: parent.left  //居左

        rows: 2      //共2行
        columns: 2   //共2列
        rowSpacing: 10  //行间隔10像素
        columnSpacing: 10  //列间隔10像素

        Rectangle{
            width: 100
            height: 100
            color: "purple"
        }
        Rectangle{
            width: 100
            height: 100
            color: "purple"
        }
        Rectangle{
            width: 100
            height: 100
            color: "purple"
        }

        Rectangle{
            width: 100
            height: 100
            color: "purple"
        }
    }

    Flow{//流式容器

        anchors.centerIn: parent  //垂直和水平都居中

        spacing: 10 //间隔10像素

        Rectangle{
            width: 100
            height: 100
            color: "green"
        }
        Rectangle{
            width: 100
            height: 100
            color: "green"
        }
        Rectangle{
            width: 100
            height: 100
            color: "green"
        }
        Rectangle{
            width: 100
            height: 100
            color: "green"
        }

    }

}

运行结果

好，本文就到这里，下次再见

ML (Qt Meta Language，Qt元语言）是一个用来描述应用程序界面的声明式脚本语言，文件格式以.qml结尾。QML具有良好的易读性，它以可视化组件及其交互和相互关联的方式来描述界面，使组件能在动态行为中互相连接，并支持在一个用户界面上很方便地复用和定制组件。

QML是一种陈述性语言，用来描述一个程序的用户界面：是什么样子以及它如何表现。在QML，一个用户界面被指定为具有属性的对象树。这使得Qt更加便于很少或没有编程经验的人使用。

Qt Quick是Qt为QML提供的一套类库，由QML标准类型和功能组成，包括可视化类型、交互类型、动画类型、模型和视图、粒子系统和渲染效果等，在编程时只需要一条import语句,程序员就能够访问这些功能。使用Qt Quick,设计和开发人员能很容易地用QML构建出高品质、流畅的UI界面，从而开发出具有视觉吸引力的应用程序。

QML自Qt 4.7引入。Qt 5.14.2支持Qt Quick 2.12。目前，QML已经同C++一起并列成为Qt界面开发的首选编程语言。

QML是通过Qt QML引擎在程序运行时解析并运行的。Qt更高性能的编译器通道意味着使用QML编写的程序启动时及运行时速度更快、效率更高。QML新、旧编译器通道如下图。

QML语法格式非常像CSS，但又支持javascript形式的编程控制。Qt Designer可以设计出ui界面文件，但是不支持和Qt原生C++代码的交互。Qt Script可以和Qt原生代码进行交互，但是有一个缺点，如果要在脚本中创建一个继承于QObject的图形对象非常不方便，只能在Qt代码中创建图形对象，然后从Qt Script中进行访问。而QML可以在脚本里创建图形对象，并且支持各种图形特效，以及状态机等，同时又能跟Qt写的C++代码进行方便的交互，使用起来非常方便。

————————————————

觉得有用的话请关注点赞，谢谢您的支持！

对于本系列文章相关示例完整代码有需要的朋友，可关注并在评论区留言！