兼容Qt4/Qt5版本Qml控件CheckBox

复选框显示一个可切换(选中)或关闭(未选中)的选项按钮.

• 
  导入方法: 文件导入
  
• 
  兼容性: QtQuick1.x与 QtQuick2.x
  
• 
  继承: Item
  

属性

• 
  background: Item
  
• 
  checked: bool
  
• 
  contentItem: Item
  
• 
  down: bool
  
• 
  indicator: Item
  
• 
  pressed: bool
  
• 
  text: string
  

描述

1. 
   CheckBox{
   
2. 
   checked:true
   
3. 
   text:"Default"
   
4. 
   }
   

示例

• 
  background:Item
  该属性保留着控件的背景项.
  
• 
  checked:bool
  该属性保留着控件是否选中.
  
• 
  contentItem:Item
  该属性保留着自定义内容元素.
  
• 
  down:bool
  此属性保留按钮是否在视觉上向下。
  更多相关请查看pressed.
  
• 
  indicator:Item
  此属性保存着指示器项。
  
• 
  pressed:bool
  此属性保存按钮是否被物理按下。可通过触摸或按键事件按下按钮。
  更多相关请查看down.
  
• 
  text:string
  此属性保存按钮的文本描述。
  更多相关请查看contentItem.
  

关于更新

• 
  文章首发于微信公众号 你才小学生(nicaixiaoxuesheng)
  
• 
  后续更新于Qtbig哥(qtbig.com)
  

源码

1. 
   importQtQuick2.0
   


2. 
   Item{
   
3. 
   id: root
   


4. 
   implicitWidth: backgroundId.item.width
   
5. 
   implicitHeight: backgroundId.item.height
   


6. 
   propertyboolchecked:false
   
7. 
   propertybool down:false
   
8. 
   propertybool pressed:false
   
9. 
   propertystring text:"text"
   


10. 
    propertyComponent indicator :Rectangle{
    
11. 
    implicitWidth:20
    
12. 
    implicitHeight:20
    
13. 
    radius:3
    
14. 
    border.color:"gray"
    
15. 
    y:(root.height - height)/2
    


16. 
    Rectangle{
    
17. 
    anchors.centerIn: parent
    
18. 
    width:10; height:10
    
19. 
    radius:2
    
20. 
    color:"gray"
    
21. 
    visible: root.checked
    
22. 
    }
    
23. 
    }
    


24. 
    propertyComponent contentItem :Text{
    
25. 
    height: root.height
    
26. 
    text: root.text
    
27. 
    color: root.down ?"black":"black"
    
28. 
    horizontalAlignment:Text.AlignHCenter
    
29. 
    verticalAlignment:Text.AlignVCenter
    
30. 
    x:25
    
31. 
    }
    


32. 
    propertyComponent background :Rectangle{
    
33. 
    width:60; height:20
    
34. 
    color:"#00000000"
    
35. 
    }
    


36. 
    Loader{
    
37. 
    id: backgroundId
    
38. 
    sourceComponent: background
    
39. 
    }
    


40. 
    Loader{
    
41. 
    id: indicatorId
    
42. 
    sourceComponent: indicator
    
43. 
    }
    


44. 
    Loader{
    
45. 
    id: contentItemId
    
46. 
    sourceComponent: contentItem
    
47. 
    }
    


48. 
    MouseArea{
    
49. 
    id: mouseArea
    
50. 
    anchors.fill: parent
    
51. 
    onClicked:{
    
52. 
    down =!down
    
53. 
    checked= down
    
54. 
    }
    
55. 
    }
    
56. 
    }
    

示例源码

1. 
   importQtQuick2.0
   
2. 
   import"../"asMy
   


3. 
   Rectangle{
   
4. 
   width:70
   
5. 
   height:150
   


6. 
   Row{
   
7. 
   anchors.centerIn: parent
   
8. 
   spacing:150
   


9. 
   Column{
   
10. 
    spacing:30
    


11. 
    /* Default */
    
12. 
    Repeater{
    
13. 
    model:["gray","red","blue"]
    


14. 
    My.CheckBox{
    
15. 
    id: checkBox
    
16. 
    text:"默认样式"+(index +1)
    


17. 
    indicator :Rectangle{
    
18. 
    implicitWidth:20
    
19. 
    implicitHeight:20
    
20. 
    radius:3
    
21. 
    border.color:"gray"
    
22. 
    y:(checkBox.height - height)/2
    


23. 
    Rectangle{
    
24. 
    anchors.centerIn: parent
    
25. 
    width:10; height:10
    
26. 
    radius:2
    
27. 
    color: modelData
    
28. 
    visible: checkBox.checked
    
29. 
    }
    
30. 
    }
    
31. 
    }
    
32. 
    }
    
33. 
    }
    


34. 
    Column{
    
35. 
    spacing:30
    


36. 
    Repeater{
    
37. 
    model:["gray","red","blue"]
    
38. 
    My.CheckBox{
    
39. 
    id: checkBox1
    
40. 
    text:"圆形样式"+(index +1)
    
41. 
    indicator :Rectangle{
    
42. 
    implicitWidth:20
    
43. 
    implicitHeight: implicitWidth
    
44. 
    radius: implicitWidth/2
    
45. 
    border.color:"#e4846c"
    
46. 
    y:(checkBox1.height - height)/2
    


47. 
    Rectangle{
    
48. 
    anchors.centerIn: parent
    
49. 
    width:10; height: width
    
50. 
    radius: width/2
    
51. 
    color: modelData
    
52. 
    visible: checkBox1.checked
    
53. 
    }
    
54. 
    }
    
55. 
    }
    
56. 
    }
    
57. 
    }
    


58. 
    Column{
    
59. 
    spacing:30
    


60. 
    My.CheckBox{
    
61. 
    id: checkBox2
    
62. 
    text:"符号样式1"
    
63. 
    indicator :Rectangle{
    
64. 
    implicitWidth:20
    
65. 
    implicitHeight: implicitWidth
    
66. 
    border.color:"lightblue"
    
67. 
    y:(checkBox2.height - height)/2
    


68. 
    Text{
    
69. 
    anchors.centerIn: parent
    
70. 
    font.pixelSize:16
    
71. 
    text:"√"
    
72. 
    visible: checkBox2.checked
    
73. 
    }
    
74. 
    }
    
75. 
    }
    


76. 
    My.CheckBox{
    
77. 
    id: checkBox3
    
78. 
    text:"符号样式2"
    
79. 
    indicator :Rectangle{
    
80. 
    implicitWidth:20
    
81. 
    implicitHeight: implicitWidth
    
82. 
    border.color:"lightblue"
    
83. 
    y:(checkBox3.height - height)/2
    


84. 
    Text{
    
85. 
    anchors.centerIn: parent
    
86. 
    font.pixelSize:16
    
87. 
    text: checkBox3.checked?"√":"×"
    
88. 
    }
    
89. 
    }
    
90. 
    }
    


91. 
    My.CheckBox{
    
92. 
    id: checkBox4
    
93. 
    text:"符号样式3"
    
94. 
    indicator :Rectangle{
    
95. 
    implicitWidth:20
    
96. 
    implicitHeight: implicitWidth
    
97. 
    border.color:"lightblue"
    
98. 
    y:(checkBox4.height - height)/2
    


99. 
    Text{
    
100. 
     anchors.centerIn: parent
     
101. 
     font.pixelSize:16
     
102. 
     text: checkBox4.checked?"":"-"
     
103. 
     }
     
104. 
     }
     
105. 
     }
     
106. 
     }
     
107. 
     }
     
108. 
     }