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.什么情况下使用绑定与非绑定?

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