Android Jetpack Compose: 无法为OutlinedTextField设置背景颜色

Question

我是Jetpack Compose的新手，正在尝试将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时，背景会改变，即使我没有标签，也会改变为标签保留的部分：

我做错了什么？有什么建议吗？谢谢。

- Robert Veres

---

如果您检查源代码，OutlinedTextFieldLayout 只是忽略了 backgroundColor。我不知道这是否是有意的。 - Gabriele Mariotti

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 提到的那样，在设计上可能不是一个好选择，因为标签的一半具有一种背景，另一半具有另一种背景，这可能看起来很奇怪。

- nglauber

---

您附上的图片展示了为什么在OutlinedTextField上backgroundColor不起作用。因为边框中有一个间隙，看起来很奇怪 - 标签的一半有一个背景，另一半有另一个背景。 或者这只是一个bug)) - Sergey Krivenkov

我同意 :) 我只是提供一种可行的解决方案 :P - nglauber

我根据@SergeyKrivenkov的评论编辑了我的答案。谢谢！ - nglauber

感谢提供可行的解决方案。关于“标签的两个背景”，我只想在占位文本中使用它，而不是在标签上使用，因为有这个问题。 - Robert Veres

这个问题已经有标准解决方案了吗？ - kaneda

Answer 2

更新：

正如@Blundell正确指出的那样，TextFieldDefaults.outlinedTextFieldColors已经被弃用，并且目前建议使用OutlinedTextFieldDefaults.colors来替代。 colors和outlinedTextFieldColors之间的主要区别在于现在使用了三个单独的组件，而不是一个containerColor — focusedContainerColor，unfocusedContainerColor和disabledContainerColor。

以下代码目前将是相关的：

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

旧答案：

使用material库时，您的代码可以顺利构建。

import androidx.compose.material.TextFieldDefaults
...
OutlinedTextField(
    ...
    colors = TextFieldDefaults.outlinedTextFieldColors(
        backgroundColor = Color.White
    ),

然而，如果使用了material3，那么TextFieldDefaults.outlinedTextFieldColors就没有backgroundColor参数。 为了在material3上实现正确的显示，只需将backgroundColor替换为containerColor。

import androidx.compose.material3.TextFieldDefaults
...
OutlinedTextField(
    ...
    colors = TextFieldDefaults.outlinedTextFieldColors(
        containerColor = Color.White
    ),

- Victor Sklyarov

---

这是我能够设置编辑字段背景颜色并保持错误文本背景不变的唯一方法。谢谢！ - racs

现在似乎是使用focusedContainerColor和unfocusedContainerColor来表示M3。 - undefined

Answer 3

我找到了这个。

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

在上述代码中，我使用修饰符为形状添加了所需的背景颜色。修饰符形状属性与OutlinedTextField形状属性相同，从而产生所需的效果。

- Gaurav Pawar

---

注意：在res/values文件夹下的colors.xml文件中添加所需的颜色。 例如：<color name="col_EEEEEE">#EEEEEE</color> - Jincy P Janardhanan

Answer 4

你必须这样做

OutlinedTextField(
                ...
                colors = TextFieldDefaults.textFieldColors(
                        backgroundColor =Color.White
                    )
                )

为了设置背景轮廓文本框

- Su Bu

---

Material3 中不再有此参数，请使用 containerColor 代替。 - racs

Answer 5

你可以使用这个：

TextField(
...
colors = TextFieldDefaults.colors(
                    unfocusedContainerColor = Color.White,
                    focusedContainerColor = Color.White,
                )
...
)

- m.sajjad.s

Answer 6

使用以下TextFieldDefaults.textFieldColors属性来更改背景颜色。

     OutlinedTextField(
         value = exampleName ?: "",
         onValueChange = onExampleChange,
         colors = TextFieldDefaults.textFieldColors(
                textColor = MaterialTheme.colors.onSurface,
                disabledTextColor = Color.Transparent,
                backgroundColor = MaterialTheme.colors.surface,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent,
                disabledIndicatorColor = Color.Transparent
            ),
    )

- AIroot

Answer 7

使用这个

OutlinedTextField(
                modifier = modifier,
                value = text,
                label = label,
                onValueChange = {
                 text=it
                },
                colors = TextFieldDefaults.textFieldColors(
                        backgroundColor =Color.White
                    )
                )

- DartLuke

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

Answer 8

TextField(
        value = user, { text -> user = text },

        modifier = Modifier
            .fillMaxWidth()
            .height(60.dp)
            .padding(start = 64.dp, end = 64.dp, bottom = 8.dp)
            .background(color = Color.White)
            .border(
                1.dp, color = Color(android.graphics.Color.parseColor("#7d32a8")),

                shape = RoundedCornerShape(50)


            ),
        shape = RoundedCornerShape(50),
        textStyle = TextStyle(
            textAlign = TextAlign.Center,
            color = Color(android.graphics.Color.parseColor("#7d32a8")),
            fontSize = 14.sp
        ),
        colors = TextFieldDefaults.textFieldColors(
            focusedIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            containerColor = Color.White // here add containerColor not backgroundColor

// backgroundColor is not working !!!

        ),


        )

- Qobil