如何使用 MaterialTheme 覆盖 Jetpack Compose 中 TextField 中的文本颜色?
How to override the text color in TextField in Jetpack Compose using MaterialTheme?
-
android
-
android-layout
-
android-jetpack-compose
-
android-compose-textfield
-
android-jetpack-compose-text
我正在尝试使用 Jetpack Compose 中的 TextField()
。我希望文本颜色为白色。
我发现这很有效:
ProvideTextStyle(TextStyle(color = Color.White)) {
TextField(
...
)
}
不过,我想在Theme层级覆盖这个,这样我就不需要重复写ProvideTextStyle
。我看到 MaterialTheme
只接受以下参数:
@Composable
fun MaterialTheme(
colors: Colors = MaterialTheme.colors,
typography: Typography = MaterialTheme.typography,
shapes: Shapes = MaterialTheme.shapes,
content: @Composable () -> Unit
)
所以我不确定该怎么做。有人可以帮忙吗?
(compose version = 1.0.0-alpha11)
您可以根据需要 color
创建自己的 TextField
小部件,并在所有地方使用它,
@Composable
fun ColoredTextField(value: String, onValueChange: (String) -> Unit){
ProvideTextStyle(TextStyle(color = Color.White)) {
TextField(value = value, onValueChange = onValueChange)
}
}
现在开始使用 ColoredTextField
而不是 TextField
,通过更改 Widget
中的 color
,它会应用到所有地方。
对于 1.0.x
,TextField
contentColor 基于 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") }
)
}
在 1.0.0-beta07
中,您可以使用 textStyle
属性 来覆盖样式和内容颜色。另请参阅 Styling TextField。
TextField(
...
textStyle = TextStyle(color = Color.Blue)
)
I want to override this in the Theme level
在您的应用的主题可组合项中修改 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
}
}
正如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
。如果需要,这是覆盖从主题继承的颜色的好方法。
android
android-layout
android-jetpack-compose
android-compose-textfield
android-jetpack-compose-text
我正在尝试使用 Jetpack Compose 中的 TextField()
。我希望文本颜色为白色。
我发现这很有效:
ProvideTextStyle(TextStyle(color = Color.White)) {
TextField(
...
)
}
不过,我想在Theme层级覆盖这个,这样我就不需要重复写ProvideTextStyle
。我看到 MaterialTheme
只接受以下参数:
@Composable
fun MaterialTheme(
colors: Colors = MaterialTheme.colors,
typography: Typography = MaterialTheme.typography,
shapes: Shapes = MaterialTheme.shapes,
content: @Composable () -> Unit
)
所以我不确定该怎么做。有人可以帮忙吗?
(compose version = 1.0.0-alpha11)
您可以根据需要 color
创建自己的 TextField
小部件,并在所有地方使用它,
@Composable
fun ColoredTextField(value: String, onValueChange: (String) -> Unit){
ProvideTextStyle(TextStyle(color = Color.White)) {
TextField(value = value, onValueChange = onValueChange)
}
}
现在开始使用 ColoredTextField
而不是 TextField
,通过更改 Widget
中的 color
,它会应用到所有地方。
对于 1.0.x
,TextField
contentColor 基于 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") }
)
}
在 1.0.0-beta07
中,您可以使用 textStyle
属性 来覆盖样式和内容颜色。另请参阅 Styling TextField。
TextField(
...
textStyle = TextStyle(color = Color.Blue)
)
I want to override this in the Theme level
在您的应用的主题可组合项中修改 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
}
}
正如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
。如果需要,这是覆盖从主题继承的颜色的好方法。