返回

兼容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.
源码
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 ? "" : "-"                    }                }            }        }    }}

相关知识