QML制作滑动球的CheckBox

import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
    id: root
    width: 100
    height: 50

    property bool checked: false

    Rectangle {
        id: background
        width: parent.width
        height: parent.height
        color: checked ? "#00BD5F" : "lightgray"
        radius: 10

        Rectangle {
            id: knob
            width: 25
            height: 25
            color: "white"
            radius: 12
            anchors.verticalCenter: parent.verticalCenter
            x: checked ? parent.width - width : 0
            Binding on x {
                target: knob
                property: "x"
                value: root.checked ? background.width - knob.width : 0
                when: root.checked !== undefined
            }
        }
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            onClicked: {
                checked = !checked;
            }
        }
    }
}