Compose实现一个带复选框的列表

1、使用compose新建一个列表item布局

item很简单，由复选框Checkbox和文本Text组成，给文本简单设置一下样式。像对于文本，复选框多了一个选中改变的回调，我们需要再回调中处理数据的绑定，不然点击复选框会没有反应。

@Composable
fun itemLayout(linkMan: LinkMan, onCheckedChange: (Boolean) -> Unit) {
    var isCheck by remember {
        mutableStateOf(linkMan.isCheck)
    }
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp)
    ) {
        Checkbox(checked = isCheck, {
            isCheck = it
            onCheckedChange.invoke(it)
        })
        Text(text = linkMan.linkName, Modifier.align(Alignment.Center))
      }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3～5行代码是定义了一个变量用来存放复选框的选中状态，使用mutableStateOf可以保证在compose中UI的更新。remember有缓存功能，是防止变量的多次初始化。

6～16行是使用Compose来绘制布局，Box相当于FrameLayout,在Box中加载一个复选框和文本控件使用Modifier设置一下简单的属性。

11～14行加载了一个复选框控件，复选框相对于其他控件会多一个选中回调，类似的还有输入框控件TextField。我们可以通过这个回调来将数据和控件进行绑定，以及处理一些业务逻辑。这里需要把这个回调抛到上一级去来处理列表数据的选中状态的更新。

2、使用LazyColumn来实现一个列表

LazyColumn中可以加载单个item和多个item，可以在content属性中来加载item的布局，如果要是加载多个item可以在content回调中使用items。当个可以使用item来加载布局。

 @Composable
    fun checkList(links: MutableList) {
        LazyColumn(content = {
            items(links.size) { index ->
                itemLayout(links[index]) {
                    links[index].isCheck = it
                }
            }
            
            item {
                Button(onClick = {
                    val selectList = viewModel.getSelectList()
                    ToastUtils.show(selectList.joinToString {
                        it.linkName
                    })
                }, modifier = Modifier.fillMaxWidth()) {
                    Text(text = "创建群组", color = Color.White)
                }
            }
            
        })
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

5～7行代码是加载自定义Compose的item的布局 ，回调函数拿到是否是选中的数据，用来更新数据源集合。

10～19新增单个item，创建一个按钮，点击后用来展示选中几个item被选中。