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

文章目录

  • 前言
    • [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}) //设置进度值

总结

  1. Checkbox复选框允许用户从一个集合选择一个或多个项目,可以将一个选项打开或关闭
  2. Switch可以控制单个项目的开启或关闭状态
  3. Slider 滑竿组件可以手动滑动进度条调节对应的数值
相关推荐
敲代码不忘补水23 天前
将 Docker Run 命令转换为 Docker Compose 配置:在线工具操作指南
docker·容器·yml·compose·在线转换工具
sziitjin25 天前
Jetpack Compose 02 Compose + ViewModel UI和数据逻辑分离
android·compose·viewmodel
摇曳的精灵2 个月前
单机docker-compose部署minio
运维·docker·容器·文件·minio·compose
challenge51all2 个月前
Compose(7)交互和动画
compose·jetpack
小菜元2 个月前
Java基础学习篇:switch条件语句进阶(最详细版)
java·学习·switch·条件语句·深入学习
challenge51all3 个月前
Compose(10)单元测试
单元测试·compose·jetpack
weixin_443162853 个月前
Compose知识分享
compose
炫酷的伊莉娜3 个月前
【Docker】Docker Compose(容器编排)
运维·docker·容器·compose
醉颜凉4 个月前
Java 中的 switch 语句:类型支持与限制
java·开发语言·面试·职场和发展·switch·switch 语句·类型支持与限制
SharpCJ4 个月前
Jetpack Compose(7)——触摸反馈
kotlin·compose·andorid·jetpack compose