1、使用compose新建一個(gè)列表item布局
item很簡單顿仇，由復(fù)選框Checkbox和文本Text組成，給文本簡單設(shè)置一下樣式摆马。像對于文本臼闻，復(fù)選框多了一個(gè)選中改變的回調(diào)，我們需要再回調(diào)中處理數(shù)據(jù)的綁定囤采，不然點(diǎn)擊復(fù)選框會(huì)沒有反應(yīng)述呐。
@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行代碼是定義了一個(gè)變量用來存放復(fù)選框的選中狀態(tài)，使用mutableStateOf可以保證在compose中UI的更新蕉毯。remember有緩存功能市埋，是防止變量的多次初始化。
6～16行是使用Compose來繪制布局恕刘，Box相當(dāng)于FrameLayout,在Box中加載一個(gè)復(fù)選框和文本控件使用Modifier設(shè)置一下簡單的屬性缤谎。
11～14行加載了一個(gè)復(fù)選框控件，復(fù)選框相對于其他控件會(huì)多一個(gè)選中回調(diào)褐着，類似的還有輸入框控件TextField坷澡。我們可以通過這個(gè)回調(diào)來將數(shù)據(jù)和控件進(jìn)行綁定，以及處理一些業(yè)務(wù)邏輯含蓉。這里需要把這個(gè)回調(diào)拋到上一級(jí)去來處理列表數(shù)據(jù)的選中狀態(tài)的更新频敛。
2、使用LazyColumn來實(shí)現(xiàn)一個(gè)列表
LazyColumn中可以加載單個(gè)item和多個(gè)item馅扣，可以在content屬性中來加載item的布局斟赚，如果要是加載多個(gè)item可以在content回調(diào)中使用items。當(dāng)個(gè)可以使用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 = "創(chuàng)建群組", color = Color.White)
}
}
})
}
5～7行代碼是加載自定義Compose的item的布局 拗军，回調(diào)函數(shù)拿到是否是選中的數(shù)據(jù)任洞，用來更新數(shù)據(jù)源集合。
10～19新增單個(gè)item发侵，創(chuàng)建一個(gè)按鈕交掏，點(diǎn)擊后用來展示選中幾個(gè)item被選中。
