Android 编写半圆弧形剪辑

Question

我想将

Column

的顶部剪成半圆弧形状，如下所示：

我希望

Column

成为此处所示的空白，其中将包含中心对齐的

Text

。

Column

将位于

Image

之上。我开始尝试使用包含矩形和带有

Modifier.drawBehind

的圆形的

BlendMode

，但在渲染这些形状时遇到了一些困难。有人对如何实现这一目标有任何想法吗？

Answer 1

嗨，我之前使用过自定义形状和类似的东西，代码如下

class CustomTopArcShape(
    private val offsetFromTop: Dp = 50.dp
) : Shape {

    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val height = size.height
        val width = size.width
        val offset = with(density) { offsetFromTop.toPx() }
        
        val path = Path().apply {
            moveTo(0f, height)
            lineTo(width, height)
            lineTo(width, 0f+offset)
            quadraticTo(width*0.5f, 0f, 0f, 0f+offset)
            lineTo(0f, 0f)
            lineTo(0f, height)
        }
        return Outline.Generic(path)
    }

}

这会给我们一个看起来像这样的形状

然后用它来剪辑任何像这样的可组合项

Card(
  modifier = modifier.height(70.dp),
  shape = CustomTopArcShape(),
  colors = CardDefaults.cardColors(containerColor =MaterialTheme.colorScheme.background.increaseValue(0.5f))
) {

}

类似地，在我的用例中，我想要一个自定义的底部栏，它应该看起来像

所以我制作了一个类似于上面代码的自定义形状并得到了最终输出

希望我的回答对您有所帮助，祝您有美好的一天。