动态更改 clickableText 上的 textDecoration android 撰写

Question

我有大量的文字排成一列，我想让每一个都在按下时改变文字装饰

（因此用户可以注意到已经选择了哪个 text/tag）

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

我尝试过使用变量（这不是一个好主意，因为它需要很多变量），使用布尔值的可变数组（稍后观察为状态）并且 none 带来了结果对我来说，

我们将不胜感激，

谢谢:)

Answer 1

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

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

您还可以将 add/remove 逻辑移动到扩展中，这样您的代码看起来会更清晰：

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

动态更改 clickableText 上的 textDecoration android 撰写

dynamically change textDecoration on clickableText android compose

user-interface

android

button

kotlin

android-jetpack-compose