Qt中使用qml语法

qml是一种动态解释性语言，一种描述性的脚本语言；
qml会被加到exe可执行文件中，运行时解包到用户目录Appdata下，后缀qmlc。

在Qt Widgets中使用qml

在QT的ui界面使用qml基本方法：
1、qt最低版本：Qt 5.3
2、pro文件加载模块QT += quickwidgets
3、在ui界面添加控件QQuickWidget
4、右键add new选择QT-QT Resoure File，添加资源文件
5、在添加的资源文件右键add new，选择QT-QML file，添加qml文件
6、把qml文件显示到quickWidget：ui->quickWidget->setSource(QUrl::fromLocalFile(":/HomePage.qml"));

新建一个qml工程

QT新建New Project，选择Application-Qt Quick Application，即可新建一个qml项目，自动生成pro文件，main.cpp文件，Resource资源文件main.qml
main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);//设置高dpi播放
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;//qml引擎类，加载引擎
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;
    return app.exec();
}

main.qml，qml基本语法，设置控件宽高，按钮显示文字图片，按钮槽函数，anchors锚布局，矩形框，圆形按钮，单选框，延时按钮，复选框，文本框，标签等。

import QtQuick 2.12//引入模块，后面跟版本号
import QtQuick.Controls 2.5
import QtQuick 2.12
import QtQuick.Layouts 1.12

ApplicationWindow {
    id:window
    visible: true
    width: 640
    height: 480
    title: qsTr("Tabs")

    //圆形按钮,直接继承于button
    RoundButton{
        x:550
        y:100
        text:"\u2713"
        radius: 10//弧度半径，类似给正方形加圆角的效果
    }

    //单选框
    ColumnLayout
    {
        x:400
        y:100
        RadioButton{
            id:first
            text: qsTr("firstRdBtn")
        }
        RadioButton{
            id:second
            text: qsTr("secondRdBtn")
        }
    }
    //延时按钮，按下不动到一定时间，按钮会被选中
    DelayButton
    {
        x:300
        y:100
        text: "delayBtn"
//        onProgressChanged: console.log(progress)//进度状态改变
        delay: 3000//延时时间
        onClicked: console.log("onClicked")//响应点击事件
        onCheckedChanged: console.log(checked)//按钮选中状态改变
    }

    //复选框
    ColumnLayout
    {
        CheckBox
        {
            checked: true
            text: qsTr("first")
            onClicked: {
                console.log(checked)
            }
        }
        CheckBox
        {
            text: qsTr("second")
        }
    }
    //文本框
    TextField
    {
        x:300
        id:textField
        text: "abcd"
        onTextChanged://文本框内容改变信号，读取文本内容
        {
            console.log(text)
        }
    }

    //标签
    Label
    {
        x:430
        width: 100
        height: 40
        text: qsTr("wenben")
        background: Rectangle{//继承于Item的类都可以
            color: "gray"
        }
        horizontalAlignment: Text.AlignHCenter//文本框内容水平居中
        verticalAlignment: Text.AlignVCenter//文本框内容垂直居中
        font.bold: true//字体加粗
        font.pixelSize: 14//字体大小
    }

    //矩形框
    Rectangle
    {
        x:200
        y:300
        width: 100
        height: 100
        color: "red"//填充颜色
        border.color: "black"//边框颜色
        border.width: 5//边框宽度
        radius: 20//设置圆角，如果是宽度的一半则是一个圆形
        //设置渐变色，起点红色，到0.33渐变成黄色，再到1渐变成绿色
        gradient: Gradient {
            GradientStop { position: 0.0; color: "red" }
            GradientStop { position: 0.33; color: "yellow" }
            GradientStop { position: 1.0; color: "green" }
        }
    }

    property int ii: 123//定义一个变量，:后面是初始值
    property string str: "12"

    function btnDown()//定义一个函数
    {
        console.log("double clicked")
        console.log(str === "12")//===判断类型和值全部相等，此时返回true，str===12则返回false，==只判断值是否相等，12和"12"都返回true
    }

    Button
    {
        id:button3
        text: qsTr("按钮3")
        anchors.horizontalCenter: button1.horizontalCenter//设置两个按钮居中对齐
        anchors.horizontalCenterOffset: 100//设置对齐后的偏移量
    }

    Button
    {
        id:button2
        text: qsTr("按钮")//qsTr，支持使用qt翻译家
//        anchors.fill: parent//填充父对象
//        anchors.centerIn: parent//在父对象居中
        anchors.top: button1.bottom//顶部对齐button1的底部
        anchors.left: button1.left//左部对齐button1的左部
        anchors.topMargin: 10//设置顶部边距
    }

    Button
    {
        id:button1
        text: qsTr("112")
//        icon.source: "./images/bc1.png"
        x:100
        y:100
        onClicked: {//槽函数，on加上信号，信号的首字母大写
            console.log(123456)
            console.log(ii)
        }

        //按钮显示为图片
        background: Image {

                source:"qrc:/images/bc_2.gif"
            }
        onDoubleClicked: window.btnDown()//信号响应，可直接跟一个函数，前面的window.可以不写
    }
}

运行效果图