社区新版论坛已上线，点击立即前往！使用 openKylin 账户授权登录，解锁更多体验！

openKylin论坛

 找回密码
开启辅助访问
wenbo607 黄金麒麟
返回列表 发消息

在Cascades中自定义QML控件 [复制链接]

虽然Cascades已经提供了很多有用的控件，也可以自定义QML控件，自定义的控件是可以重用的，就像使用其它系统控件一样。

在QML中自定义控件：去创建一个QML控件，创建一个文件<Name>.qml，<Name>就是新控件的名字，名字的首字母必须大写。

样例：

这个简单的自定义控件结合了CheckBox和Label，控件名：CustomCheckBox.qml。

  1. import bb.cascades 1.0
  2. 02
  3.   
  4. 03
  5. Container {
  6. 04
  7.     layout: StackLayout {
  8. 05
  9.         layoutDirection: LayoutDirection.LeftToRight
  10. 06
  11.     }
  12. 07
  13.     CheckBox {
  14. 08
  15.         id: checkBox
  16. 09
  17.         checked: false
  18. 10
  19.     }
  20. 11
  21.     Label {
  22. 12
  23.         id: label
  24. 13
  25.         leftMargin: 10
  26. 14
  27.         text: "Check Box"
  28. 15
  29.     }
  30. 16
  31. }
复制代码

使用一个自定义控件

下面的样例中演示了如何在另外的QML文件中使用CustomCheckBox控件。CustomCheckBox.qml文件必须和这个文件位于同一目录下。

  1. import bb.cascades 1.0
  2. 02
  3.   
  4. 03
  5. Page {
  6. 04
  7.     content: Container {
  8. 05
  9.         preferredWidth: 768
  10. 06
  11.         preferredHeight: 1280
  12. 07
  13.         layout: DockLayout {
  14. 08
  15.         }
  16. 09
  17.         CustomCheckBox {
  18. 10
  19.             id: customCheckBox
  20. 11
  21.             layoutProperties: DockLayoutProperties {
  22. 12
  23.                 verticalAlignment: VerticalAlignment.Center
  24. 13
  25.                 horizontalAlignment: HorizontalAlignment.Center
  26. 14
  27.             }
  28. 15
  29.         }
  30. 16
  31.     }
  32. 17
  33. }
复制代码

访问一个组件的属性：

首先将Label和CheckBox的属性暴露给CustomCheckBox

  1. import bb.cascades 1.0
  2. 02
  3.   
  4. 03
  5. Container {
  6. 04
  7.     property string text: label.text
  8. 05
  9.     property bool checked: checkBox.checked  
  10. 06
  11.       
  12. 07
  13.     CheckBox {
  14. 08
  15.         id: checkBox
  16. 09
  17.         checked: false
  18. 10
  19.     }
  20. 11
  21.     Label {
  22. 12
  23.         id: label
  24. 13
  25.         text: "Hello"
  26. 14
  27.     }
  28. 15
  29. }
复制代码
当定义新属性去暴露内部属性的时候，系统将会为新属性分配相应的存储空间。为了避免这种情况，可以使用一个别名指向内部属性来代替。
  1. import bb.cascades 1.0
  2. 02
  3.   
  4. 03
  5. Container {
  6. 04
  7.     property alias text: label.text
  8. 05
  9.     property alias checked: checkBox.checked
  10. 06
  11.       
  12. 07
  13.     CheckBox {
  14. 08
  15.         id: checkBox
  16. 09
  17.         checked: false
  18. 10
  19.     }
  20. 11
  21.     Label {
  22. 12
  23.         id: label
  24. 13
  25.         text: "Hello"
  26. 14
  27.     }
  28. 15
  29. }
复制代码
楼主
发表于 2013-7-16 22:42:14
回复

使用道具 举报

openKylin

GMT+8, 2024-7-5 12:44 , Processed in 0.020782 second(s), 18 queries , Gzip On.

Copyright ©2022 openKylin. All Rights Reserved .

ICP No. 15002470-12 Tianjin

快速回复 返回顶部 返回列表