6

我想选择我的 LazyColumn 中的一项并更改文本颜色。如何识别选择了哪个项目？

代码：

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

根据我保存它的方式（记住或不记住），如果我单击一个，它们只会突出显示两者，而不仅仅是我最后单击的那个。

4

3 回答 3

13

您可以使用.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)
            }
        }
    }
}
于 2021-03-25T07:24:43.277 回答
1

请注意，在接受的答案中，每次选择更改时都会重新组合所有项目视图，因为传入的 lambdaonClick和content(of Row) 不稳定（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仅针对其选定状态更改的项目进行更改。这是因为onItemClicklambda 始终相同。

于 2022-01-28T15:54:22.503 回答
-1

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

@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

于 2022-02-19T14:22:27.937 回答