Android Jetpack Compose：无法设置 OutlinedTextField 的背景颜色

Question

我是 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背景时，即使我没有标签，背景也会改变，但为标签保留的部分也会改变：

有什么想法我做错了什么吗？谢谢。

Answer 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）所提到的，就设计而言，这可能是一个糟糕的选择，因为标签的一半有一种背景，另一部分有另一种背景，这可能看起来很奇怪。

Answer 2

更新：

\n

正如@Blundell正确指出的那样，TextFieldDefaults.outlinedTextFieldColors 已被弃用，目前建议替换为。 \n和OutlinedTextFieldDefaults.colors之间的主要区别是现在使用三个单独的组件，而不是一个\xe2\x80\x94和。colorsoutlinedTextFieldColorscontainerColorfocusedContainerColorunfocusedContainerColordisabledContainerColor

\n

现在以下代码是相关的：

\n

import androidx.compose.material3.OutlinedTextFieldDefaults\n...\nOutlinedTextField(\n    ...\n    colors = OutlinedTextFieldDefaults.colors(\n        focusedContainerColor = Color.White,\n        unfocusedContainerColor = Color.White,\n        disabledContainerColor = Color.White\n    ),\n

\n

旧答案：

\n

使用材质库时，您的代码构建不会出现问题。

\n

import androidx.compose.material.TextFieldDefaults\n...\nOutlinedTextField(\n    ...\n    colors = TextFieldDefaults.outlinedTextFieldColors(\n        backgroundColor = Color.White\n    ),\n

\n

但如果使用了material3TextFieldDefaults.outlinedTextFieldColors ，则没有backgroundColor参数。\n为了实现material3上的正确显示，只需替换backgroundColor为即可containerColor。

\n

import androidx.compose.material3.TextFieldDefaults\n...\nOutlinedTextField(\n    ...\n    colors = TextFieldDefaults.outlinedTextFieldColors(\n        containerColor = Color.White\n    ),\n

\n