虽然Cascades已经提供了很多有用的控件,也可以自定义QML控件,自定义的控件是可以重用的,就像使用其它系统控件一样。在QML中自定义控件:去创建一个QML控件,创建一个文件.qml,就是新控件的名字,名字的首字母必须大写。样例:这个简单的自定义控件结合了CheckBox和Label,控件名:CustomCheckBox.qml。
import bb.cascades 1.0
02
03
Container {
04
layout: StackLayout {
05
layoutDirection: LayoutDirection.LeftToRight
06
}
07
CheckBox {
08
id: checkBox
09
checked: false
10
}
11
Label {
12
id: label
13
leftMargin: 10
14
text: "Check Box"
15
}
16
}
使用一个自定义控件下面的样例中演示了如何在另外的QML文件中使用CustomCheckBox控件。CustomCheckBox.qml文件必须和这个文件位于同一目录下。
import bb.cascades 1.0
02
03
Page {
04
content: Container {
05
preferredWidth: 768
06
preferredHeight: 1280
07
layout: DockLayout {
08
}
09
CustomCheckBox {
10
id: customCheckBox
11
layoutProperties: DockLayoutProperties {
12
verticalAlignment: VerticalAlignment.Center
13
horizontalAlignment: HorizontalAlignment.Center
14
}
15
}
16
}
17
}
访问一个组件的属性:首先将Label和CheckBox的属性暴露给CustomCheckBox
import bb.cascades 1.0
02
03
Container {
04
property string text: label.text
05
property bool checked: checkBox.checked
06
07
CheckBox {
08
id: checkBox
09
checked: false
10
}
11
Label {
12
id: label
13
text: "Hello"
14
}
15
}
当定义新属性去暴露内部属性的时候,系统将会为新属性分配相应的存储空间。为了避免这种情况,可以使用一个别名指向内部属性来代替。
import bb.cascades 1.0
02
03
Container {
04
property alias text: label.text
05
property alias checked: checkBox.checked
06
07
CheckBox {
08
id: checkBox
09
checked: false
10
}
11
Label {
12
id: label
13
text: "Hello"
14
}
15
}