当前位置: 首页 > article >正文

Compose笔记(九)--Checkbox

        这一节主要了解一下Compose中的Checkbox,它是Jetpack Compose UI框架中的一个组件,用于创建复选框功能。它允许用户从一个集合中选择一个或多个项目,可以将一个选项打开或关闭。与传统的Android View系统中的Checkbox相比,Compose中的Checkbox更注重状态的变化,而不包含文本部分。

常用属性
1. checked
用于指定 CheckBox 的当前选中状态,类型为 Boolean。
2. onCheckedChange
是一个 (Boolean) -> Unit 类型的回调函数,当用户点击 CheckBox 时会触发该回调,并将新的选中状态作为参数传递进来。
3. enabled
类型为 Boolean,用于控制 CheckBox 是否可点击。当设置为 false 时,CheckBox 变为不可用状态,用户无法点击它。
4. colors
用于自定义 CheckBox 在不同状态下的颜色,通过 CheckboxDefaults.colors 方法可以设置选中颜色、未选中颜色、勾选标记颜色等。

栗子:

// 自定义颜色
@Composable
fun CustomColorCheckBoxExample() {
    var checkedState by remember {  mutableStateOf(false) }
    Column(
        modifier = Modifier,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Checkbox(
            checked = checkedState,
            onCheckedChange = { checkedState = it },
            colors = CheckboxDefaults.colors(
                checkedColor = Color.Green,
                uncheckedColor = Color.Red,
                checkmarkColor = Color.White
            )
        )
        Text(text = if (checkedState) "Checked" else "Unchecked"
        , modifier = Modifier.padding(start = 6.dp))
    }
}
//自定义icon
@Composable
fun CustomIconCheckBoxExample() {
    var checkedState by remember {  mutableStateOf(false) }
    Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Center
    ) {
        Icon(
            imageVector = if (checkedState) Icons.Default.Check else Icons.Default.Close,
            contentDescription = null,
            tint = if (checkedState) Color.Green else Color.Red,
            modifier = Modifier
                .size(30.dp)
                .clickable { checkedState = !checkedState }
        )
    }
}
//自定义大小
@Composable
fun CustomSizeCheckBoxExample() {
    var checkedState by remember {  mutableStateOf(false) }
    Column(
        modifier = Modifier,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Checkbox(
            checked = checkedState,
            onCheckedChange = { checkedState = it },
            modifier = Modifier.size(30.dp)
        )
        Text(text = if (checkedState) "Checked" else "Unchecked")
    }
}

全选/反选

data class Option(val id: Int, val name: String, var isChecked: Boolean = false)

@Composable
fun CheckBoxWithSelectAll() {
    val options  =  remember { mutableListOf(
        Option(1, "选项1"),
        Option(2, "选项2"),
        Option(3, "选项3")
    ) }

    var isAllChecked  by remember  { mutableStateOf(false) }

    Column {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.padding(8.dp)
        ) {
            Checkbox(
                checked = isAllChecked,
                onCheckedChange = {
                    isAllChecked = it
                    options.forEach { option -> option.isChecked = it }
                }
            )
            Text(text = "全选", modifier = Modifier.padding(start = 8.dp))
        }

        options.forEach { option ->
            Row(
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier.padding(8.dp)
            ) {
                Checkbox(
                    checked = option.isChecked,
                    onCheckedChange = {
                        option.isChecked = it
                        isAllChecked = options.all { opt -> opt.isChecked }
                    }
                )
                Text(text = option.name, modifier = Modifier.padding(start = 8.dp))
            }
        }
    }
}

注意:

1 布局适配,Checkbox 本身没有直接设置大小的属性,但可以通过 Modifier.size 来调整其大小。

2 点击事件处理,onCheckedChange 回调用于处理 CheckBox 的点击事件。确保在回调中执行的操作不会阻塞主线程,避免影响用户体验。例如,如果需要在点击时进行网络请求或复杂计算,应该使用协程等异步方式处理。


http://www.kler.cn/a/590404.html

相关文章:

  • [数据结构]排序之 快速排序详解(递归版非递归版)
  • 游戏引擎学习第162天
  • 2025年高职大数据可视化实训室建设及实训平台整体解决方案
  • Vue秘籍:如何动态修改页面 Title(浏览器页签名称)?
  • idea cpu干到100%的解决方法?
  • HarmonyOS NEXT开发实战——HUAWEI DevEco Studio 开发指南
  • 车载以太网测试-13【网络层-IGMP协议】
  • 【Godot】Viewpoint
  • mapbox基础,使用线类型geojson加载symbol符号图层,用于标注文字
  • 解锁智慧养老新可能,全面提升养老生活质量
  • Go语言中的错误处理与异常恢复:性能对比与实践思考
  • 【leetcode】51.N皇后
  • 如何检查CMS建站系统的插件是否安全?
  • 《灵珠觉醒:从零到算法金仙的C++修炼》卷三·天劫试炼(60)五火七禽扇灭火 - 接雨水(双指针与动态规划)
  • Kubernetes Network Policy使用场景
  • 微软远程桌面即将下架?Splashtop:更稳、更快、更安全的 RDP 替代方案
  • Django 5实用指南(十四)项目部署与性能优化【完】
  • 调用华为云API实现口罩识别
  • 从以太网 II 到 VLAN 和 Jumbo Frame:数据帧格式解读
  • 前端面试:如何减少项目里面 if-else?