Android Jetpack Compose：无法为 OutlinedTextField 设置 backgroundColor答案

【问题标题】：Android Jetpack Compose: Can't set backgroundColor for OutlinedTextFieldAndroid Jetpack Compose：无法为 OutlinedTextField 设置 backgroundColor
【发布时间】：2021-04-29 15:57:24
【问题描述】：

我是 Jetpack Compose 的新手，正在尝试将 backgroundColor 设置为 OutlinedTextField。

这是我的代码

fun MyTextField() {
    Column(Modifier
        .background(Color.Gray)
        .fillMaxSize()
        .padding(8.dp)
    ) {
        OutlinedTextField(
            value = "text",
            onValueChange = {},
            colors = TextFieldDefaults.outlinedTextFieldColors(
                backgroundColor = Color.White, // does not work
                unfocusedBorderColor = Color.Red,
                textColor = Color.Red
            ),
            // modifier = Modifier.background(Color.White) - works but not as I expected
        )
    }
}

backgroundColor = Color.White 根本不起作用。 OutlinedTextField 保持透明：

当使用modifier时，背景变了，也是为Label保留的部分，即使我没有标签：

任何想法我做错了什么？谢谢。

【问题讨论】：

如果你查看源代码，OutlinedTextFieldLayout 会忽略backgroundColor。不知道是不是有意的

标签： android android-jetpack-compose

【解决方案1】：

我会在这里留下我的答案，因为我没有找到更简单的方法......

您可以定义一个可组合的，它将用作包装器+背景。

@Composable
fun OutlinedTextFieldBackground(
    color: Color,
    content: @Composable () -> Unit
) {
    // This box just wraps the background and the OutlinedTextField
    Box {
        // This box works as background
        Box(
            modifier = Modifier
                .matchParentSize()
                .padding(top = 8.dp) // adding some space to the label
                .background(
                    color, 
                    // rounded corner to match with the OutlinedTextField
                    shape = RoundedCornerShape(4.dp) 
                )
        )
        // OutlineTextField will be the content...
        content()
    }
}

然后你只需要用它包裹你的OutlinedTextField。

OutlinedTextFieldBackground(Color.LightGray) {
    OutlinedTextField(
        modifier = Modifier.fillMaxWidth(),
        value = textState.value,
        onValueChange = { textState.value = it },
        label = {
            Text(
                text = "Name"
            )
        },
    )
}

结果如下：

如您所见，它有效。但正如Sergey Krivenkov 所提到的，这在设计方面可能是一个糟糕的选择，因为标签的一半有一个背景，而另一部分有另一个背景，这可能看起来很奇怪。

【讨论】：

您所附的图片显示了为什么 backgroundColor 在 OutlinedTextField 上不起作用。因为边框有一个间隙，看起来很奇怪——标签的一半有一个背景，另一部分有另一个背景。或者这只是一个错误））
我同意 :) 我只是提供一个可行的解决方案 :P
我用您的评论 @SergeyKrivenkov 编辑了我的答案。谢谢！
感谢您提供有效的解决方案。关于“标签的 2 个背景”，由于这个问题，我只想将它与占位符文本一起使用，而没有标签。
是否已经有任何规范的解决方案？

【解决方案2】：

我找到了这个

Row(
        Modifier
            .background(
                colorResource(id = R.color.col_EEEEEE)
            )
            .align(BottomEnd)
            .padding(10.dp)
    ) {
        OutlinedTextField(
            modifier = Modifier
                .fillMaxWidth()
                .padding(start = 20.dp, end = 20.dp).background(Color.White, RoundedCornerShape(22.dp)),
            shape = RoundedCornerShape(22.dp),
            value = "",
            onValueChange = {},
            textStyle = MaterialTheme.typography.caption
        )
    }

在上面的代码中，我在修饰符中添加了所需的背景颜色和形状。修饰符 shape 属性与OutlinedTextField shape 属性相同，提供所需的效果。

【讨论】：