如何给一个盒子添加圆形描边？

Question

所以这就是我最终将我的Jetpack Compose盒子变成圆形的方式。

Box(modifier = Modifier
    .size(32.dp)
    .clip(CircleShape)
    .border(BorderStroke(2.dp, Color.Red), CircleShape)
    ){

  }

正如您所看到的，CircleShape 在修改器链中被提到了两次。感觉好像有更好的方法来处理这个问题。

有什么想法吗？

- Muhammad Ahmed AbuTalib

Answer 1

Modifier.clip 是必要的，如果您想要使用链式背景、pointerInput(clickable也是pointerInput)、graphicsLayer或任何需要当前层级的Modifier。使用 Modifier.clip() 可以实现 Modifier.graphicsLayer{clip =true shape=shape} 的效果，图层效果与 Composable 的行为顺序相关。

另一方面，Modifier.border() 是一个 DrawModifier，对于您的Composable没有影响。

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(20.dp)
) {
    Text("Box with Clip and no border shape")
    Box(
        modifier = Modifier
            .clip(CircleShape)
            .border(3.dp, Color.Red)
            .size(100.dp)
            .background(Color.Yellow)
            .clickable { }

    )

    Text("Box with no clip")
    Box(
        modifier = Modifier
            .border(3.dp, Color.Red, CircleShape)
            .size(100.dp)
            .background(Color.Yellow)
            .clickable { }

    )

    Text("Box with  clip and border with shape")
    Box(
        modifier = Modifier
            .clip(CircleShape)
            .border(3.dp, Color.Red, CircleShape)
            .size(100.dp)
            .background(Color.Yellow)
            .clickable { }

    )
}

- Thracian