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 滑竿组件可以手动滑动进度条调节对应的数值
相关推荐
许三多20203 小时前
Compose Navigation快速入门
compose·navigation·compose 导航
许多仙6 天前
【Android Compose原创组件】可拖动滚动条的完美实现
android·compose·scrollbar·compose快速滚动条
大福是小强15 天前
005-Kotlin界面开发之程序猿初试Composable
kotlin·界面开发·桌面应用·compose·jetpack·可组合
敲代码不忘补水1 个月前
将 Docker Run 命令转换为 Docker Compose 配置:在线工具操作指南
docker·容器·yml·compose·在线转换工具
sziitjin1 个月前
Jetpack Compose 02 Compose + ViewModel UI和数据逻辑分离
android·compose·viewmodel
摇曳的精灵2 个月前
单机docker-compose部署minio
运维·docker·容器·文件·minio·compose
challenge51all3 个月前
Compose(7)交互和动画
compose·jetpack
小菜元3 个月前
Java基础学习篇:switch条件语句进阶(最详细版)
java·学习·switch·条件语句·深入学习
challenge51all3 个月前
Compose(10)单元测试
单元测试·compose·jetpack
weixin_443162853 个月前
Compose知识分享
compose