Jetpack Compose(六)-选择器

一、Checkbox复选框

先看看Checkbox的参数：

@Composable
fun Checkbox(
    checked: Boolean,     //是否被选中
    onCheckedChange: ((Boolean) -> Unit)?,    //当复选框被点击时的状态改变的回调
    modifier: Modifier = Modifier,
    enabled: Boolean = true,     //是否启用复选框
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    colors: CheckboxColors = CheckboxDefaults.colors()    //复选框的颜色组
) {...}

下面是一个简单的例子

@Composable
fun Greeting() {
    val checkState = remember {
        mutableStateOf(true)
    }
    Checkbox(checked = checkState.value, onCheckedChange = {
        checkState.value = it
        showToast("当前选中状态:$it")
    })
}

UI效果

但是似乎想修改Checkbox的图标是一件很麻烦的事情，可以另辟蹊径使用其他组件实现，代码如下：

@Composable
fun Greeting() {
    //选中状态
    var checkState = false
    //图标
    val image = remember {
        mutableStateOf(R.drawable.checkbox_nol)
    }
    //使用IconButton
    IconButton(onClick = {
        checkState = !checkState
        image.value = if (checkState) R.drawable.checkbox else R.drawable.checkbox_nol
    }) {
        Image(painter = painterResource(id = image.value), contentDescription = null)
    }
}

UI效果

如果有其他实现方式欢迎留言！多谢！

二、TriStateCheckbox三态选择框

先看看TriStateCheckbox的参数：

@Composable
fun TriStateCheckbox(
    state: ToggleableState,
    onClick: (() -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    colors: CheckboxColors = CheckboxDefaults.colors()
) {...}

看下面的例子

@Composable
fun Greeting() {
    //为2个CheckBox定义状态，注意解构的写法
    val (state, onStateChange) = remember {
        mutableStateOf(false)
    }
    val (state2, onStateChange2) = remember {
        mutableStateOf(false)
    }
    //根据子CheckBox的状态设置TriStateCheckbox的状态
    val parentState = remember(state, state2) {
        if (state && state2) {
            ToggleableState.On
        } else if (!state && !state2) {
            ToggleableState.Off
        } else {
            ToggleableState.Indeterminate
        }
    }

    //TriStateCheckbox可以为从属的复选框设置状态
    val onParentClick = {
        val s = parentState != ToggleableState.On
        onStateChange(s)
        onStateChange2(s)
    }

    //将3个组件放在一起展示
    Column {
        TriStateCheckbox(state = parentState, onClick = onParentClick)
        Checkbox(
            checked = state,
            modifier = Modifier.padding(10.dp),
            onCheckedChange = onStateChange
        )
        Checkbox(
            checked = state2,
            modifier = Modifier.padding(10.dp),
            onCheckedChange = onStateChange2
        )
    }
}

UI效果

实际运用场景应该不大。

三、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()  //各种颜色
) {...}

其中SwitchColors可以定义的颜色有如下这些：

val switchColors = SwitchDefaults.colors(
    checkedThumbColor = Color.Red,  //设置选中状态下的滑块颜色
    checkedTrackColor = Color.Green, //设置选中状态下的轨道颜色
    uncheckedThumbColor = Color.Gray,  //设置未选中状态下的滑块颜色
    uncheckedTrackColor = Color.LightGray,  //设置未选中状态下的轨道颜色
    disabledCheckedThumbColor = Color.LightGray, //设置禁用并选中状态下的滑块颜色
    disabledCheckedTrackColor = Color.LightGray,  //设置禁用并选中状态下的轨道颜色
    disabledUncheckedThumbColor = Color.LightGray, //设置禁用并未选中状态下的滑块颜色
    disabledUncheckedTrackColor = Color.LightGray   //设置禁用并未选中状态下的轨道颜色
)

下面看一个最简单的例子：

@Composable
fun Greeting() {
    val checkedState = remember {
        mutableStateOf(false)
    }
    Switch(checked = checkedState.value, onCheckedChange = { checkedState.value = it })
}

UI效果

四、Slider滑竿组件

Slider类似于传统视图的Seekbar，可用来做音量、亮度之类的数值调整或者进度条。先看看Slider的参数：

