QML QT6 自定义复选框 CheckBox

通过矩形和√自定义复选框控件，包含全选和子项复选框。全选实现三态，样式随意修改。效果如下

QMLCheckBox

源代码如下：

import QtQuick 

import QtQuick.Controls 

ApplicationWindow {

    width: 800

    height: 600

    visible: true

    property int selectAllState: 0

    property color currentColor: "#4CAF50"

    property string selectedItemsText: ""

    signal toggled(int state)

    ListModel {

        id: checkboxModel

        ListElement { text: "梅菜扣肉"; checked: false }

        ListElement { text: "大鸡腿腿"; checked: false }

        ListElement { text: "牛腩豆腐"; checked: false }

        ListElement { text: "蟹黄鸡翅"; checked: false }

        ListElement { text: "麻辣土豆丝"; checked: false }

        ListElement { text: "米饭"; checked: false }

    }

    function updateSelectAllState() {

        var totalChecked = 0;

        var totalItems = checkboxModel.count;

        for (var i = 0; i < totalItems; i++) {

            var item = checkboxModel.get(i);

            if (item.checked) {

                totalChecked++;

            }

        }

        if (totalChecked === totalItems) {

            selectAllState = 2;

        } else if (totalChecked > 0) {

            selectAllState = 1;

        } else {

            selectAllState = 0;

        }

        updateSelectedItemsText();

    }

    function updateAllCheckBoxes(checked) {

        for (var i = 0; i < checkboxModel.count; i++) {

            var item = checkboxModel.get(i);

            checkboxModel.set(i, { text: item.text, checked: checked });

        }

        updateSelectAllState();

    }

    function updateSelectedItemsText() {

        var selectedItems = [];

        for (var i = 0; i < checkboxModel.count; i++) {

            var item = checkboxModel.get(i);

            if (item.checked) {

                selectedItems.push(item.text);

            }

        }

        selectedItemsText = selectedItems.length > 0 ? "已选中: " + selectedItems.join(", ") : "未选中任何项";

    }

    Column {

        spacing: 20

        anchors.centerIn: parent

        // 全选按钮

        Column {

            anchors.left: parent.left

            anchors.leftMargin: -50

            spacing: 10

            width: parent.width

            Row {

                spacing: 10

                width: parent.width

                Rectangle {

                    width: 40

                    height: 40

                    radius: 5

                    color: "lightgray"

                    Rectangle {

                        anchors.fill: parent

                        color: selectAllState === 2 ? currentColor : "lightgray"

                        border.color: currentColor

                        border.width: 3

                        radius: 5

                        Text {

                            text: selectAllState === 2 ? "√" : (selectAllState === 1 ? "-" : "")

                            font.pixelSize: 28

                            font.bold: true

                            color: "white"

                            anchors.centerIn: parent

                        }

                    }

                    MouseArea {

                        anchors.fill: parent

                        onClicked: {

                            if (selectAllState === 2) {

                                updateAllCheckBoxes(false);

                            } else {

                                updateAllCheckBoxes(true);

                            }

                            console.log("Select All state changed to: " + selectAllState);

                            toggled(selectAllState);

                            showSelectedItemsBubble()

                        }

                    }

                }

                Text {

                    text: "全选"

                    font.pixelSize: 24

                    font.bold: true

                    color: "black"

                    verticalAlignment: Text.AlignVCenter

                }

            }

        }

        // 复选框列表

        Column {

            spacing: 15

            width: parent.width

            Repeater {

                id: repeater

                model: checkboxModel

                delegate: Row {

                    spacing: 10

                    Rectangle {

                        width: 30

                        height: 30

                        property bool checked: model.checked

                        Rectangle {

                            anchors.fill: parent

                            color: checked ? currentColor : "lightgray"

                            border.color: currentColor

                            border.width: 2

                            radius: 5

                            Text {

                                text: "√"

                                visible: checked

                                font.pixelSize: 24

                                font.bold: true

                                color: "white"

                                anchors.centerIn: parent

                            }

                        }

                        MouseArea {

                            anchors.fill: parent

                            onClicked: {

                                checked = !checked;

                                model.checked = checked;

                                updateSelectAllState();

                                showSelectedItemsBubble();

                            }

                        }

                    }

                    Text {

                        text: model.text

                        font.pixelSize: 18

                        color: "black"

                        verticalAlignment: Text.AlignVCenter

                    }

                }

            }

        }

        // 

        Rectangle {

            id: bubble

            width: 300

            height: 30

            color: "transparent"

            radius: 15

            anchors.right: parent.right

            anchors.rightMargin: -220

            x:0

            y:200

            opacity: 0

            Column {

                width: parent.width

                spacing: 10

                Text {

                    id: selectedText

                    text: selectedItemsText

                    font.pixelSize: 20

                    font.bold: true

                    color: "#333333"

                    wrapMode: Text.Wrap

                    horizontalAlignment: Text.AlignLeft

                    verticalAlignment: Text.AlignVCenter

                }

            }

            SequentialAnimation {

                id: bubbleAnimation

                running: false

                // 渐入效果

                NumberAnimation { target: bubble; property: "opacity"; from: 0; to: 1; duration: 300 }

                // 下滑效果

                NumberAnimation { target: bubble; property: "y"; from: 110; to: 140; duration: 500; easing.type: Easing.OutBounce }

            }

        }

    }

    function showSelectedItemsBubble() {

        if (bubbleAnimation.running) {

            bubbleAnimation.stop();

        }

        bubbleAnimation.start();

    }

}