动态更改clickableText android compose上的textDecoration

Question

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

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

（未选中：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))
...

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

任何数量的帮助将不胜感激，

谢谢:)

Answer 1

您在每次重组时都会创建一个新的

mutableListOf

。这就是为什么新值没有被保存的原因。查看您应该如何在撰写中存储状态。

即使在屏幕旋转后，

rememberSaveable

也会保存您的状态（与

remember

不同），并且

mutableStateListOf

是可变列表的变体，它将通知 Compose 有关更新的信息。如果您需要在离开屏幕并返回时保存状态，请查看查看模型。

您还可以将添加/删除逻辑移至扩展中，以便您的代码看起来更干净：

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