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")
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章