QML入门教程(8) : 自定义CheckBox

QML默认的CheckBox是打√，可以自定义实现如下效果

代码

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

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

    CheckBox {
          id: control1
          text: qsTr(" 英语")
          checked: true
          x:10
          y:10

          indicator: Rectangle {
              implicitWidth: 26
              implicitHeight: 26
              x: control1.leftPadding
              y: parent.height / 2 - height / 2
              radius: 3
              border.color: control1.down ? "#17a81a" : "#21be2b"

              Rectangle {
                  width: 14
                  height: 14
                  x: 6
                  y: 6
                  radius: 2
                  color: control1.down ? "#17a81a" : "#21be2b"
                  visible: control1.checked
              }
          }

          contentItem: Text {
              text: control1.text
              font: control1.font
              opacity: enabled ? 1.0 : 0.3
              color: control1.down ? "#17a81a" : "#21be2b"
              verticalAlignment: Text.AlignVCenter
              leftPadding: control1.indicator.width + control1.spacing
          }
      }

    CheckBox {
          id: control
          text: qsTr("数学")
          checked: false
          x:10
          y:60

          indicator: Rectangle {
              implicitWidth: 26
              implicitHeight: 26
              x: control.leftPadding
              y: parent.height / 2 - height / 2
              radius: 3
              border.color: control.down ? "#17a81a" : "#21be2b"

              Rectangle {
                  width: 14
                  height: 14
                  x: 6
                  y: 6
                  radius: 2
                  color: control.down ? "#17a81a" : "#21be2b"
                  visible: control.checked
              }
          }

          contentItem: Text {
              text: control.text
              font: control.font
              opacity: enabled ? 1.0 : 0.3
              color: control.down ? "#17a81a" : "#21be2b"
              verticalAlignment: Text.AlignVCenter
              leftPadding: control.indicator.width + control.spacing
          }
      }
}

        可以修改代码，实现其它样式。