浅谈qml属性绑定与赋值

属性赋值

就字面意思，赋一个值给属性

Rectangle {
    id:rect
    Component.onCompeleted:{
        rect.width = 10; // 赋值
        rect.height = 10; // 赋值
        rect.color = "red"; // 赋值
    }
}

属性绑定

绑定到表达式

属性绑定可以让属性绑定到一个表达式，例如一个数字，一个字符串，一个函数，一个运算表达式，或者一个有返回值的代码块。

Rectangle {
    id:rect
    width:10 // 绑定到一个数字
    height:10 + 10 //绑定到表达式
    radius:{
        if(width > 10) return 2;
        else return 3;
    } // 绑定到一个代码块
    color:Qt.rgba(1, 0.9, 0.8, 1); // 绑定到一个函数
}

通过Binding绑定属性

Rectangle {
    id: root
    width: 100
    height: 100
    Text{
        id: showText
    }
    Binding{
        target:id:showText // 被绑定的对象，可以是通过c++注册的单例对象
        property:"text" // 通过字符串来找到属性
        value: root.width // 绑定到root.width
        // Binding 相当于
        // bool QObject::?setProperty(const char * name, const QVariant & value);
    }
}

通过PropertyChanges来绑定

import QtQuick 2.0

Item {
    id: container
    width: 300; height: 300

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

        MouseArea {
           id: mouseArea
           anchors.fill: parent
        }

        states: State {
           name: "resized"; when: mouseArea.pressed
           PropertyChanges { target: rect; color: "blue"; height: container.height }
        }
    }
}

PropertyChanges一般配合State来使用

通过Qt.binding(function)来指定一个函数来绑定到属性

Rectangle {
    id: rect
    width: 100
    height: 100
    Component.onCompeleted: {
        width = 200; // 仅仅只是赋值操作
        height = Qt.binding( function(){
                return width*1.5;
            }); // 直接绑定到一个函数
    }
}

被绑定的表达式，内部含有对象的属性的话，那么每当属性变化时，就会发生信号，绑定表达式的属性就会根据表达式动更新自己。

QML核心功能-属性绑定