如何摆脱RoundedCornerShape的外部白色背景

Question

我正在尝试在圆角矩形中制作一个小指示灯文本，其中圆角矩形的背景根据指示器状态而变化，其余背景为黑色或透明。我发现形状的外角填充的似乎是默认的白色，而不是包含对象背景的颜色。

在这个例子中，根据我的理解，每个背景都应该是绿色、蓝色或红色。图像中的白色位不应该存在。有谁知道怎么了？我是运行 Android Studio 2020.3.1 补丁 3

。

fun IndicatorLight() {
 
    Surface(modifier = Modifier.padding(4.dp)
        .background(Color.Green)) {
        Box(
            modifier = Modifier
                .clip(RoundedCornerShape(20.dp))
                .background(Color.Red)
                .padding(3.dp)
        ) {
            Box(
                modifier = Modifier
                    .padding(4.dp)
                    .background(Color.Blue)
            ) {
                Text(
                    text = text,
                    style = TextStyle(
                        color = foreground,
                        fontWeight = FontWeight.Bold,
                        fontSize = 24.sp
                    )
                )
            }
        }
    }
}

Answer 1

Modifiers 的顺序很重要

fun IndicatorLight() {
 
    Surface(modifier = Modifier.padding(4.dp)
        .background(Color.Green)) {
        Box(
            modifier = Modifier
                .background(Color.Red)
                .padding(3.dp)
                .clip(RoundedCornerShape(20.dp)) // This right here
        ) {
            Box(
                modifier = Modifier
                    .padding(4.dp)
                    .background(Color.Blue)
            ) {
                Text(
                    text = text,
                    style = TextStyle(
                        color = foreground,
                        fontWeight = FontWeight.Bold,
                        fontSize = 24.sp
                    )
                )
            }
        }
    }
}

您应该在应用背景后对其进行剪辑，否则您最终只会将背景应用到被其子项遮蔽的剪辑区域。

Answer 2

您可以从 Box 修饰符中删除 clip 并使用 Surface 函数的 shape 参数来获得所需的布局

@Composable
fun IndicatorLight() {
    Surface(
        modifier = Modifier.padding(4.dp),
        shape = RoundedCornerShape(20.dp)
    ) {

        Box(
            modifier = Modifier
                .background(Color.Red)
                .padding(3.dp)
        ) {
            Box(
                modifier = Modifier
                    .padding(4.dp)
                    .background(Color.Blue)
            ) {
                Text(
                    text = "TEXT",
                    style = TextStyle(
                        color = Color.Black,
                        fontWeight = FontWeight.Bold,
                        fontSize = 24.sp
                    )
                )
            }
        }

    }
}

Answer 3

表面已经有一个名为 color 的属性来更改背景颜色。

所以像这样更改您的代码

Surface(
    color = Color.Green
) {}

如果您希望 Box 从表面获得 4.dp 填充，请从表面移除该填充并将其放入盒子中。是的，修饰符顺序很重要，所以要小心。我在背景之前和之后都添加了填充，这样您就可以通过移除或减少这些填充来测试它的工作原理。

您可以像下面那样更改您的完整代码

Surface(
    color = Color.Green
) {
    Box(
        modifier = Modifier
            .padding(5.dp)
            .clip(RoundedCornerShape(20.dp))
            .background(Color.Red)
            .padding(5.dp)
    ) {
        Box(
            modifier = Modifier
                .padding(5.dp)
                .background(Color.Blue)
                .padding(5.dp)
        ) {
            Text(
                text = "Text",
                style = TextStyle(
                    color = Color.White,
                    fontWeight = FontWeight.Bold,
                    fontSize = 24.sp
                )
            )
        }
    }
}

你会得到这个。

如何摆脱RoundedCornerShape的外部白色背景

How to get rid of the external white background of RoundedCornerShape

android

kotlin

android-jetpack

android-jetpack-compose