QML property属性

1.简介

属性没有类似于C++成员变量，但是没有public、private、protected区分。

属性名称以一个小写字母开头，只能包括字母、数字和下划线。

属性值可以被初始化，也可以使用JavaScript表达式来赋值，通过这两种方式赋值时，可以是一个静态值，也可以是一个与其它属性绑定的值。

可以自己定义属性：

自定义了一个属性value，会自动生成valueChanged 信号 onValueChanged的槽函数。

    property int value: 0
 
    onValueChanged: {
        console.log("value = ",value);
    }
 
    Button{
        width: 50
        height: 50
        x:0
        y:0
        background: Rectangle{
            color:"red"
        }
 
        onClicked: {
            value++
        }
    }

 2.支持的类型

    property int value: 0
    property real myReal: 0.0
    property string myString: "black"
    property color myColor: "red"
    property url myUrl: "qrc:/1.jpeg"
    property Component myComponent
    property Rectangle myRectangle
    property list<Rectangle> myList
    property var myVar: 1

var类型是泛型，支持任何类型的属性值。

list是列表类型。

3.只读属性

只读属性必须初始化，且不能修改，也不能是default属性和alias属性

readonly property string myString: "black"

4.属性别名

示例：自定义了一个WRectangle.qml，在main.qml使用他。

定义了一个属性别名property alias myInnerRect:innerRect，在外部我们就可以使用myInnerRect来访问内部的Rectangle。

        myInnerRect.width: 80
        myInnerRect.height: 80

//WRectangle.qml

Rectangle {
    property string startColor: "lightsteelblue"
    property string endColor: "blue"
    property alias myInnerRect:innerRect
    width: 100
    height: 100
    rotation: 45    //旋转45度
    radius:10   //设置 圆角半径
    gradient: Gradient {
        GradientStop { position: 0.0; color: startColor }
        GradientStop { position: 1.0; color: endColor }
    }

    Rectangle{
        id:innerRect
        width: 50
        height: 50
        radius:5   //设置 圆角半径
        anchors.centerIn: parent

        gradient: Gradient {
            GradientStop { position: 0.0; color: endColor }
            GradientStop { position: 1.0; color: startColor }
        }
    }
}

//main.qml

Window {
    visible: true
    width: 400
    height: 400
    title: qsTr("Hello World")

    WRectangle{
        x:50
        y:50
        myInnerRect.width: 80
        myInnerRect.height: 80
    }
}

5.必须初始化的属性

加上required，则必须初始化好value的值，控件才能够使用，否则就会报错。

required property int value

使用：

    WRectangle{
        x:50
        y:50
        value:20
        myInnerRect.width: 80
        myInnerRect.height: 80
    }