在Cascades中自定义QML控件

兼容适配 软件兼容
1

虽然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
}