前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >兼容Qt4/Qt5版本Qml控件CheckBox

兼容Qt4/Qt5版本Qml控件CheckBox

作者头像
Qt君
发布2019-07-15 16:06:05
1.1K0
发布2019-07-15 16:06:05
举报
文章被收录于专栏:跟Qt君学编程

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

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

属性

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

描述

复选框显示一个可切换(选中)或关闭(未选中)的选项按钮.复选框通常用于从一组选项中选择一个或多个选项.

代码语言:javascript
复制
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)

源码

代码语言:javascript
复制
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        }    }}

示例源码

代码语言:javascript
复制
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 删除

本文分享自 Qt君 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 属性
  • 描述
  • 示例
  • 关于更新
  • 源码
  • 示例源码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档