QML入门教程(6)：单选按钮RadioButton的用法及自定义_qml radiobutton

一 RadioButton的简单用法

QML的单选按钮是RadioButton，例如下面的界面

实现代码如下：

RadioButton {
  id:rb1
  checked: true
  text: qsTr("First")
}
		  
RadioButton {
  id:rb2
  text: qsTr("Second")
}
 
RadioButton {
  id:rb3
  text: qsTr("Third")
}
 
Button{
  text: "获取单选状态"
  onClicked: {
	  console.log("单选按钮1：" + rb1.checked)
	  console.log("单选按钮2：" + rb2.checked)
	  console.log("单选按钮3：" + rb3.checked)
  }
}

可以通过checked属性，获取单选的结果，控制台输出：

qml: 单选按钮1：false

qml: 单选按钮2：true

qml: 单选按钮3：false

二 自定义RadioButton

2.1 自定义效果，可以设置圆圈的半径大小，颜色样式等