撰写 LazyColumn select 一项

Question

我想 select 我的 LazyColumn 中的一项并更改文本颜色。如何确定哪个项目是 selected？

代码：

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)
            }
        }
    }
}

取决于我如何保存它（记住或不记住），如果我点击一个而不是我最后点击的那个，它们只会突出显示两者。

Answer 1

您可以使用 .selectable 修饰符代替 .clickable

类似于：

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})
            )
        }
 }

在你的情况下你可以使用：

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)
            }
        }
    }
}

Answer 2

请注意，在已接受的答案中，每次选择更改时都会重新组合所有项目视图，因为传入 onClick 和 content（属于 Row）的 lambda 是不稳定 (https://developer.android.com/jetpack/compose/lifecycle#skipping).

这里有一种方法可以只重新组合取消选择和选择的项目：

@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
            )
        }
    }
}

请注意传递给 ItemView 的参数如何仅针对其选定状态发生变化的项目发生变化。这是因为 onItemClick lambda 始终相同。

Answer 3

有一个可点击的修改器，可以轻松检测点击，它还提供辅助功能并在点击时显示视觉指示器（例如涟漪）。

@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 }
  )
}

有关详细信息，请参阅 https://developer.android.com/jetpack/compose/gestures

撰写 LazyColumn select 一项

Compose LazyColumn select one item

android

android-jetpack

android-jetpack-compose

android-jetpack-compose-list