openKylin论坛
标题: 在Cascades中自定义QML控件 [打印本页]
作者: wenbo607 时间: 2013-7-16 22:42
标题: 在Cascades中自定义QML控件
虽然Cascades已经提供了很多有用的控件,也可以自定义QML控件,自定义的控件是可以重用的,就像使用其它系统控件一样。
在QML中自定义控件:去创建一个QML控件,创建一个文件<Name>.qml,<Name>就是新控件的名字,名字的首字母必须大写。
样例:
这个简单的自定义控件结合了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
- }
复制代码
欢迎光临 openKylin论坛 (https://forum.openkylin.top/) |
Powered by Discuz! X3.3 |