兼容Qt4/Qt5版本Qml控件CheckBox
复选框显示一个可切换(选中)或关闭(未选中)的选项按钮.
- 导入方法: 文件导入
- 兼容性:
QtQuick1.x与QtQuick2.x - 继承: Item
属性
- background: Item
- checked: bool
- contentItem: Item
- down: bool
- indicator: Item
- pressed: bool
- text: string
描述
复选框显示一个可切换(选中)或关闭(未选中)的选项按钮.复选框通常用于从一组选项中选择一个或多个选项.
CheckBox { checked: true text: "Default"}示例
属性文档
background:Item该属性保留着控件的背景项.checked:bool该属性保留着控件是否选中.contentItem:Item该属性保留着自定义内容元素.down:bool此属性保留按钮是否在视觉上向下。 更多相关请查看pressed.indicator:Item此属性保存着指示器项。pressed:bool此属性保存按钮是否被物理按下。可通过触摸或按键事件按下按钮。 更多相关请查看down.text:string此属性保存按钮的文本描述。 更多相关请查看contentItem.
关于更新
- 文章首发于微信公众号
你才小学生(nicaixiaoxuesheng) - 后续更新于Qtbig哥(qtbig.com)
源码
import QtQuick 2.0
Item { id: root
implicitWidth: backgroundId.item.width implicitHeight: backgroundId.item.height
property bool checked: false property bool down: false property bool pressed: false property string text: "text"
property Component indicator : Rectangle { implicitWidth: 20 implicitHeight: 20 radius: 3 border.color: "gray" y: (root.height - height)/2
Rectangle { anchors.centerIn: parent width: 10; height: 10 radius: 2 color: "gray" visible: root.checked } }
property Component contentItem : Text { height: root.height text: root.text color: root.down ? "black" : "black" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter x: 25 }
property Component background : Rectangle { width: 60; height: 20 color: "#00000000" }
Loader { id: backgroundId sourceComponent: background }
Loader { id: indicatorId sourceComponent: indicator }
Loader { id: contentItemId sourceComponent: contentItem }
MouseArea { id: mouseArea anchors.fill: parent onClicked: { down = !down checked = down } }}示例源码
import QtQuick 2.0import "../" as My
Rectangle { width: 70 height: 150
Row { anchors.centerIn: parent spacing: 150
Column { spacing: 30
/* Default */ Repeater { model: ["gray", "red", "blue"]
My.CheckBox { id: checkBox text: "默认样式" + (index + 1)
indicator : Rectangle { implicitWidth: 20 implicitHeight: 20 radius: 3 border.color: "gray" y: (checkBox.height - height)/2
Rectangle { anchors.centerIn: parent width: 10; height: 10 radius: 2 color: modelData visible: checkBox.checked } } } } }
Column { spacing: 30
Repeater { model: ["gray", "red", "blue"] My.CheckBox { id: checkBox1 text: "圆形样式" + (index + 1) indicator : Rectangle { implicitWidth: 20 implicitHeight: implicitWidth radius: implicitWidth/2 border.color: "#e4846c" y: (checkBox1.height - height)/2
Rectangle { anchors.centerIn: parent width: 10; height: width radius: width/2 color: modelData visible: checkBox1.checked } } } } }
Column { spacing: 30
My.CheckBox { id: checkBox2 text: "符号样式1" indicator : Rectangle { implicitWidth: 20 implicitHeight: implicitWidth border.color: "lightblue" y: (checkBox2.height - height)/2
Text { anchors.centerIn: parent font.pixelSize: 16 text: "√" visible: checkBox2.checked } } }
My.CheckBox { id: checkBox3 text: "符号样式2" indicator : Rectangle { implicitWidth: 20 implicitHeight: implicitWidth border.color: "lightblue" y: (checkBox3.height - height)/2
Text { anchors.centerIn: parent font.pixelSize: 16 text: checkBox3.checked ? "√" : "×" } } }
My.CheckBox { id: checkBox4 text: "符号样式3" indicator : Rectangle { implicitWidth: 20 implicitHeight: implicitWidth border.color: "lightblue" y: (checkBox4.height - height)/2
Text { anchors.centerIn: parent font.pixelSize: 16 text: checkBox4.checked ? "" : "-" } } } } }}本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2019-02-27，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
