QML tutorial

qml

qml是Qt环境下EcmaJavaScript的一种实现形式，与·JavaScript`语法几乎相同。

qml脚本预览环境配置

设置环境变量：

• set Path=%Path%;C:\Qt\Qt5.10.1\5.10.1\msvc2015\bin
• set QML2_IMPORT_PATH=C:\Qt\Qt5.10.1\5.10.1\msvc2015\qml

Tutorial 1 Hello World

import QtQuick 2.0
//Rectange:Item 组件
//根组件
Rectangle {
	//id唯一引用标识
    id: page
    //尺寸
    width: 320;
    height: 480
    //背景颜色
    color: "lightgray"
    //Text子组件
    Text {
        id: helloText
        text: "Hello world!"
        //绝对定位
        y: 100 
        //附加锚定位属性：相对于page父组件水平居中
        anchors.horizontalCenter: page.horizontalCenter
        //附加字体属性
        font.pointSize: 24; 
        font.bold: true
    }
}

运行：qmlscene tutorial1.qml

Tutorial 2 自定义组件

自定义Cell组件 Cell.qml

• 定义组件Item ，组件类型名为文件名Cell.qml
• Grid定位器布局2行三列

import QtQuick 2.0
Item {
    id: container
    //定义属性别名:引用rectange组件的背景颜色属性
    property alias cellColor: rectangle.color
    //自定义信号，参数color
    signal clicked(color cellColor)
    width: 40;
    height: 25
    
    Rectangle {
        id: rectangle
        border.color: "white"
        anchors.fill: parent
    }
    MouseArea {
        anchors.fill: parent
        //鼠标单击发送信号
        onClicked: container.clicked(container.cellColor)
    }
}

import QtQuick 2.0

Rectangle {
    id: page
    width: 320; 
    height: 480
    color: "lightgray"

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24;
        font.bold: true
    }

    Grid {
        id: colorPicker
        x: 4;
        anchors.bottom: page.bottom; 
        anchors.bottomMargin: 4
        rows: 2; 
        columns: 3;
        spacing: 3

		//应用Cell.qml中定义的组件并使用自定义别名属性控制Rectangle的背景颜色
        Cell { cellColor: "red"; onClicked: helloText.color = cellColor }

        Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
    }
}

运行：qmlscene tutorial2.qml

Tutorial3 动画

• State(动画状态)和Transition （动画过渡）
• ParallelAnimation(并行动画，多个动画一起执行)
• NumberAnimation 和 ColorAnimation

import QtQuick 2.0

Rectangle {
    id: page
    width: 320; 
    height: 480
    color: "lightgray"

    Text {
        id: helloText
        text: "Hello world!"
        y: 30
        //水平居中
        anchors.horizontalCenter: page.horizontalCenter
        font.pointSize: 24; 
        font.bold: true
        //鼠标交互区域
        MouseArea { 
        	id: mouseArea;
        	anchors.fill: parent 
        }
        //动画状态
        states: State {
            name: "down";
            //当鼠标按下的时候属性状态改变
            when: mouseArea.pressed == true
            PropertyChanges { 
           	 target: helloText;
             y: 160; 
             rotation: 180; 
             color: "red" }
        }
        state:""
        //动画过渡
        transitions: Transition {
            from: ""; 
            to: "down"; 
            //可复员
            reversible: true
            //并行动画
            ParallelAnimation {
               //数值属性变化动画
                NumberAnimation { 
                	properties: "y,rotation";
                	duration: 500;
                 	easing.type: Easing.InOutQuad
                }
                //颜色属性变化动画
                ColorAnimation { duration: 500 }
            }
        }
    }

    Grid {
        id: colorPicker
        x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
        rows: 2;
        columns: 3; 
        spacing: 3
        Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
    }
}

运行·：qmlscene tutorial3.qml