如何在文本可组合项上实现禁用外观

Question

我正在尝试在 Compose 中重新创建首选项屏幕，但我不确定实现项目禁用状态的最佳方式是什么。

这是禁用状态的示例：

使用旧的 TextView，我可以轻松地使用方法 setEnabled()，这将帮助我禁用点击侦听器并更改 textColor。 Text() 可组合项似乎没有实现此功能，所以我想知道是否有一种简单的方法可以实现相同的结果。

理想情况下，我想找到一种简单的方法来获取默认禁用颜色或默认 alpha 以应用于当前文本颜色以实现禁用外观。

Answer 1

我找到了解决方案，但我不确定这是否是最好的：我没有更改文本的颜色，而是使用 Modifier 更改整个可组合项的 alpha 并设置ContentAlpha.disabled:

中定义的值的 alpha

val alpha = if (enabled) 1f else ContentAlpha.disabled
Text(
    modifier = Modifier
        .alpha(alpha = alpha)
        .clickable(enabled = enabled) { onClick() },
    text = "Lorem ipsum",
)

Answer 2

您可以使用 ContentAlpha.disabled.

要将其应用于一堆视图，您可以提供 LocalContentAlpha:

CompositionLocalProvider(
    LocalContentAlpha provides if (enabled) ContentAlpha.high else ContentAlpha.disabled,
) {
    Text("title", color = Color.DarkGray.copy(LocalContentAlpha.current))
    Text("subtitle", color = Color.LightGray.copy(LocalContentAlpha.current))
}

请注意，为了使 LocalContentAlpha 和 LocalContentColor 正常工作，您的 Text color 和 style.color 参数应为 Color.Unspecified（这是默认值）。如果您直接指定它，您可以手动应用 ContentAlpha.disabled：

Text(
    "your text",
    color = Color.Black.copy(alpha = ContentAlpha.disabled),
    // or if you're using colored style
    style = MaterialTheme.typography.body1.let { style ->
        style.copy(color = style.color.copy(alpha = ContentAlpha.disabled))
    },
    // or just apply alpha modifier to the view
    modifier = Modifier.alpha(ContentAlpha.disabled)
)

如何在文本可组合项上实现禁用外观

How to achieve a disabled look on a Text composable

android

material-design

android-jetpack-compose