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))
}
}
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<LinkMan>) {
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)
}
}
})
}
5~7行代码是加载自定义Compose
的item
的布局 ,回调函数拿到是否是选中的数据,用来更新数据源集合。
10~19新增单个item
,创建一个按钮,点击后用来展示选中几个item
被选中。