为什么需要将QML的属性导出呢

为什么需要将属性导出

在进行QML应用开发时，很多时候都是以组件的形式规划软件的，然而一个组件又由许多子元素组成和描述。当我们需要从一个组件引用另一个组件的属性时，这时候就需要将被引用组件的属性导出。例如：当一个组件是由数据驱动的，那么就必须将被数据驱动的属性导出，供其他组件引用使用和修改。

属性导出

将一个组件的属性导出，有两种形式：

（1）自定义属性。

（2）属性别名。

为一个组件类型自定义属性，其语法格式为：

【readonly】property 【:】

property是固定写法。

：表示属性的类型。目前支持的属性类型可以是QML基本类型（bool、double、int、list、real、string、url）；可以是QML对象类型；也可以使用var指定的泛型类型。

：表示属性名称。属性名称必须以小写字母开头，且只能包含字母、数字和下划线

：表示属性值，可以是静态值或将其绑定到动态表达式。

自定义的属性默认有一个属性值改变信号，我们可以使用onChanged信号处理程序来接收该信号，例如下列代码：

 

property alias label:  labelText.text
property color tint: "blue"
onLabelChanged: console.log("alias Label Changed")
onTintChanged: console.log("tint Changed")

 

上述代码中，onLabelChanged信号处理程序用于接收label的改变信号；onTintChanged用于接收Tint的改变信号。

为一个组件定义一个属性别名，写法如下所示：

 

[default] property alias : 

 

property alias是标准写法，不能更改。

：是导出属性的别名。其他组件则通过该名称引用到对应的属性。

：指别名引用。

声明属性别名与普通的属性定义类似，只是它需要alias关键字而不是属性类型，并且属性声明的右侧必须是一个有效的别名引用。

例如：

 

property alias button: item.button

 

上述代码中，别名则是指item组件实例中的按钮组件实例。

在 Qt Design Studio和QtCreate设计模式中，我们可以使用Navigator中的(Export)按钮将组件导出为具有有效别名引用的属性名：

注：导出的属性可以在『Connections』视图下的Properties中查看。

注：在其他文件代码中使用的组件必须导出为属性。

注：在QtCreator设计模式下导出组件属性的方法与Qt Design Studio是一样的。

一个实例

看一个具体实例，下面代码是自定义的一个按钮（Button）：

 

import QtQuick 2.0

Item {
    id: container

    property alias label: labelText.text

    property color tint: "blue"
    signal clicked

    width: labelText.width + 70 ; height: labelText.height + 18

    BorderImage {
        anchors { fill: container; leftMargin: -6; topMargin: -6; rightMargin: -8; bottomMargin: -8 }
        source: 'images/box-shadow.png'
        border.left: 10; border.top: 10; border.right: 10; border.bottom: 10
    }

    Image { anchors.fill: parent; source: "images/cardboard.png"; antialiasing: true }

    Rectangle {
        anchors.fill: container; color: container.tint; visible: container.tint != ""
        opacity: 0.25
    }

    Text { id: labelText; font.pixelSize: 15; anchors.centerIn: parent }

    MouseArea {
        anchors { fill: parent; leftMargin: -20; topMargin: -20; rightMargin: -20; bottomMargin: -20 }
        onClicked: container.clicked()
    }
}

 

上述代码中，自定义按钮的height、width参数由labelText标签文本来确定，然后创建一个Rectangle用于显示按钮颜色，创建MouseArea用于接收鼠标的点击事件，并定义了一个clicked信号：

 

 signal clicked

 

在MouseArea类型的点击事件处理程序中发出该信号：

 

MouseArea {
    anchors { fill: parent; leftMargin: -20; topMargin: -20; rightMargin: -20; bottomMargin: -20 }
    onClicked: container.clicked()
}

 

使用Image类型导入一张图片，作为按钮的背景：

 

Image { anchors.fill: parent; source: "images/cardboard.png"; antialiasing: true }

 

因为按钮的文本和颜色需要被其他组件类型控制（即，在其他组件的属性绑定或逻辑处理中需要改变按钮的文本和颜色值），所以添加了一个颜色属性（用于表示按钮的颜色）和label别名（引用labelText元素的text属性）：

 

//label别名
property alias label: labelText.text

//颜色属性
property color tint: "blue"

 

通过上述代码，将属性导出后，在其他组件类型中则可通过label和tint访问按钮组件内的属性。

在设计中，有效的别名引用有以下几个特性（以上述例子中代码为例）：

（1）只能指向声明了属性别名的组件中的组件实例或属性。

（2）不能包含JavaScript表达式。例如下列写法是错误的：

 

property alias label: console.log("clicked")

 

（3）除了声明属性别名的组件外，不能指向其他类型的组件。

（4）不能指向附加的属性。

在别名引用的写法格式上，别名引用必须指定为：， .或..。

以下几种写法都是错误的：

 

property alias label: myName
property string myName: "iriczhao"

 

上述代码位置交换一下也是错误的。下列从根元素（container为根元素的id）引用的写法也是错误的：

 

property string myName: "iriczhao"
property alias label: container.myName

 

（5）不能引用深度超过3层的嵌套属性。例如下列错误的用法：

 

//该属性引用将不能正常工作
property alias color: myItem.myRect.border.color

Item {
    id: myItem
    property Rectangle myRect
}

 

审核编辑：刘清