[英]Compose LazyColumn select one item
I want to select one item of my LazyColumn and change the textcolor.我想要 select 我的 LazyColumn 中的一项并更改文本颜色。 How is it possible to identify which item is selected?
如何确定选择了哪个项目?
Code:代码:
val items = listOf(Pair("A", 1), Pair("AA", 144), Pair("BA", 99))
var selectedItem by mutableStateOf(items[0])
LazyColumn {
this.items(items = items) {
Row(modifier = Modifier.clickable(onClick = {selectedItem = it}) {
if (selectedItem == it) {
Text(it.first, color = Color.Red)
} else {
Text(it.first)
}
}
}
}
Depending how I save it (with remember or without) they just highlight both if I click on one and not just the one I clicked the last.取决于我如何保存它(记住或不记住),如果我单击一个而不是我最后单击的那个,它们只会突出显示两者。
You can use the the .selectable
modifier instead of .clickable
您可以使用
.selectable
修饰符而不是.clickable
Something like:就像是:
data class Message(val id: Int,
val message : String)
val messages : List<Message> = listOf(...))
val listState = rememberLazyListState()
var selectedIndex by remember{mutableStateOf(-1)}
LazyColumn(state = listState) {
items(items = messages) { message ->
Text(
text = message.message,
modifier = Modifier
.fillMaxWidth()
.background(
if (message.id == selectedIndex)
Color.Red else Color.Yellow
)
.selectable(
selected = message.id == selectedIndex,
onClick = { if (selectedIndex != message.id)
selectedIndex = message.id else selectedIndex = -1})
)
}
}
In your case you can use:在您的情况下,您可以使用:
var selectedItem by remember{mutableStateOf( "")}
LazyColumn {
this.items(items = items) {
Row(modifier = Modifier.selectable(
selected = selectedItem == it.first,
onClick = { selectedItem = it.first}
)
) {
if (selectedItem == it.first) {
Text(it.first, color = Color.Red)
} else {
Text(it.first)
}
}
}
}
Note that in the accepted answer, all the item views will be recomposed every time the selection changes, because the lambdas passed in onClick
and content
(of Row
) are not stable ( https://developer.android.com/jetpack/compose/lifecycle#skipping ).请注意,在接受的答案中,每次选择更改时都会重新组合所有项目视图,因为在
onClick
和content
( Row
)中传递的 lambdas 不稳定( https://developer.ZC31B323064CE19CA8FCD.com生命周期#skipping )。
Here's one way to do it so that only the deselected and selected items are recomposed:这是一种方法,以便仅重新组合取消选择和选定的项目:
@Composable
fun ItemView(index: Int, selected: Boolean, onClick: (Int) -> Unit){
Text(
text = "Item $index",
modifier = Modifier
.clickable {
onClick.invoke(index)
}
.background(if (selected) MaterialTheme.colors.secondary else Color.Transparent)
.fillMaxWidth()
.padding(12.dp)
)
}
@Composable
fun LazyColumnWithSelection(){
var selectedIndex by remember { mutableStateOf(0) }
val onItemClick = { index: Int -> selectedIndex = index}
LazyColumn(
modifier = Modifier.fillMaxSize(),
){
items(100){ index ->
ItemView(
index = index,
selected = selectedIndex == index,
onClick = onItemClick
)
}
}
}
Note how the arguments passed to ItemView
only change for the items that is deselected and newly selected.请注意传递给
ItemView
的 arguments 如何仅针对取消选择和新选择的项目进行更改。 This is because the onItemClick
lambda is the same all the time.这是因为
onItemClick
lambda 始终相同。
There is a clickable modifier which allows easy detection of a click, and it also provides accessibility features and displays visual indicators when tapped (such as ripples).有一个可点击的修改器,可以轻松检测点击,它还提供辅助功能并在点击时显示视觉指示器(例如涟漪)。
@Composable
fun ClickableSample() {
val count = remember { mutableStateOf(0) }
// content that you want to make clickable
Text(
text = count.value.toString(),
modifier = Modifier.clickable { count.value += 1 }
)
}
For more information see https://developer.android.com/jetpack/compose/gestures有关详细信息,请参阅https://developer.android.com/jetpack/compose/gestures
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.