在 QML 中，CheckBox 的 indicator 属性可以用来自定义复选框的指示器。通过将 indicator 设置为一个 Rectangle，你可以控制复选框的外观和样式。下面是一个自定义指示器的完整示例：
import QtQuick 2.15
import QtQuick.Controls 2.15
ApplicationWindow {
visible: true
width: 400
height: 300
CheckBox {
x: 120
y: 140
id: control
checked: true
text: qsTr("安徽省马大")
indicator: Rectangle {
width: 20;
height: 20;
color: control.checked ? "green" : "red"
border.color: "black"
radius: 4 // 圆角
// 可以根据 checked 状态添加不同效果或动画
Text {
anchors.centerIn: parent
text: control.checked ? "✓" : ""
font.pixelSize: 16 // 字体大小调整，可以根据需要更改
color: "white" // 字体颜色为白色
}
}
// 响应状态变化时可添加更多交互效果，例如鼠标悬停等
MouseArea {
anchors.fill: parent // 填充整个 CheckBox 区域以响应点击事件
onClicked: {
control.checked = !control.checked; // 切换选中状态
}
}
}
}
示例解析：
- CheckBox：主控件，表示复选框。
- indicator：自定义的矩形作为复选框的指示器，根据
checked状态改变颜色（绿色代表选中，红色代表未选中）。 - Text：显示复选框被选中时的对勾符号（✓）。
- MouseArea：用于处理用户交互（点击）并切换复选框的状态。
注意事项：
- 在自定义指示器时，你可以加入动画或其他视觉效果来提升用户体验。
- 确保设置合适的尺寸和位置，以保证复选框在界面上的可用性和美观性。
如果你有其他需求或者想要实现更多功能，请告诉我！
内容由零声教学AI助手提供，问题来源于学员提问
目录导航
示例解析：
注意事项：
