在clickableText android compose上动态更改textDecoration答案

【问题标题】：dynamically change textDecoration on clickableText android compose在clickableText android compose上动态更改textDecoration
【发布时间】：2021-11-02 15:08:51
【问题描述】：

我连续有大量文本，我想让它们中的每一个都在按下时更改文本装饰

（因此用户可以注意到已经选择了哪个文本/标签）

（未选中：TextDecoration.None，选中：TextDecoration：下划线）

（用户可以按选中的文本来取消选中它）

var tagsSelected = mutableListOf<String>()

...
Text(text = "tech",
                    Modifier.clickable {
                    if (tagsSelected.contains("tech")) {
                        tagsSelected.remove("tech")
                        // RemoveTextDecoration ?
                    } else {
                        tagsSelected.add("tech")
                        // AddTextDecoration ?
                    }
                }.padding(5.dp))
...

我尝试过使用变量（不是一个好主意，因为它需要很多变量），使用可变的布尔值数组（后来被观察为状态），但这些都没有给我带来结果，

我们将不胜感激，

谢谢:)

【问题讨论】：

标签： android kotlin user-interface button android-jetpack-compose

【解决方案1】：

您正在为每次重组创建一个新的mutableListOf。这就是为什么没有保存新值的原因。看看你应该如何store state in compose。

rememberSaveable 即使在屏幕旋转后也会保存您的状态（与remember 不同），mutableStateListOf 是可变列表的一种变体，它将通知 Compose 更新。我即使离开屏幕然后回来也需要保存状态，请查看view models。

您还可以将添加/删除逻辑移动到扩展中，这样您的代码会看起来更干净：

fun <E> MutableList<E>.addOrRemove(element: E) {
    if (!add(element)) {
        remove(element)
    }
}

最终变体：

val tagsSelected = rememberSaveable { mutableStateListOf<String>() }

Text(
    text = "tech",
    modifier = Modifier
        .clickable {
            tagsSelected.addOrRemove("tech")
        }
        .padding(5.dp)
    )

如果您有许多看起来相同的Text 项目，您可以使用forEach 重复它们：

val tagsSelected = rememberSaveable { mutableStateListOf<String>() }
val items = listOf(
    "tech1",
    "tech2",
    "tech3"
)
items.forEach { item ->
    Text(
        text = item,
        modifier = Modifier
            .clickable {
                tagsSelected.addOrRemove(item)
            }
            .padding(5.dp)
    )
}

如果您只需要使用选择状态来更改文本装饰，您可以轻松地将其移动到其他可组合项并创建一个局部变量：

@Composable
fun ClickableDecorationText(
    text: String,
) {
    var selected by rememberSaveable { mutableStateOf(false) }
    Text(
        text = text,
        textDecoration = if(selected) TextDecoration.Underline else TextDecoration.None,
        modifier = Modifier
            .clickable {
                selected = !selected
            }
            .padding(5.dp)
    )
}

【讨论】：