如何在 Jetpack Compose 上更改 TextField 突出显示的文本颜色?

问题描述

目前正在将我的应用程序转换为 Jetpack compose，但在某些情况下，我在调整当前调色板方面遇到了一些问题.

我的 xml 文件中有一些 TextInputLayout，它们继承了我主题上的 SECUNDARY 颜色的突出显示文本颜色.

...<项目名称=colorPrimary">@color/blue</item><项目名称=colorPrimaryVariant">@color/blue</item><项目名称=colorSecondary">@color/red</item><项目名称=colorSecondaryVariant">@color/red</item>...</风格>

问题是我的 TextField 在 compose 上从 MaterialTheme 上的 PRIMARY 颜色继承了高亮文本颜色.

MaterialTheme(颜色 = 颜色(主要 = Color.Blue，...次要 = Color.Red，...),内容=内容，排版 = MaterialTheme.typography，形状 = MaterialTheme.shapes，){文本域(...)}

我覆盖了 TextField 上的 colors 参数，但似乎没有影响这种颜色.

是否有一种方法可以在不更改 MaterialTheme 上的 colors 的情况下覆盖 compose 上的突出显示颜色?我想避免这种情况，因为它可能会导致其他使用相同主题的屏幕出现问题.

解决方案

文本和文本字段组件用于文本选择的颜色由

In currently transitioning my app to Jetpack compose and I'm facing some problems to adapt my current color palette in some cases.

I have some TextInputLayout on my xml files that inherit the highlight text color from SECUNDARY color on my theme.

<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light.NoActionBar">
    ...
    <item name="colorPrimary">@color/blue</item>
    <item name="colorPrimaryVariant">@color/blue</item>
    <item name="colorSecondary">@color/red</item>
    <item name="colorSecondaryVariant">@color/red</item>
    ...
</style>

The problem is that my TextField on compose inherit the highlight text color from the PRIMARY color on MaterialTheme.

MaterialTheme(
    colors = Colors(
        primary = Color.Blue,
        ...
        secondary = Color.Red,
        ...
    ),
    content = content,
    typography = MaterialTheme.typography,
    shapes = MaterialTheme.shapes,
) {
   TextField(...)
}

I overrode the colors parameter on TextField but none seems to affect this colour.

Would there be a way of overriding the highlight color on compose without changing the colors on MaterialTheme? I would like to avoid that since it could cause problems on other screens that would use same theme.

解决方案

The colors used for text selection by text and text field components are provided by LocalTextSelectionColors.current.

You can provide a custom TextSelectionColors using:

val customTextSelectionColors = TextSelectionColors(
    handleColor = Red,
    backgroundColor = Red.copy(alpha = 0.4f)
)

CompositionLocalProvider(LocalTextSelectionColors provides customTextSelectionColors) {
    TextField(
        value = text,
        onValueChange = { text = it },
        colors = TextFieldDefaults.textFieldColors(cursorColor = Red)
    )
}

If you want to change also the cursor color add colors = TextFieldDefaults.textFieldColors(cursorColor = Red).

这篇关于如何在 Jetpack Compose 上更改 TextField 突出显示的文本颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！