Qt/QML学习-自定义CheckBox

QML学习

• 自定义CheckBox例程
• 视频讲解
• 代码

  main.qml

  import QtQuick 2.15
  import QtQuick.Window 2.15
  import QtQuick.Controls 2.15
  Window {
      width: 640
      height: 480
      visible: true
      title: qsTr("Hello World")
      CheckBox {
          id: checkBox
          font.pointSize: 30
          text: "放假当宅宅"
          tristate: true
          onCheckStateChanged: {
              switch (checkState) {
              case Qt.Checked:
                  logText.text = text+":\nChecked"
                  break
              case Qt.PartiallyChecked:
                  logText.text = text+":\nPartiallyChecked"
                  break
              default:
                  logText.text = text+":\nUnChecked"
                  break
              }
          }
          background: Rectangle {
              color: "blue"
              width: checkBox.implicitWidth
          }
          contentItem: Text {
              text: checkBox.text
              color: "yellow"
              font.pixelSize: 30
              horizontalAlignment: Text.AlignHCenter
              verticalAlignment: Text.AlignVCenter
              leftPadding: checkBox.indicator.width
          }
          indicator: Rectangle {
              color: "transparent"
              width: image.width
              height: checkBox.height
              Image {
                  id: image
                  anchors.centerIn: parent
                  height: checkBox.height
                  source: checkBox.getCheckState()
                  fillMode: Image.PreserveAspectFit
              }
          }
          function getCheckState() {
              switch (checkBox.checkState) {
              case Qt.Checked:
                  return "qrc:/Checked.png"
              case Qt.PartiallyChecked:
                  return "qrc:/PartiallyChecked.png"
              default:
                  return "qrc:/UnChecked.png"
              }
          }
      }
      Rectangle {
          anchors.top: checkBox.bottom
          width: logText.width
          height: logText.height
          color: "yellow"
          Text {
              id: logText
              font.pointSize: 30
              text: "点赞+关注"
          }
      }
  }
  

  演示

  • 视频讲解