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 滑竿组件可以手动滑动进度条调节对应的数值
相关推荐
tangweiguo030519873 天前
Android Compose Activity 页面跳转动画详解
android·compose
tangweiguo030519874 天前
在 Jetpack Compose 中实现 iOS 风格输入框
android·compose
tangweiguo0305198712 天前
Android Compose 权限申请完整指南
compose
tangweiguo0305198716 天前
androd的XML页面 跳转 Compose Activity 卡顿问题
compose
tangweiguo0305198716 天前
iOS 风格弹框组件集 (Compose版)
compose
tangweiguo0305198716 天前
Android Material Design 3 主题配色终极指南:XML 与 Compose 全解析
compose
tangweiguo0305198717 天前
Android Compose 中获取和使用 Context 的完整指南
android·compose
tangweiguo0305198719 天前
Jetpack Compose 自定义组件完全指南
compose
tangweiguo0305198721 天前
打破界限:Android XML与Jetpack Compose深度互操作指南
android·kotlin·compose
wavky1 个月前
零经验选手,Compose 一天开发一款小游戏!
compose