Jetpack Compose TriStateCheckbox,Checkbox，Switch用法详解
这篇文章我们会通过分析TriStateCheckbox，Checkbox，Switch 他们的代码，并且讲解他们每个属性的含义以及用法。
一：TriStateCheckbox
我们来看下TriStateCheckbox的代码
@Composable
fun TriStateCheckbox(
state: ToggleableState,
onClick: (() -> Unit)?,
modifier: Modifier = Modifier,
enabled: Boolean = true,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
colors: CheckboxColors = CheckboxDefaults.colors()
){
...
}
复制代码- state 按钮的状态，有三种ToggleableState.On 中间打钩，ToggleableState.Off不选中,ToggleableState.Indeterminate 中间是横杠的。
- onClick 点击回调
- modifier 修饰符，我们在以前文章讲过Modifier用法详解
- enabled 是否可用
- interactionSource 处理状态的属性，比如按下的时候什么效果，正常时候什么效果，获取焦点时候什么效果等。类似之前再布局文件里写Selector。interactionSource.collectIsPressedAsState() 判断是否按下状态interactionSource.collectIsFocusedAsState() 判断是否获取焦点的状态interactionSource.collectIsDraggedAsState() 判断是否拖动
- colors 设置颜色值CheckboxDefaults.colors(checkedColor,uncheckedColor,disabledColor,checkmarkColor,disabledIndeterminateColor) checkedColor表示选中时候的背景填充的颜色，uncheckedColor没有选中时候的背景颜色，disabledColor不可用时候的背景色，checkmarkColor这个指的是框里面的打钩，横杠图标的颜色。disabledIndeterminateColor当不可用时，且状态ToggleableState.Indeterminate的时候的颜色。
比如我们举例：当是打钩选中的时候，再点击我们变成横杠，当是横杠的时候点击变成不选中，当是不选中的时候，点击变成选中。并且当属于按下状态的时候，我们的背景色改成红色,否则选中背景色是绿色。代码如下
@Preview()
@Composable
fun triStateCheckboxTest(){
val context = LocalContext.current
val interactionSource = remember {
MutableInteractionSource()
}
val pressState = interactionSource.collectIsPressedAsState()
val borderColor = if (pressState.value) Color.Green else Color.Black
var isCheck = remember {
mutableStateOf(false)
}
var toggleState = remember {
mutableStateOf(ToggleableState(false))
}
Column(modifier = Modifier.padding(10.dp,10.dp)) {
TriStateCheckbox(
state = toggleState.value,
onClick = {
toggleState.value = when(toggleState.value){
ToggleableState.On->{
ToggleableState.Indeterminate
}
ToggleableState.Off->ToggleableState.On
else-> ToggleableState.Off
}
},
modifier = Modifier.size(50.dp),
enabled = true,
interactionSource = interactionSource,
colors = CheckboxDefaults.colors(
checkedColor= if(pressState.value) Color.Red else Color.Green,
uncheckedColor = Color.Gray,
disabledColor = Color.Gray,
checkmarkColor = Color.White,
disabledIndeterminateColor = Color.Yellow
)
)
}
}
复制代码二：Checkbox
Checkbox其实内部就是new了个TriStateCheckbox。只是CheckBox没有ToggleableState.Indeterminate的情况，只有选中和不选中。代码如下：
@Composable
fun Checkbox(
checked: Boolean,
onCheckedChange: ((Boolean) -> Unit)?,
modifier: Modifier = Modifier,
enabled: Boolean = true,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
colors: CheckboxColors = CheckboxDefaults.colors()
) {
TriStateCheckbox(
state = ToggleableState(checked),
onClick = if (onCheckedChange != null) { { onCheckedChange(!checked) } } else null,
interactionSource = interactionSource,
enabled = enabled,
colors = colors,
modifier = modifier
)
}
复制代码- checked 是否选中
- onCheckedChange 选中改变的监听
- modifier 修饰符
- enabled 是否可用
- interactionSource 跟上面一样
- colors 跟上面一样
举例：
@Preview()
@Composable
fun checkBoxTest(){
val context = LocalContext.current
val interactionSource = remember {
MutableInteractionSource()
}
val pressState = interactionSource.collectIsPressedAsState()
val borderColor = if (pressState.value) Color.Green else Color.Black
var isCheck = remember {
mutableStateOf(false)
}
Column(modifier = Modifier.padding(10.dp,10.dp)) {
Checkbox(
checked = isCheck.value,
onCheckedChange = {
isCheck.value = it
},
modifier = Modifier.size(50.dp),
enabled = true,
interactionSource = interactionSource,
colors = CheckboxDefaults.colors(
checkedColor= Color.Red,
uncheckedColor = Color.Gray,
disabledColor = Color.Gray,
checkmarkColor = Color.White,
disabledIndeterminateColor = Color.Yellow
)
)
}
}
复制代码三 Switch
Switch 开关控件，代码如下：
@Composable
@OptIn(ExperimentalMaterialApi::class)
fun Switch(
checked: Boolean,
onCheckedChange: ((Boolean) -> Unit)?,
modifier: Modifier = Modifier,
enabled: Boolean = true,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
colors: SwitchColors = SwitchDefaults.colors()
) {
...
}
复制代码- checked 是否选中
- onCheckedChange 选中改变的监听
- modifier 修饰符
- enabled 是否可用
- interactionSource 跟上面一样
- colors 设置各种颜色 通过SwitchDefaults.colors设置，SwitchDefaults.colors的代码如下
@Composable
fun colors(
checkedThumbColor: Color = MaterialTheme.colors.secondaryVariant,
checkedTrackColor: Color = checkedThumbColor,
checkedTrackAlpha: Float = 0.54f,
uncheckedThumbColor: Color = MaterialTheme.colors.surface,
uncheckedTrackColor: Color = MaterialTheme.colors.onSurface,
uncheckedTrackAlpha: Float = 0.38f,
disabledCheckedThumbColor: Color = checkedThumbColor
.copy(alpha = ContentAlpha.disabled)
.compositeOver(MaterialTheme.colors.surface),
disabledCheckedTrackColor: Color = checkedTrackColor
.copy(alpha = ContentAlpha.disabled)
.compositeOver(MaterialTheme.colors.surface),
disabledUncheckedThumbColor: Color = uncheckedThumbColor
.copy(alpha = ContentAlpha.disabled)
.compositeOver(MaterialTheme.colors.surface),
disabledUncheckedTrackColor: Color = uncheckedTrackColor
.copy(alpha = ContentAlpha.disabled)
.compositeOver(MaterialTheme.colors.surface)
): SwitchColors = DefaultSwitchColors(
checkedThumbColor = checkedThumbColor,
checkedTrackColor = checkedTrackColor.copy(alpha = checkedTrackAlpha),
uncheckedThumbColor = uncheckedThumbColor,
uncheckedTrackColor = uncheckedTrackColor.copy(alpha = uncheckedTrackAlpha),
disabledCheckedThumbColor = disabledCheckedThumbColor,
disabledCheckedTrackColor = disabledCheckedTrackColor.copy(alpha = checkedTrackAlpha),
disabledUncheckedThumbColor = disabledUncheckedThumbColor,
disabledUncheckedTrackColor = disabledUncheckedTrackColor.copy(alpha = uncheckedTrackAlpha)
)
复制代码- checkedThumbColor 当没有设置checkedTrackColor的时候。表示选中的背景颜色（圆形部分，包括横的部分）,当有设置checkedTrackColor则该属性只作用再圆形的部分
- checkedTrackColor 这个是表示开关开起来的时候横线部分的背景
- checkedTrackAlpha 这个是表示开关开起来的时候横线部分的背景的透明度
- uncheckedThumbColor 当没有设置uncheckedTrackColor的时候。表示没有选中的背景颜色（圆形部分，包括横的部分）,当有设置uncheckedTrackColor则该属性只作用再圆形的部分
- uncheckedTrackColor 这个是表示开关关闭的时候横线部分的背景
- uncheckedTrackAlpha 这个是表示开关关闭的时候横线部分的背景的透明度
- disabledCheckedThumbColor 表示不可用的时候的并且选中时候背景颜色 有设置disabledCheckedTrackColor则只作用于圆形部分，没有设置disabledCheckedTrackColor则作用于圆形跟横线部分
- disabledCheckedTrackColor 表示不可用的时候并且选中时候的横线部分的背景颜色
- disabledUncheckedThumbColor 表示不可用的时候的并且开关关闭的时候背景颜色 有设置disabledUncheckedTrackColor则只作用于圆形部分，没有设置disabledUncheckedTrackColor则作用于圆形跟横线部分
- disabledUncheckedTrackColor 表示不可用的时候的并且开关关闭的时候的横线部分的背景颜色
@Preview()
@Composable
fun switchTest(){
val context = LocalContext.current
val interactionSource = remember {
MutableInteractionSource()
}
val pressState = interactionSource.collectIsPressedAsState()
val checkedThumbColor = if (pressState.value) Color.Green else Color.Red
var isCheck = remember {
mutableStateOf(false)
}
Column(modifier = Modifier.padding(10.dp,10.dp)) {
Switch(
checked = isCheck.value,
onCheckedChange = {
isCheck.value = it
},
// modifier = Modifier.size(50.dp),
enabled = true,
interactionSource = interactionSource,
colors = SwitchDefaults.colors(checkedThumbColor= checkedThumbColor,checkedTrackColor=Color.Yellow,checkedTrackAlpha = 0.1f)
)
}
} 作者：Bug小明
链接：https://juejin.cn/post/6954206207481479205
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
