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
}
}
}
可以修改代码,实现其它样式。