文章目录
- 前言
- Checkbox 复选框的含义
- Checkbox 复选框的使用
- Switch 单选框的含义
- Switch 单选框的使用
- Slider 滑竿组件的含义
- Slider 滑竿组件的使用
- 总结
前言
随着移动端的技术不断更新迭代,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到1steps: 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}) //设置进度值
总结
- Checkbox复选框允许用户从一个集合选择一个或多个项目,可以将一个选项打开或关闭
- Switch可以控制单个项目的开启或关闭状态
- Slider 滑竿组件可以手动滑动进度条调节对应的数值