如何在Jetpack Compose中实现容器的圆角化。

Question

我有一个需要完成的设计，它是一个带有白色背景的圆形图标。 我尝试了很多方法，但都没有成功实现。

我附上了我所做的图片和代码。

我目前的设计：

如何应该看起来：

我的代码：

Box(
    modifier = Modifier
        .background(Color.White)
        .clip(RoundedCornerShape(10.dp))
) {
    Icon(
        Icons.Outlined.StarOutline,
        modifier = Modifier
            .size(50.dp)
            .padding(10.dp),
        contentDescription = null
    )
}

- Jhonny Luis

Answer 1

修饰符的顺序很重要,对于你想要实现的可组合性，应该先裁剪，然后再应用白色背景：

Box(
    modifier = Modifier
        .clip(RoundedCornerShape(percent = 50))
        .background(Color.White)
) {
    Icon(
        Icons.Outlined.StarOutline,
        modifier = Modifier
            .size(50.dp)
            .padding(10.dp),
        contentDescription = null
    )
}

我还将RoundedCornerShape设置为50%，使其呈圆形，与期望的输出一致。

- jeprubio

Answer 2

Modifier.background/shadow/border接受形状参数。如果您不想裁剪形状本身，例如限制可点击区域，您也可以使用Modifier.background(color, shape)。

如何给一个Box添加圆形边框？

还有一个预定义的CircleShape。

Box(
    modifier = Modifier
        .background(color = Color.White, shape = CircleShape)
) {
    Icon(
        Icons.Outlined.StarOutline,
        modifier = Modifier
            .size(50.dp)
            .padding(10.dp),
        contentDescription = null
    )
}

- Thracian