Jetpack Compose TriStateCheckbox,Checkbox，Switch用法详解

Bug小明
1,685 阅读4分钟

这篇文章我们会通过分析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)
        )
    }
}
avatar
文章
阅读
粉丝