QML Reference

工程中使用QML需要配置下面三个选项：

1、pro文件中需要 QT += qml

2、C++头文件包含include <QtQml>

3、qml文件中需要引入 import QtQml 2.0

QML 基本语法：

1、QML对象类型

（1）用户自定义QML类型。该类型写入一个单独的后缀是qml的文件中，文件名首字母大写。如： SquareButton

// SquareButton.qml
import QtQuick 2.0
Rectangle {
    width: 100; height: 100
    color: "red"
    MouseArea {
        anchors.fill: parent
        onClicked: console.log("Button clicked!")
    }
}

anchors.fill provides a convenient way for one item to have the same geometry as another item, and is equivalent to connecting all four directional anchors.原文是这样意思是这个图元整个geometry 和父图元相同，即填充到整个父。

//myapplication.qml

import  QtQuick 2.0

SquareButton{}

终端中运行qmlscene -I import myapplication.qml，就可以看到效果了。

The root object definition in a .qml file defines the attributes that are available for a QML type.原文这样理解就是自定义的类型可以访问和修改内部的任何属性例子为证。

//myapplication.qml

import  QtQuick 2.0

//SquareButton{}

Column{

    spacing: 2

    SquareButton{width:50;height:50}

    SquareButton{x:50;color:"blue"}

    SquareButton{radius:10}

}

QtQuik里面的Colum控件是一个简单的列布局控件，将内部的子按一列进行显示。

import  QtQuick 2.0

//SquareButton{}

Column{

    spacing: 2

    SquareButton{width:50;height:50}

    SquareButton{x:50;color:"blue"}

    SquareButton{radius:10}

}

Qt提供了一个动画例子

import  QtQuick 2.0

//SquareButton{}

Column{

    spacing: 2

//    SquareButton{width:50;height:50}

//    SquareButton{x:50;color:"blue"}

//    SquareButton{radius:10}

    SquareButton{color:"red";width:50;height: 50}

    SquareButton{id:greenRect;color: "green";width:20;height: 50}

    SquareButton{color: "blue";width:50;height:20}

    move: Transition {

        NumberAnimation{properties: "x,y";duration: 1000}

    }

    focus: true

    Keys.onSpacePressed: greenRect.visible = !greenRect.visible

}

下面是对于信号槽调用，

// SquareButton.qml

import QtQuick 2.0

Rectangle {

    id:root

    width: 100; height: 100

    color: "red"

    signal buttonClick(real x,real y)

    function radomsizeColor()

    {

        root.color = Qt.rgba(Math.random(),Math.random(),Math.random(),1)

    }

    MouseArea {

        anchors.fill: parent

        //onClicked: console.log("Button clicked!")

        onClicked: root.buttonClick(mouse.x,mouse.y)

    }

}

//myapplication.qml

import  QtQuick 2.0

SquareButton{

    onButtonClick: {

        console.log("Click:",x,y)

        radomsizeColor()

    }

}

这里有个自定义信号的知识点，注意信号定义小写字母开头，槽这边on+信号名（大写字母开头）。

import  QtQuick 2.0

//SquareButton{}

Column{

    spacing: 2

    SquareButton{width:50;height:50}

    SquareButton{x:50;color:"blue"}

    SquareButton{radius:10}

}

（2）从C++代码中定义一个QML类型

只要是继承自QObject类的自定义C++类都可以注册到QML引擎中被解析和被QML系统所使用。原文：： Any QObject-derived C++ class can be registered as the definition of a QML object type . 

定义C++类型

class Message : public QObject
{
	Q_OBJECT
	Q_PROPERTY(QString author READ author WRITE setAuthor NOTIFY authorChange)
	Q_PROPERTY(QDate authorDate READ authorDate WRITE setAuthorDate NOTIFY dateChange)

注册到qml系统中

qmlRegisterType<Message>("MessagePerson",1,0,"Message");

脚本：

import MessagePerson 1.0
 
Message{
    author:"王bull"
	authorDate:new Date()
}