Compose | UI组件(六) | 选择框

---

前言

随着移动端的技术不断更新迭代，Compose也运用的越来越广泛，很多人都开始学习Compose

本文主要介绍Compose中 选择器 的含义和基本用法

---

Checkbox 复选框的含义

Checkbox复选框允许用户从一个集合选择一个或多个项目，可以将一个选项打开或关闭

@Composable
fun Checkbox(
    checked: Boolean,                                      //是否被选中
    onCheckedChange: ((Boolean) -> Unit)?,                 //当复选框被点击的回调函数
    modifier: Modifier = Modifier,                         //修饰符
    enabled: Boolean = true,                               //是否启用
    colors: CheckboxColors = CheckboxDefaults.colors(),    //复选框颜色组
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() } //监听组件状态的事件源
)

Checkbox 复选框的使用

Checkbox(checked = checkedState.value,
         onCheckedChange = { checkedState.value=it },
         colors = CheckboxDefaults.colors( checkedColor = Color(0xFF0079D3) ,uncheckedColor = Color(0xFF8869D3))
)

Switch 单选框的含义

Switch可以控制单个项目的开启或关闭状态

@Composable
@Suppress("ComposableLambdaParameterNaming", "ComposableLambdaParameterPosition")
fun Switch(
    checked: Boolean,                         //是否被选中
    onCheckedChange: ((Boolean) -> Unit)?,    //当单选框被点击的回调函数
    modifier: Modifier = Modifier,            //修饰符
    thumbContent: (@Composable () -> Unit)? = null, //自定义选中时的滑块外观
    enabled: Boolean = true,                        //是否启用
    colors: SwitchColors = SwitchDefaults.colors(), //开关组颜色
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, //监听组件状态的事件源
) 

Switch 单选框的使用

Switch(checked = checkedState.value, 
       onCheckedChange = { checkedState.value=it}
)

Slider 滑竿组件的含义

Slider 滑竿组件可以手动滑动进度条调节对应的数值

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Slider(
    value: Float,                     //进度值
    onValueChange: (Float) -> Unit,   //进度改变的监听
    modifier: Modifier = Modifier,    //修饰符
    enabled: Boolean = true,          //是否启用
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,  //进度值的范围，默认0到1
    steps: Int = 0,                   //进度分段
    onValueChangeFinished: (() -> Unit)? = null,    //进度改变完成的监听
    colors: SliderColors = SliderDefaults.colors(), //滑竿颜色
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() } //监听组件状态的事件源
)

Slider 滑竿组件的使用

var sliderPosition by remember{ mutableStateOf(0f) }   //滑竿滑动的位置

Text(text = "%.1f".format(sliderPosition * 100) + "%") //滑动进度计算
Slider(value = sliderPosition, onValueChange = {sliderPosition = it}) //设置进度值

---

总结

1. Checkbox复选框允许用户从一个集合选择一个或多个项目，可以将一个选项打开或关闭
2. Switch可以控制单个项目的开启或关闭状态
3. Slider 滑竿组件可以手动滑动进度条调节对应的数值