@Composable
fun Slider(
    value: Float,   //进度值
    onValueChange: (Float) -> Unit,   //进度改变的监听
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,    //进度值的范围,默认0到1
    /*@IntRange(from = 0)*/
    steps: Int = 0,   //进度分段
    onValueChangeFinished: (() -> Unit)? = null,   //进度改变完成的监听
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    colors: SliderColors = SliderDefaults.colors()   //滑竿颜色设置
) {...}

下面是一个代码示例：

@Composable
fun Greeting() {
    val sliderPosition = remember {
        mutableStateOf(0F)
    }

    Column {
        Slider(value = sliderPosition.value, onValueChange = { sliderPosition.value = it })
        Text(text = "%.1f".format(sliderPosition.value * 100) + "%")
    }
}

UI效果

---

Slider滑竿组件中可设置颜色的区域很多，例如滑竿小圆球的颜色、滑竿进度颜色、滑竿底色等。看下设置颜色的源码：

@Composable
fun colors(
    thumbColor: Color = MaterialTheme.colors.primary,    //滑块颜色
    disabledThumbColor: Color = MaterialTheme.colors.onSurface   //禁用状态下的滑块颜色
        .copy(alpha = ContentAlpha.disabled)
        .compositeOver(MaterialTheme.colors.surface),
    activeTrackColor: Color = MaterialTheme.colors.primary,   //滑块经过部分的颜色
    inactiveTrackColor: Color = activeTrackColor.copy(alpha = InactiveTrackAlpha),   //滑块未经过部分的颜色
    disabledActiveTrackColor: Color =
        MaterialTheme.colors.onSurface.copy(alpha = DisabledActiveTrackAlpha),
    disabledInactiveTrackColor: Color =
        disabledActiveTrackColor.copy(alpha = DisabledInactiveTrackAlpha),
    activeTickColor: Color = contentColorFor(activeTrackColor).copy(alpha = TickAlpha),  //如果指定了步数，则用于在已滑过的轨道上绘制刻度线的颜色
    inactiveTickColor: Color = activeTrackColor.copy(alpha = TickAlpha),   //如果指定了步数，则用于在未滑过的轨道上绘制刻度线的颜色
    disabledActiveTickColor: Color = activeTickColor.copy(alpha = DisabledTickAlpha),
    disabledInactiveTickColor: Color = disabledInactiveTrackColor
        .copy(alpha = DisabledTickAlpha)
): SliderColors

注释中标明了各种颜色，并且可以发现很多颜色都是通过改变alpha来得到的：

// 滑条未经过部分的默认 alpha 值
const val InactiveTrackAlpha = 0.24f

// 当滑条被禁用的状态下已经过部分的默认 alpha 值
const val DisabledInactiveTrackAlpha = 0.12f

// 当滑条被禁用的状态下未经过部分的默认 alpha 值
const val DisabledActiveTrackAlpha = 0.32f

// 在滑条上方显示的刻度的默认的 alpha 值
const val TickAlpha = 0.54f

// 当刻度线被禁用时，默认的 alpha 值
const val DisabledTickAlpha = 0.12f

从源码中可以知道，设置滑块滑过的区域的颜色是activeTrackColor, 而滑块未滑过的区域的颜色是inactiveTrackColor，它将activeTrackColor复制，并且设置了0.24f的透明度。所以一般来说，我们只需要设置activeTrackColor的值就可以改变滑条的总体颜色（滑过和未滑过的区域）。

---

接下来看看step参数。step参数（默认steps=0）将进度条平分成（steps+1）段。比如当分成2段（steps=1）时，进度条在第一段之间拉动，如果超过第一段的一半就自动到第一段的末尾，如果没超过就退回到第一段的开始位置。看下面的代码：

@Composable
fun Greeting() {
    val sliderPosition = remember {
        mutableStateOf(0F)
    }

    Column {
        Slider(
            value = sliderPosition.value,
            onValueChange = { sliderPosition.value = it },
            steps = 2        //变化在这里
        )
        Text(text = "%.1f".format(sliderPosition.value * 100) + "%")
    }
}

UI效果

参考了以下内容

Jetpack Compose博物馆

实体书 Jetpack Compose从入门到实战

如有错误或不足欢迎批评或补充，多谢！！！