如何从 jetpack compose 更改 OutlinedTextField 的轮廓颜色？

Question

这是 OutlinedTextField 代码在 jetpack-compose 中的样子：

OutlinedTextField(
    value = "",
    onValueChange = {},
    label = {Text("Input")}
)

此TextField 的默认轮廓颜色为紫色。我想明显地改变轮廓颜色和标签。

Answer 1

OutlinedTextField 使用的默认值定义在 TextFieldDefaults.outlinedTextFieldColors:

focusedBorderColor: Color = MaterialTheme.colors.primary.copy(alpha = ContentAlpha.high),
unfocusedBorderColor: Color = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.disabled),

您可以更改主题中的 colors.primary 和 colors.onSurface。

否则你可以使用类似的东西：

    OutlinedTextField(
        value = "",
        onValueChange = {},
        label = {Text("Input")},
        colors = TextFieldDefaults.outlinedTextFieldColors(
            focusedBorderColor = Green,
            unfocusedBorderColor = Yellow)
    )

Answer 2

1.0.0 beta-1

OutlinedTextField(
    value = "",
    onValueChange = {},
    label = {Text("Input")},
    color = TextFieldDefaults.outlinedTextFieldColors(
            focusedBorderColor: Color = MaterialTheme.colors.primary.copy(alpha = 
              ContentAlpha.high),
            unfocusedBorderColor: Color = MaterialTheme.colors.onSurface.copy(alpha = 
              ContentAlpha.disabled),
            disabledBorderColor: Color = unfocusedBorderColor.copy(alpha =
              ContentAlpha.disabled),
            errorBorderColor: Color = MaterialTheme.colors.error,
    )
)

根据使用上述参数的情况设置边框颜色。

Answer 3

@Preview
@Composable
fun TelephoneEditText() {
    val textValue = remember {
        mutableStateOf("")
    }

    OutlinedTextField(
        label = {
            Text(
                text = stringResource(
                    id = R.string.phoneNumber
                ),
                style = TextStyle(
                    color = MaterialTheme.colors.primaryVariant,
                )
            )
        },
        placeholder = {
            Text(
                text = stringResource(id = R.string.phone_placeholder),
                style = TextStyle(
                    color = MaterialTheme.colors.primaryVariant,
                    textAlign = TextAlign.Center
                )
            )
        },
        colors = TextFieldDefaults.outlinedTextFieldColors(
            focusedBorderColor = MaterialTheme.colors.secondary,
            unfocusedBorderColor = MaterialTheme.colors.secondary,
            focusedLabelColor = MaterialTheme.colors.secondary,
            cursorColor = MaterialTheme.colors.primaryVariant
        ),
        keyboardOptions = KeyboardOptions.Default.copy(keyboardType = KeyboardType.Number),
        value = textValue.value,
        onValueChange = { textValue.value = it },
    )
    WhatsAppButton(textValue)
}

Colors.kt

val Yellow500 = Color(0XFFFFDE03)
val Blue700 = Color(0xFF0036FF)
val Pink500 = Color(0xFFf50057)
val Pink700 = Color(0xFFff5983)

val LightColors = lightColors(
    primary = Yellow500,
    primaryVariant = Blue700,
    secondary = Pink500,
    secondaryVariant = Pink700
)

val DarkColors = darkColors(
    primary = Yellow500,
    primaryVariant = Blue700,
    secondary = Pink700
)

如何从 jetpack compose 更改 OutlinedTextField 的轮廓颜色？

How to change the outline color of OutlinedTextField from jetpack compose?

android

android-theme

android-textinputlayout

material-ui

android-jetpack-compose