Android Jetpack编写：无法为OutlinedTextField设置backgroundColor

ruyhziif 于 2022-11-27 发布在 Android

关注(0)|答案(4)|浏览(213)

我是Jetpack合成的新手，正在尝试将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的部分也会发生变化，即使我没有标签：

知道我做错了什么吗？谢谢。

android

来源：https://stackoverflow.com/questions/67320990/android-jetpack-compose-cant-set-backgroundcolor-for-outlinedtextfield

4条答案

按热度按时间

nzk0hqpo1#

我把答案留在这里，因为我没有找到更简单的方法...
您可以定义一个可组合的，它将作为 Package 器+背景工作。

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

赞(0）回复(0）举报 2022-11-27

vlf7wbxs2#

我找到了这个

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形状属性相同，它提供了所需的效果。

赞(0）回复(0）举报 2022-11-27

8cdiaqws3#

使用此

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

赞(0）回复(0）举报 2022-11-27

nr7wwzry4#

你必须这样做
OutlinedTextField（...颜色=文本字段默认值.文本字段颜色（backgroundColor =颜色.白色））以设置文本字段的背景轮廓

赞(0）回复(0）举报 2022-11-27