Android 单击 Jetpack Compose(单选)时，我无法为列表中的单个文本着色

发布于11月24日

我有一个文本的字符串列表，当我点击其中一个时，我应该用一种 colored颜色给它上色，目前我的实现给所有的文本上色，我做错了什么？

var isPressed by remember { mutableStateOf(false) }
    val buttonColor: Color by animateColorAsState(
        targetValue = when (isPressed) {
            true -> FreshGreen
            false -> PastelPeach
        },
        animationSpec = tween()
    )

LazyRow(
        modifier = modifier,
        horizontalArrangement = Arrangement.spacedBy(25.dp)
    ) {
        items(filterList) { filterName ->
            Text(
                text = filterName,
                modifier = Modifier
                    .background(shape = RoundedCornerShape(24.dp), color = buttonColor)
                    .padding(horizontal = 16.dp, vertical = 8.dp)
                    .clickable(
                        interactionSource = remember { MutableInteractionSource() },
                        indication = null
                    ) {
                        isPressed = !isPressed
                        onFilterClick(filterName)
                    }
            )
        }
    }

推荐答案

我修改了你的代码，我降低了动画和按下的状态，这样父合成体就不会受到它自己的re-composition

@Composable
fun MyScreen(
    modifier: Modifier = Modifier,
    filterList: SnapshotStateList<String>
) {
    LazyRow(
        modifier = modifier,
        horizontalArrangement = Arrangement.spacedBy(25.dp)
    ) {

        items(filterList) { filterName ->
            FilterText(
                filterName
            )
        }
    }
}

@Composable
fun FilterText(
    filter: String
) {

    var isPressed by remember { mutableStateOf(false) }
    val buttonColor: Color by animateColorAsState(
        targetValue = when (isPressed) {
            true -> Color.Blue
            false -> Color.Green
        },
        animationSpec = tween()
    )

    Text(
        text = filter,
        modifier = Modifier
            .background(shape = RoundedCornerShape(24.dp), color = buttonColor)
            .padding(horizontal = 16.dp, vertical = 8.dp)
            .clickable {
                isPressed = !isPressed
            }
    )
}