Flat風格的Qml單選/複選按鈕
- 2019 年 11 月 24 日
- 筆記
使用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 } } } }
