QML笔记整理——QML高级特性

一、扩展QML的类型

QML很多核心的类型和元素都是由C++实现的，然而，用纯QML对这些类型扩展也是可以的

1、添加新属性

开发者可以添加新的属性properties、添加新的信号signals、添加新的方法methods和定义新的QML控件

1）每个属性都必须有一个类型，QML有很多已经定义好的类型，它们都有对应的C++类型，如下图示：

示例程序：

// Syntax of adding a new property to an element

// [default] property <type> <name> [: defaultValue]

import QtQuick 2.0

Rectangle {

    property color innerColor: "black"

    color: "red"

    width: 100; height: 100

    Rectangle {

        anchors.centerIn: parent

        width: parent.width - 10

        height: parent.height - 10

        color: innerColor

    }

}

2）新的属性也可以是现有的属性的别名。新的属性不会被分配新的存储控件，他的类型是由alias属性决定的。

示例程序：

// Syntax of creating a property alias

// [default] property alias <name> : <alias reference>

import QtQuick 2.0

Rectangle {

    property alias innerColor: innerColor.color

    color: "red"

    width: 100; height: 100

    Rectangle {

        anchors.centerIn: parent

        width: parent.width - 10

        height: parent.height - 10

        color: "black"

    }

}

3）在定义新的组件时，属性的别名是非常有用的。然而对于别名有一些限制，只有在控件完全实例化的时候才能使用别名，在这个控件里面不能使用别名，在同一个控件中，不能在别名上再建立别名

示例如下：

    // Does not work:

    property alias innerColor: innerRect.color

    innerColor: "black"

    // ...and neither does this:

    id: root

    property alias innerColor: innerRect.color

    property alias innerColor2: root.innerColor

4）除了上面的限制，别名提供了很多的灵活性，可以重定义已经存在的属性的行为，并在控件内部仍然使用这个属性。

比如下面的例子，定义color属性，外面的矩形总是红色，且用户只能修改里面的矩形的颜色

Rectangle {

    property alias color: innerRect.color

    color: "red"

    width: 100; height: 100

    Rectangle {

        id: innerRect

        ...;

        color: "black"

    }

}

2、添加新的信号

QML中可以定义自己的信号，这些信号可以在QML中直接使用。在C++端，它们是普通的Qt信号。自定义信号可以有参数

示例如下：

Item {

    signal hovered()// A signal without arguments

    signal click // The same as above, empty argument list can be emited

    signal performAction(string action, var actionArgument)

}

3、添加新的方法

已有的类型也可以添加新的方法。可以使用JavaScript实现。在QML端可以直接使用，在C++端是槽函数。新添加的方法要使用没有类型的参数（JavaScript本身是弱类型，在C++端，它的类型为QVariant）

示例如下：

// Define a method

Item {

    id: myItem

    function say(text) {

        console.log("You said " + text)

    }

}

// Use the method

myItem.say("Hello")