android 如何使用MaterialTheme覆盖Jetpack合成中TextField中的文本颜色?

sq1bmfud  于 2022-11-27  发布在  Android
关注(0)|答案(6)|浏览(147)

我正在尝试使用Jetpack Compose的TextField()。我希望文本颜色为白色。
我发现这是工作:

ProvideTextStyle(TextStyle(color = Color.White)) {
   TextField(
       ...
   )
}

但是,我想在主题级别覆盖它,这样我就不需要重复写ProvideTextStyle。我看到MaterialTheme只接受以下参数:

@Composable
fun MaterialTheme(
    colors: Colors = MaterialTheme.colors,
    typography: Typography = MaterialTheme.typography,
    shapes: Shapes = MaterialTheme.shapes,
    content: @Composable () -> Unit
)

所以我不知道该怎么做。有人能帮忙吗?

  • (合成版本= 1.0.0-alpha 11)*
lpwwtiir

lpwwtiir1#

正如Adrian Grygutis在注解中指出的那样,在1.0.0中,TextField有一个参数colors,您可以通过调用TextFieldDefaults.textFieldColors(...)来自定义您的TextField

TextField(
    ...
    colors: TextFieldColors = TextFieldDefaults.textFieldColors(textColor = Color.White),
) {

至于主题化,如果你不想每次都打电话:

ProvideTextStyle(TextStyle(color = Color.White)) {
   TextField(
       ...
   )
}

您可以使用自己的TextFieldColors集合建立可组成的,并将它加入为TextField中的参数。例如,您可以将所有颜色设为白色:

@Composable
fun MyAppTextFieldColors(
    textColor: Color = Color.White,
    disabledTextColor: Color = Color.White,
    backgroundColor: Color = Color.White,
    cursorColor: Color = Color.White,
    errorCursorColor: Color = Color.White,
    ...
) = TextFieldDefaults.textFieldColors(
    textColor = textColor,
    disabledTextColor = disabledTextColor,
    backgroundColor = backgroundColor,
    cursorColor = cursorColor,
    errorCursorColor = errorCursorColor,
    ...
)

为了避免在每个TextField中调用此函数,您可以为应用创建一个自定义MyAppTextField,它调用默认的TextField,并将自定义TextFieldColors作为默认参数:

@Composable
fun MyAppTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    ...
    colors: TextFieldColors = MyAppTextFieldColors(),
) {
    TextField(
        value = value,
        onValueChange = onValueChange,
        modifier = modifier,
        ...
        colors = colors,
    )
}

这样的话,你只需要调用MyAppTextField。如果需要的话,这是一个覆盖从主题继承的颜色的好方法。

pb3s4cty

pb3s4cty2#

M2 TextFieldcontentColor基于LocalContentColor.current。您可以使用CompositionLocalProvider提供自定义的LocalContentColor
您可以定义自定义函数,如下所示:

@Composable
fun ContentColorComponent(
    contentColor: Color = LocalContentColor.current,
    content: @Composable () -> Unit
) {
    CompositionLocalProvider(LocalContentColor provides contentColor,
        content = content)
}

它可以与许多组件一起使用,例如TextField

ContentColorComponent(contentColor = Color.Blue) {
    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}

8ljdwjyq

8ljdwjyq3#

我想在主题级别覆盖此设置
在应用的主题组合中修改MaterialTheme组合的内容以包含TextStyle。

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = {
            ProvideTextStyle(
                value = TextStyle(color = Color.White),
                content = content
            )
        }
    )
}

现在,您提供的TextStyle将在应用程序主题级别使用。

setContent {
    MyAppTheme {
        // app content
    }
}
kpbpu008

kpbpu0084#

您可以使用所需的color创建自己的TextField小部件,并在所有地方使用它,

@Composable
fun ColoredTextField(value: String, onValueChange: (String) -> Unit){
    ProvideTextStyle(TextStyle(color = Color.White)) {
        TextField(value = value, onValueChange = onValueChange)
    }
}

现在开始使用ColoredTextField而不是TextField,通过在Widget中更改color,它将应用于所有位置。

pod7payv

pod7payv5#

1.0.0-beta07中,您可以使用textStyle属性来覆写样式,进而覆写内容色彩。另请参阅设定TextField样式。

TextField(
   ...
   textStyle = TextStyle(color = Color.Blue) 
)
kiayqfof

kiayqfof6#

使用您自己的Color对象配置来配置应用程序的MaterialTheme,设置内容颜色参数(onPrimaryonSecondary等)。

MaterialTheme(
    colors = Colors(
        primary = Color.Black,
        secondary = Color.Black,
        background = Color.Black,
        onPrimary = Color.Red,
        onSecondary = Color.Red,
        onBackground = Color.Red
    )
)

注意:要使字体颜色生效,必须设置主颜色(primarysecondary等)。这是由于androidx.compose.material.Colors::contentColorFor中定义的逻辑。

相关问题