JetpackCompose之选择器使用实例讲解，

来源：开发者投稿于 2023-05-12 被查看 23768 次评论：213

JetpackCompose之选择器使用实例讲解，

选择器是啥

选择器主要是指Checkbox复选框，单选开关Switch,滑杆组件Slider等用于提供给用户选择一些值和程序交互的组件，比如像复选框Checkbox，可以让用户选择一个或者多个选项，它可以将一个选项打开或者是关闭，通常用来做线上调查问卷或者是模拟考试的场景程序中，再比如滑杆组件可以用来作为调节音量和亮度的数值调整，或者是做进度条。

实例解析

1.Checkbox复选框

Checkbox允许用户从一个集合中选择一个或者多个选项，而且它可以将一个选项打开或者是关闭，下列是Checkbox的参数列表

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

我们可以通过下面的代码了解Checkbox的使用方法

  @Composable
    fun CheckBoxDemo()
    {
        val checkedState = remember {
            mutableStateOf(true)
        }
        Checkbox(checked = checkedState.value, onCheckedChange = {
            checkedState.value = it
        },
        colors = CheckboxDefaults.colors(checkedColor = Color(0xFF0079D3)))
    }

运行结果：

2.TriStateCheckbox三状态选择框

当我们的复选框有很多个的时候，往往希望能够统一选择或者时取消，这种场景下我们就可以使用TriStateCheckbox ，代码如下：

    @Composable
    fun TriStateCheckBoxDemo()
    {
        val(state,onStateChange) = remember {
            mutableStateOf(true)
        }
        val(state2,onStateChange2) = remember {
            mutableStateOf(true)
        }
        val parentState = remember(state, state2) {
            if(state && state2) ToggleableState.On
            else if(!state && !state2) ToggleableState.Off
            else ToggleableState.Indeterminate
        }
        val onParentClick = {
            val s = parentState != ToggleableState.On
            onStateChange(s)
            onStateChange2(s)
        }
        Column(modifier = Modifier.padding(10.dp,0.dp,0.dp,0.dp)) {
            TriStateCheckbox(state = parentState, onClick = onParentClick,
                colors = CheckboxDefaults.colors(checkedColor = MaterialTheme.colors.primary)
            )
            Checkbox(checked = state, onCheckedChange = onStateChange)
            Checkbox(checked = state2, onCheckedChange = onStateChange2)
        }
    }

运行结果如下。

当复选框全选中时，TriStateCheckbox显示已完成的状态，而如果只有部分复选框被选中时，TriStateCheckbox则显示不确定状态，当我们在这个时候点击它时，则会将剩余没有选中的复选框设置为选中状态，当我们去掉所有选中状态时，TriStateCheckbox的状态也被置成了未选中的状态。

3.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() // 开关组的颜色。
)

Switch组件的使用也特别简单，代码如下：

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

运行结果：

4.Slider滑杆组件

slider组件类似于传统视图的SeekBar,可以用来做音量，亮度之类的数值调整或者是进度条，我们先看看它的参数列表

@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() // 滑杆颜色设置，默认值是SliderDefaults.colors
)

其中，colors参数是用于设置滑杆各部位的颜色。滑杆组件中可设置颜色的区域很多，例如滑杆小圆球的颜色，滑杆进度条颜色，滑杆底色等，step参数将进度条平分为（step+1）段，比如当分成两段时，进度条在第一段之间拉动，超过第一段的一半就自动到第一段，没超过就退回到原来的位置，Sliderbar的使用代码如下。

    @Composable
    fun SliderDemo()
    {
        var sliderPosition by remember {
            mutableStateOf(0f)
        }
        Text(text = "%.1f".format(sliderPosition*100) + "%")
        Slider(value = sliderPosition, onValueChange = {sliderPosition = it})
    }

运行结果如下

总结

本文主要介绍了复选框，三状态选择框，单选开关和滑杆组件，读者应该自己手敲一遍，记忆会更加牢靠。在写测试demo的时候，建议读者也尽量使用这些组件，一是可以熟悉他们的使用，二是让自己写的demo更加与众不同

到此这篇关于Jetpack Compose之选择器使用实例讲解的文章就介绍到这了,更多相关Jetpack Compose选择器内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程！

您可能感兴趣的文章:

Jetpack Compose按钮组件使用实例详细讲解
Jetpack Compose图片组件使用实例详细讲解
Jetpack Compose实现对话框和进度条实例解析
Android使用Jetpack Compose开发零基础起步教程
Jetpack Compose基础组件之文字组件
Jetpack Compose实现对角线滚动效果
融会贯通Android Jetpack Compose中的Snackbar
使用Jetpack Compose实现翻转卡片效果流程详解

JetpackCompose之选择器使用实例讲解，