文章目录
- 前言
-
- [Checkbox 复选框的含义](#Checkbox 复选框的含义)
- [Checkbox 复选框的使用](#Checkbox 复选框的使用)
- [Switch 单选框的含义](#Switch 单选框的含义)
- [Switch 单选框的使用](#Switch 单选框的使用)
- [Slider 滑竿组件的含义](#Slider 滑竿组件的含义)
- [Slider 滑竿组件的使用](#Slider 滑竿组件的使用)
- 总结
前言
随着移动端的技术不断更新迭代,Compose也运用的越来越广泛,很多人都开始学习Compose
本文主要介绍Compose中 选择器 的含义和基本用法
Checkbox 复选框的含义
Checkbox复选框允许用户从一个集合选择一个或多个项目,可以将一个选项打开或关闭
kotlin
@Composable
fun Checkbox(
checked: Boolean, //是否被选中
onCheckedChange: ((Boolean) -> Unit)?, //当复选框被点击的回调函数
modifier: Modifier = Modifier, //修饰符
enabled: Boolean = true, //是否启用
colors: CheckboxColors = CheckboxDefaults.colors(), //复选框颜色组
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() } //监听组件状态的事件源
)
Checkbox 复选框的使用
kotlin
Checkbox(checked = checkedState.value,
onCheckedChange = { checkedState.value=it },
colors = CheckboxDefaults.colors( checkedColor = Color(0xFF0079D3) ,uncheckedColor = Color(0xFF8869D3))
)
Switch 单选框的含义
Switch可以控制单个项目的开启或关闭状态
kotlin
@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 单选框的使用
kotlin
Switch(checked = checkedState.value,
onCheckedChange = { checkedState.value=it}
)
Slider 滑竿组件的含义
Slider 滑竿组件可以手动滑动进度条调节对应的数值
kotlin
@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 滑竿组件的使用
kotlin
var sliderPosition by remember{ mutableStateOf(0f) } //滑竿滑动的位置
Text(text = "%.1f".format(sliderPosition * 100) + "%") //滑动进度计算
Slider(value = sliderPosition, onValueChange = {sliderPosition = it}) //设置进度值
总结
- Checkbox复选框允许用户从一个集合选择一个或多个项目,可以将一个选项打开或关闭
- Switch可以控制单个项目的开启或关闭状态
- Slider 滑竿组件可以手动滑动进度条调节对应的数值