如何使用 MaterialTheme 覆蓋 Jetpack Compose 中 TextField 中的文本顏色？

Question

我正在嘗試使用 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-alpha11）

Answer 1

正如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中。 例如，您可以將所有 colors 設為白色：

@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 ，該應用程序使用您的自定義TextFieldColors作為默認參數調用默認TextField ：

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

這樣，您只需要調用MyAppTextField 。 如果需要，這是覆蓋從主題繼承的顏色的好方法。

Answer 2

在1.0.x中， TextField contentColor 基於LocalContentColor.current 。 您可以使用CompositionLocalProvider提供自定義LocalContentColor 。

您可以定義一個自定義 function ，如：

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

Answer 3

我想在主題級別覆蓋它

在應用的可組合主題中修改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將在 App 主題級別使用。

setContent {
    MyAppTheme {
        // app content
    }
}

Answer 4

您可以使用所需的color創建自己的TextField小部件，並在所有地方使用它，

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

現在開始使用ColoredTextField而不是TextField並通過更改Widget中的color ，它將應用於所有地方。

Answer 5

在1.0.0-beta07中，您可以使用textStyle屬性來覆蓋樣式，從而覆蓋內容顏色。 另請參閱樣式化 TextField 。

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

Answer 6

原來的style.xml可以定義為：

<item name="android:textColorPrimary">@color/textColorPrimary</item>

設置

現在您可以在 theme.kt 中定義一個：

val colorSecondary = Color(......)

例如：

private val DarkColorPalette = darkColors(
    primary = colorPrimary,
    primaryVariant = colorPrimary,
    secondary = colorSecondary)

希望它可以幫助你！

Answer 7

使用您自己的Color object 配置配置應用程序的MaterialTheme ，設置內容顏色參數（ onPrimary 、 onSecondary等）。

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

注意：字體colors要生效，必須設置main colors（ primary ， secondary等）。 這是由於androidx.compose.material.Colors::contentColorFor中定義的邏輯。