一、概述
CheckBox 提供了一个选项按钮,也叫复选框,可以打开(选中)或关闭(未选中)。复选框通常用于从一组选项中选择一个或多个选项。对于较大的选项集,例如列表中的选项,请考虑使用 CheckDelegate,对于大量数据就选用modelview的模式来做。
CheckBox 从 AbstractButton 继承其API。例如,可以使用checked属性设置复选框的状态。还有很多外观也是继承了,像图标,文字设置等等。
二、使用
1. 常见用法
常见的用法,像上面的效果就是下面的代码功能
ColumnLayout {
CheckBox {
checked: true
text: qsTr("First")
}
CheckBox {
text: qsTr("Second")
}
CheckBox {
checked: true
text: qsTr("Third")
}
}
2. 部分检查
除了已检查和未检查状态之外,还有第三种状态:部分已检查。可以使用trstate属性启用部分检查状态。该状态表示无法确定常规的选中/未选中状态;通常是因为其他影响复选框的状态。
例如,当树视图中选择了几个子节点的时候,就需要用这个功能。
层次化的复选框组可以用非独占的ButtonGroup来管理。
Column {
ButtonGroup {
id: childGroup
exclusive: false
checkState: parentBox.checkState
}
CheckBox {
id: parentBox
text: qsTr("Parent")
checkState: childGroup.checkState
}
CheckBox {
checked: true
text: qsTr("Child 1")
leftPadding: indicator.width
ButtonGroup.group: childGroup
}
CheckBox {
text: qsTr("Child 2")
leftPadding: indicator.width
ButtonGroup.group: childGroup
}
}
三、外观定制
1. 效果一
CheckBox也是非常容易定制外观的
import QtQuick 2.12
import QtQuick.Controls 2.12
CheckBox {
id: control
text: qsTr("CheckBox")
checked: true
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
}
}
2. 效果二
这种效果的话,改一些简单的参数,或者用好的图片给替代了就好啦。
CheckBox {
id: control
text: qsTr("CheckBox")
checked: true
leftPadding: indicator.width
ButtonGroup.group: childGroup
indicator: Rectangle {
implicitWidth: 22
implicitHeight: 22
x: control.leftPadding
y: parent.height / 2 - height / 2
radius: 11
border.color: control.down ? "#17a81a" : "#21be2b"
Rectangle {
width: 10
height: 10
x: 6
y: 6
radius: 5
color: control.down ? "#17a81a" : "#21be2b"
visible: control.checked
}
}
contentItem: Text {
text: control.text
font.pixelSize: 14
opacity: enabled ? 1.0 : 0.3
color: control.down ? "#17a81a" : "#21be2b"
verticalAlignment: Text.AlignVCenter
padding: control.indicator.width + control.spacing
}
}