jetpack compose – OutlinedTextField 的 errorBorderColor 无法正常工作

huangapple go评论145阅读模式
英文:

jetpack compose - OutlinedTextField errorBorderColor not working

问题

I'm trying to set errorBorderColor of OutlinedTextField to Red but it's not working. Here I give the colors;

@Composable
private fun dateTimePickerColors() = TextFieldDefaults.outlinedTextFieldColors(
     errorBorderColor = Color.Red, 
     disabledTextColor = Color.Gray,
     disabledBorderColor = Color.Gray,
     unfocusedBorderColor = Color.Gray,
     focusedBorderColor = Color.Gray,
     containerColor = Color.White,
)

// it gets value from viewModel according to inputs
val isInputError = viewModel.isError.collectAsState
OutlinedTextField(
     //...
     enabled = false 
     colors = dateTimePickerColors()
     isError = isInputError,
)

Probably the other colors like disabledBorderColor etc. overriding the error color and in the error case, border shows as gray instead of Red;

so how can i make borderColor Red?

Edit:
When I try this;

private fun dateTimePickerColors() = TextFieldDefaults.textFieldColors(
    errorIndicatorColor = Color.Red,
    containerColor = Color.White
)

it changes container color instead of border color.

英文:

I'm trying to set errorBorderColor of OutlinedTextField to Red but it's not working. Here I give the colors;

@Composable
private fun dateTimePickerColors() = TextFieldDefaults.outlinedTextFieldColors(
     errorBorderColor = Color.Red, 
     disabledTextColor = Color.Gray,
     disabledBorderColor = Color.Gray,
     unfocusedBorderColor = Color.Gray,
     focusedBorderColor = Color.Gray,
     containerColor = Color.White,
)

// it gets value from viewModel according to inputs
val isInputError = viewModel.isError.collectAsState
OutlinedTextField(
     //...
     enabled = false 
     colors = dateTimePickerColors()
     isError = isInputError,
)

Probably the other colors like disabledBorderColor etc. overriding the error color and in the error case, border shows as gray instead of Red;

jetpack compose – OutlinedTextField 的 errorBorderColor 无法正常工作

so how can i make bordorColor Red?

Edit:
When I try this;

private fun dateTimePickerColors() = TextFieldDefaults.textFieldColors(
    errorIndicatorColor = Color.Red,
    containerColor = Color.White
)

jetpack compose – OutlinedTextField 的 errorBorderColor 无法正常工作

it changes container color instead of border color.

答案1

得分: 1

代码中的问题是 enabled = false,你需要更改为 enabled = true。然后只有 errorBorderColor = Color.Red 才能正常工作。

如果这是有意的,那么你可以将 disabledBorderColor = Color.Gray 更改为 disabledBorderColor = Color.Red,它将起作用。

另外,你可以尝试使用 outlinedTextFieldColors。这对我有效。

@Composable
private fun dateTimePickerColors() = TextFieldDefaults.textFieldColors(
    errorIndicatorColor = Color.Red,
    ....
)
英文:

The problem in your code is enabled = false you have to change to enabaled = true. Then only errorBorderColor = Color.Red will work.

If it is intentional then you can change your disabledBorderColor = Color.Gray to disabledBorderColor = Color.Red, it will work.

Also you can try with outlinedTextFieldColors. It works for me.

@Composable
private fun dateTimePickerColors() = TextFieldDefaults.textFieldColors(
errorIndicatorColor = Color.Red,
....
)

答案2

得分: 1

使用enabled = false时,不会使用errorBorderColor

你必须使用**disabledBorderColor**并设置条件:

val dateTimePickerColors = TextFieldDefaults.outlinedTextFieldColors(
    disabledTextColor = Color.Gray,
    disabledBorderColor = if (isInputError) Color.Red else Color.Gray,
    containerColor = Color.White,
)

OutlinedTextField(
    value = text,
    onValueChange = {text = it},
    enabled = false,
    colors = dateTimePickerColors,
    isError = isInputError,
)

jetpack compose – OutlinedTextField 的 errorBorderColor 无法正常工作.
jetpack compose – OutlinedTextField 的 errorBorderColor 无法正常工作

英文:

Using enabled = false the errorBorderColor is not used.

You have to use disabledBorderColor using a condition:

    val dateTimePickerColors = TextFieldDefaults.outlinedTextFieldColors(
        disabledTextColor = Color.Gray,
        disabledBorderColor = if (isInputError) Color.Red else Color.Gray,
        containerColor = Color.White,
    )

    OutlinedTextField(
        value = text,
        onValueChange = {text = it},
        enabled = false,
        colors = dateTimePickerColors,
        isError = isInputError,
    )

jetpack compose – OutlinedTextField 的 errorBorderColor 无法正常工作.
jetpack compose – OutlinedTextField 的 errorBorderColor 无法正常工作

huangapple
  • 本文由 发表于 2023年3月9日 19:11:07
  • 转载请务必保留本文链接:https://go.coder-hub.com/75683802.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定