qml语法

QML是⼀种描述⽤户界⾯的声明式语⾔。它将⽤户界⾯分解成⼀些更⼩的元
素，这些元素能够结合成⼀个组件。 QML语⾔描述了⽤户界⾯元素的形状和
⾏为。⽤户界⾯能够使⽤JavaScript来提供修饰，或者增加更加复杂的逻
辑。从这个⾓度来看它遵循HTML-JavaScript模式，但QML是被设计⽤来描
述⽤户界⾯的，⽽不是⽂本⽂档。

从QML元素的层次结构来理解是最简单的学习⽅式。⼦元素从⽗元素上继承
了坐标系统，它的x,y坐标总是相对应于它的⽗元素坐标系统。

//导入指定模块
import QtQuick 2.0

//元素类型-Rectangle
Rectangle {
    //唯一id，相当于人名，通过id进行访问
    id: rect
    //属性-宽度
    width: 640
    //属性-高度
    height: 480
    //属性-颜色
    color: "gray"
}

基础元素

基础元素对象（ Item Element）

Item（基础元素对象）是所有可视化元素的基础对象，所有其它的可视化元
素都继承⾃Item。它⾃⾝不会有任何绘制操作，但是定义了所有可视化元素
共有的属性,就是说Item有的这些属性，其他元素也有

0_1526260287072_4e4a20f8-2b80-4f3d-9b20-428ef3846d55-image.png

矩形框元素（ Rectangle Element）

Rectangle {
        id: rect2
        //x坐标
        x: 112;
        //y坐标
        y: 12
        //宽度
        width: 76;
        //高度
        height: 96
        //边线颜色
        border.color: "lightsteelblue"
        //边线宽度
        border.width: 4
        //半径
        radius: 8
        //颜色
        color: "white"
    }

0_1526260668781_fcc8319e-8bab-4960-bcbd-f7ca56994a90-image.png

⽂本元素（ Text Element）

Text {
        //文字内容
        text: "Qt Qml Text"
        //颜色
        color: "#FF0000"
        //字体
        font.family: "Ubuntu"
        //字号
        font.pixelSize: 28
    }

0_1526261315305_acfbc69c-6f55-4318-9340-8c9cff52422d-image.png

图像元素（ Image Element）

注意先把图片添加到资源文件，然后再引用

Image{
        //图片路径
        source: "qrc:/meng.png"
    }

0_1526261464175_836aa0f9-5b8e-4bb3-86e0-4991179d91d8-image.png

⿏标区域元素（ MouseArea Element）

Rectangle{
        id: rectMouse
        //宽度
        width: 50
        //高度
        height: 50
        color: "#ff0000"

        MouseArea{
            id: mouseArea
            //宽度
            width: parent.width
            //高度
            height: parent.height
            //响应点击事件
            onClicked: {
                if(rectMouse.color == "#ff0000"){
                    rectMouse.color = "#00ff00"
                }
                else{
                    rectMouse.color = "#ff0000"
                }
            }
        }
    }

0_1526267970193_20180514_111622 (1).gif

组件（ Compontents）

⼀个组件是⼀个可以重复使⽤的元素， QML提供⼏种不同的⽅法来创建组
件。但是目前我们只对其中⼀种⽅法进⾏讲解：⼀个⽂件就是⼀个基础组
件。⼀个以⽂件为基础的组件在⽂件中创建了⼀个QML元素，并且将⽂件以
元素类型来命名（例如Button.qml）。你可以像任何其它的QtQuick模块中使
⽤元素⼀样来使⽤这个组件。

创建一个组件，即一个qml文件

0_1526276317986_94c8e120-f30d-4a8a-85dd-230fcb56bb4a-image.png

选qml file（qt quick 2）

0_1526276329592_e9a3c249-c5d2-4714-9a12-01a42706801b-image.png

qml文件都是大写开头，main.qml除外

0_1526276380355_d770a3b2-801d-4f28-b8c9-70b336982742-image.png

完成后会在资源文件下添加新的qml文件，这就是我们的第一个组件

0_1526276421580_81af0706-7bde-401a-b8f4-8a26c2e4736b-image.png

MyButton.qml代码内容如下

import QtQuick 2.0

Rectangle {
    id: button
    //绑定文字内容
    property alias text: label.text
    //定义信号名字
    signal clicked()
    //宽度
    width: 116;
    //高度
    height: 26
    //颜色
    color: "lightsteelblue"
    //边线颜色
    border.color: "slategrey"
    //文字
    Text {
        id: label
        //文字居中
        anchors.centerIn: parent
        //默认文字内容
        text: "Start"
    }
    //鼠标
    MouseArea {
        anchors.fill: parent
        onClicked: {
            //发射信号
            button.clicked()
        }
    }
}

使用组件，main.qml代码如下

Column{
        id: column
        MyButton{
            id: button1
            //接收信号
            onClicked: text = "点1"
        }
        MyButton{
            id: button2
            //修改文字内容
            text: "按钮2"
            //接收信号
            onClicked: text = "点2"
        }
    }

运行效果

0_1526276932824_20180514_134726.gif

源代码

Fork me on Gitee

小白学qml 2