QML教程-属性绑定与非绑定

发表于

写QML界面会经常使用到很多的属性，其中属性的绑定与解绑尤其重要，决定着该界面属性是否能动态更新的功能。本文介绍属性的绑定与非绑定特性。

1.属性绑定

  • 使用:操作符，作用是左值绑定右值。

  • 例：

    1
    2
    3
    4
    5
    6
    7
    8
    Item {
        property color myColor: "white"
        ...
        Rectangle {
            color: myColor
            ...
        }
    }

  • color绑定父控件myColor属性。

2.属性非绑定(解除绑定)

  • 使用=操作符，作用是左值解除右值绑定

  • 例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    Item {
        property color myColor: "white"
        ...
        Rectangle {
            color: myColor
            ...
            Component.onCompleted: color = "blue"
        }
    }

  • 当color = "blue"被执行时会解除color: myColor的绑定

3.属性重新绑定

  • 使用Binding控件对已经解除绑定的属性重新绑定。

  • 例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    Item {
        property color myColor: "white"
        ...
        Rectangle {
            color: myColor
            ...
            Component.onCompleted: color = "blue"
        }
        
        Binding {
            target: rect
            property: "color"
            value: root.myColor
        }
    }

  • target为被绑定(左值)的id；

  • property为被绑定(左值)的属性，注意类型为字符串；
  • value为绑定(右值)的属性。

4.类比原理

  • 绑定原理相当于C++的引用或指针。
  • 非绑定原来相当于C++的赋值，将值复制一份。

5.什么情况下使用绑定与非绑定？

  • 使用绑定特性会导致不同对象的属性之间存在依赖关系，对界面动态刷新会有影响。
  • 比如：翻译刷新问题。 如果翻译字段被绑定了，那么翻译字段刷新将会更新所有的文字，这样会导致界面的突然卡顿(如果翻译字段过多)。这时候建议是解除绑定可以降低界面的突然卡顿。
  • 绑定容易影响性能，但刷新界面方便。
  • 非绑定虽然要做些额外的工作(赋值)但可以降低对界面的刷新，特别是图表类。