QtQuick QML 快速上手教程-1 QML基础启蒙

• 1 什么是QML

       通俗的讲，QML是一种编程语言，用来开发界面用的. QML书写格式类似于JSON的语法，并支持将命令性JavaScript表达式与动态属性绑定结合在一起

 

• 2 学习QML的第一步 -通过一个示例来开始学习QML

创建一个QML文件

每个QML文件都由两部分组成：导入部分和对象声明部分. QtQuick导入中提供了用户界面最常用的类型和功能. 类似c++的include<>

导入（import）和使用 QtQuick 模块

要使用Qt Quick模块，需要导入QML文档. 导入语法如下所示：

import QtQuick 2.3

导入后就可以使用Qt Quick的功能了

定义一个简单对象，例如一个红色的矩形，其中的文本居中显示，以下是代码和运行截图

import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("qml学习")

    Rectangle {
        width: 200
        height: 100
        color: "red"

        Text {
            anchors.centerIn: parent
            text: "Hello, World!"
        }
    }
}

这个简单的QML文件开始是import语句，会引入QtQuick 2.9模块，类似c++的include语句，与java中的import语句一样的效果。

1、ApplicationWindow{}，定义了一个应用程序的窗口，里面有title 名字为“qml学习”。

2、Rectangle{}语句，定义了一个rectangle的对象。

3、Text 可以说是一个rectangel的内置对象。anchors.centerIn: parent让它居中父类显示

4、属性初始化了rectangle的width 和 height属性。

 

用户的输入怎么处理？

使用QML开发界面的一大优点是，它允许程序员使用简单的JavaScript表达式定义应用程序对事件的反应. 在QML中，我们将这些事件称为信号 ，这些信号由信号处理程序处理 .

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }

    MouseArea {
        anchors.fill: parent
        onClicked: parent.color = "blue"
    }

这个例子是每当用户单击窗口中的任何位置时，矩形都会从红色变为蓝色. 请注意， MouseArea类型还会发出触摸事件的点击信号，因此此代码也可以在移动设备上运行.

用户用键盘输入时，可以用一个简单的表达式类似地处理：

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }

    focus: true
    Keys.onPressed: {
        if (event.key == Qt.Key_Return) {
            color = "blue";
            event.accepted = true;
        }
    }
}

当用户点返回键时，矩形颜色会变成蓝色

属性绑定

对象及其属性构成了QML文件中定义的图形界面的基础. QML语言允许属性以各种方式彼此绑定，从而实现高度动态的用户界面.

在以下示例中，每个子Rectangle对象均绑定到父Rectangle上面. 如果父矩形的几何形状发生变化，由于属性绑定，每个子矩形的几何形状将自动更新.

Rectangle {
    width: 400
    height: 200

    Rectangle {
        width: parent.width / 2
        height: parent.height
    }

    Rectangle {
        width: parent.width / 2
        height: parent.height
        x: parent.width / 2
    }
}

动画 Animations

属性也可以通过动画动态更新. QtQuick导入提供了各种动画类型，可用于为属性值的更改制作动画. 在下面的示例中，动画了一个属性，然后将其显示在" 文本"区域中：

Rectangle {
    color: "lightgray"
    width: 200
    height: 200

    property int animatedValue: 0
    SequentialAnimation on animatedValue {
        loops: Animation.Infinite
        PropertyAnimation { to: 150; duration: 1000 }
        PropertyAnimation { to: 0; duration: 1000 }
    }

    Text {
        anchors.centerIn: parent
        text: parent.animatedValue
    }
}

显示的值会从0到150定期变化

自定义类型

我们可以自定义一个按钮类型，利用rectangle对象达到想要的视觉效果，并且将这个类型定义为自定义类型。

例如，我们写一个button.qml

// Button.qml
import QtQuick 2.3

Rectangle {
    width: 100; height: 100
    color: "red"

    MouseArea {
        anchors.fill: parent
        onClicked: console.log("Button clicked!")
    }
}

现在，可以在应用程序中多次重复使用该类型，如下所示

// application.qml
import QtQuick 2.3

Column {
    Button { width: 50; height: 50 }
    Button { x: 50; width: 100; height: 50; color: "blue" }
    Button { width: 50; height: 50; radius: 8 }
}

这样，模块化用户界面类型就可以在应用程序中进行组装和重用

 

下一章 讲QML的属性