找回密码
 立即注册
  • QQ空间
  • 回复
  • 收藏

兼容Qt4/Qt5版本Qml控件CheckBox

admin 2019-2-28 06:34 284人围观 Qt相关

来源于微信公众号:你才小学生


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

  • 导入方法: 文件导入

  • 兼容性: 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. }


----------------------------------------------------------------------------------------------------------------------
我们尊重原创,也注重分享,文章来源于微信公众号:你才小学生,建议关注公众号查看原文。如若侵权请联系qter@qter.org。
----------------------------------------------------------------------------------------------------------------------

鲜花

握手

雷人

路过

鸡蛋

yafeilinux和他的朋友们微信公众号二维码

微信公众号

专注于Qt嵌入式Linux开发等。扫一扫立即关注。

Qt开源社区官方QQ群二维码

QQ交流群

欢迎加入QQ群大家庭,一起讨论学习!

我有话说......