Flat风格的Qml单选/复选按钮

使用Qml的RadioButton与CheckBox控件修改而成。

单选按钮

• RadioButton代码

  import QtQuick 2.0
  import QtQuick.Controls 2.0
  
  RadioButton {
      id: root
  
      property color checkedColor: "#0ACF97"
      text: qsTr("RadioButton")
  
      indicator: Rectangle {
          x: root.leftPadding
          anchors.verticalCenter: parent.verticalCenter
          width: 26; height: width
          antialiasing: true
          radius: width/2
          border.width: 2
          border.color: root.checkedColor
  
          Rectangle {
              anchors.centerIn: parent
              width: parent.width*0.7; height: width
              antialiasing: true
              radius: width/2
              color: root.checkedColor
              visible: root.checked
          }
      }
  }

• RadioButton样式代码

  GridLayout {
      width: root.width
      rows: 5
  
      Repeater {
          model: ["#727CF5", "#0ACF97", "#F9375E", "#FFBC00", "#2B99B9"]
  
          Column {
              spacing: 15
  
              RadioButton {
                  text: "Radio Button 1"
                  checked: true
                  checkedColor: modelData
              }
  
              RadioButton {
                  text: "Radio Button 2"
                  checkedColor: modelData
              }
  
              RadioButton {
                  text: "Radio Button 3"
                  checkedColor: modelData
              }
          }
      }
  }

复选按钮

• CheckBox代码

  import QtQuick 2.0
  import QtQuick.Controls 2.0
  
  CheckBox {
      id: root
  
      property color checkedColor: "#0ACF97"
  
      text: qsTr("CheckBox")
  
      indicator: Rectangle {
          x: root.leftPadding
          anchors.verticalCenter: parent.verticalCenter
          width: 26; height: width
          antialiasing: true
          radius: 5
          border.width: 2
          border.color: root.checkedColor
  
          Rectangle {
              anchors.centerIn: parent
              width: parent.width*0.7; height: width
              antialiasing: true
              radius: parent.radius * 0.7
              color: root.checkedColor
              visible: root.checked
          }
      }
  }

• CheckBox样式源码

  GridLayout {
      width: root.width
      rows: 5
  
      Repeater {
          model: ["#727CF5", "#0ACF97", "#F9375E", "#FFBC00", "#2B99B9"]
  
          Column {
              spacing: 15
  
              CheckBox {
                  text: "Check Button 1"
                  checked: true
                  checkedColor: modelData
              }
  
              CheckBox {
                  text: "Check Button 2"
                  checkedColor: modelData
              }
  
              CheckBox {
                  text: "Check Button 3"
                  checkedColor: modelData
              }
          }
      }
  }

• 更多请关注公众号Qt君