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

Question

这就是我最终给我的jetpack Compose盒子一个圆角形状的方式

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

  }

正如您所看到的，CircleShape 在修改器链中被提及两次。感觉好像必须有更好的方法来做到这一点。

有任何想法吗？

Answer 1

Modifier.clip如果您需要链背景pointerInput（也可以单击指针输入），graphicsLayer或者任何Modifier需要可组合项当前层的背景，则需要。Modifier.clip()Modifier.graphicsLayer{clip =true shape=shape}和图层效果有点像物理存在，Modifier.graphics 的顺序也定义了可组合项的行为方式。

另一方面，Modifier.border() 是一个 DrawModifier，它对可组合项的物理存在没有影响

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

    )
}