在撰写中单击行组件后显示复选标记

Question

我想在单击“行”组件后显示复选 mark/tick 图标。应该只标记一项 - 其他项未标记。这是我的代码：

@Composable
fun ItemRow(viewModel: itemViewModel, item: Item) {

    item.name?.let {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .fillMaxWidth()
                .clickable { / *** / }
                .padding(16.dp)
        ) {
            Icon( / *** / )
            Text(
                text = it,
                / *** /
            )
        }
    }
}

我试过类似的方法，但没有任何改变：

@Composable
fun ItemRow(viewModel: itemViewModel, item: Item) {
    var selectedId = ""
    item.name?.let {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .fillMaxWidth()
                .clickable {
                    selectedId = item.id
                }
                .padding(16.dp)
        ) {
            if (selectedId == item.id) {
                Icon( / *** / )
            }
            Text( /***/ )
        }
    }
}

Answer 1

当您点击每一行以显示对勾图标时，您必须更新您的模型，例如：

data class UiState(val showTickIcon: Boolean = false)

@Composable
fun ItemRow(viewModel: itemViewModel, item: Item) {
    var selectedId = ""
    item.name?.let {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .fillMaxWidth()
                .clickable {
                    viewModel.updateState(true)
                }
                .padding(16.dp)
        ) {
            if (selectedId == item.id) {
                Icon( / *** / )
            }
            Text( /***/ )
        }
    }
}

在视图模型中更新您的状态流

fun updateState(val isTick: Boolean) {
    _uiState.update {
        it.copy(showTickIcon = isTick)
    }
}

当您的模型更新和状态更改时，您的组合函数会重新组合，UI 将更新。

在撰写中单击行组件后显示复选标记

Displaying a check mark after click on Row component in compose

android

kotlin

android-jetpack-compose