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

为什么需要将属性导出

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

属性导出

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

（1）自定义属性。

（2）属性别名。

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

【readonly】property 【:】

property是固定写法。

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

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

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

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

propertyaliaslabel:labelText.text
propertycolortint:"blue"
onLabelChanged:console.log("aliasLabelChanged")
onTintChanged:console.log("tintChanged")

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

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

[default]propertyalias:

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

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

：指别名引用。

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

例如：

propertyaliasbutton:item.button

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

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

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

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

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

一个实例

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

importQtQuick2.0

Item{
id:container

propertyaliaslabel:labelText.text

propertycolortint:"blue"
signalclicked

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信号：

signalclicked

在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别名
propertyaliaslabel:labelText.text

//颜色属性
propertycolortint:"blue"

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

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

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

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

propertyaliaslabel:console.log("clicked")

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

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

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

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

propertyaliaslabel:myName
propertystringmyName:"iriczhao"

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

propertystringmyName:"iriczhao"
propertyaliaslabel:container.myName

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

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

Item{
id:myItem
propertyRectanglemyRect
}

审核编辑：刘清