兼容Qt4/Qt5版本Qml控件CheckBox
- 啊南
- 241阅读
- 2021.01.18
复选框显示一个可切换(选中)或关闭(未选中)的选项按钮.
- 导入方法: 文件导入
- 兼容性: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.
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 ? "" : "-" } } } } }}