Jetpack Compose选择器怎么使用

2023-05-03,

这篇“Jetpack Compose选择器怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Jetpack Compose选择器怎么使用”文章吧。

    选择器是啥

    选择器主要是指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})
        }

    运行结果如下

    以上就是关于“Jetpack Compose选择器怎么使用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注本站行业资讯频道。

    《Jetpack Compose选择器怎么使用.doc》

    下载本文的Word格式文档,以方便收藏与打印。