QML项目实战：自定义CheckBox

目录

一.添加模块

import QtQuick.Controls 1.2

import QtQuick.Controls.Styles 1.4

import QtGraphicalEffects 1.15

二.自定义CheckBox

1.CheckBox设置

2.勾选框设置

3.标签部分

4. 状态变化处理

5.文本设置

三.效果

1.当enabled为true

2.当enabled为true

3.当enabled为false

---

一.添加模块

import QtQuick.Controls 1.2

1. 作用: 引入Qt Quick Controls模块，提供了一组常见的UI控件（如按钮、文本框等），用于快速开发现代用户界面。

2. 性质: 这个模块包含了许多预定义的控件和样式，可以大大简化UI开发。版本号1.2表示你正在使用该模块的第1.2版。

import QtQuick.Controls.Styles 1.4

1. 作用: 引入Qt Quick Controls Styles模块，这个模块扩展了Qt Quick Controls模块，提供了一些额外的样式和主题支持。

2. 性质: 通过这个模块，你可以为你的应用程序应用不同的样式和主题，从而改变控件的外观。版本号1.4表示你正在使用该模块的第1.4版。

import QtGraphicalEffects 1.15

1. 作用: 引入Qt Graphical Effects模块，提供了一组图形效果类，用于为UI元素添加视觉效果，如阴影、模糊、渐变等。

2. 性质: 这个模块允许你在应用程序中实现复杂的视觉效果，提升用户体验。版本号1.15表示你正在使用该模块的第1.15版。

二.自定义CheckBox

1.CheckBox设置

activeFocusOnPress：在按下时使复选框获得焦点。

enabled：设置为 true，表示复选框可以被操作。

2.勾选框设置

1.根据 enabled 状态设置矩形的颜色。

2.根据 control.checkedState 的值设置边框颜色。如果 control.checkedState 为真，边框颜色为 #2850FF；否则为白色。

3.根据 control.checkedState 的值设置矩形的不透明度。如果 control.checkedState 等于 Qt.PartiallyChecked，不透明度为 0.5；否则为 1。

4.启用图层效果。 layer.effect: DropShadow { ... } 应用阴影效果，使矩形看起来有立体感

3.标签部分

4. 状态变化处理

5.文本设置

三.效果

1.当enabled为true

没有点击checkbox时，字体为黑色，不显示文本

2.当enabled为true

点击checkbox时，字体为黑色，显示文本并且出现勾选状态

3.当enabled为false

checkbox为不可点击状态，字体为灰色，不显示文本

四.代码

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls         1.2
import QtQuick.Controls.Styles  1.4
import QtGraphicalEffects 1.15

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("CheckBox")

    CheckBox {
        id:_checkbox
        anchors.centerIn: parent
        activeFocusOnPress: true
        enabled:false

        style: CheckBoxStyle {
            spacing:  5

            indicator:Rectangle {
                id:             indRectangle
                width:   36
                height:  36
                radius:         6
                color:          enabled ? "#D7E1F0" : "#8B99B2"
                border.width:   2
                border.color:   control.checkedState ? "#2850FF" : "white"
                opacity:        control.checkedState === Qt.PartiallyChecked ? 0.5 : 1
                Image {
                    anchors.left: parent.left
                    anchors.bottom: parent.bottom
                    anchors.leftMargin: 1
                    anchors.bottomMargin: 1
                    source:     "qrc:/new/CheckSelect.png"
                    visible:     control.checkedState === Qt.Checked ?  true : false
                    mipmap:     true
                    fillMode:   Image.PreserveAspectFit
                }
                //淡阴影
                layer.enabled:      true
                layer.effect:       DropShadow {
                    verticalOffset: 3
                    radius:         8
                    samples:        17
                    color:          "#4d000f43"
                }
            }

            label: Item {
                width:    text.width + 36 * 0.25
                height:   Math.max(text.height, 36)
                baselineOffset: text.baselineOffset

                Text {
                    id:                 text
                    text:               "CheckBox"
                    font.pixelSize:     30
                    font.bold:          enabled ? true : false
                    font.family:        "微软雅黑"
                    color:              enabled ? "black" : "#6379A5"
                }
            }
        }
        onCheckedChanged: {
            console.log("CheckBox状态" +　checkedState)
            _label.visible = !_label.visible
        }
    }

    Label{
        id:_label
        anchors.top: _checkbox.bottom
        anchors.topMargin: 30
        anchors.horizontalCenter: parent.horizontalCenter
        text: "我是按钮状态显示"
        font.pixelSize: 30
        visible: false
    }
}

原文地址：https://blog.csdn.net/qq_48597462/article/details/143562042

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！