android - 如何在jetcompose中制作自定义形状

Question

我想在jetpack compose中制作如下图所示的形状

预期输出

我尝试使用带有夹子和圆角形状的盒子，但未按预期输出工作。

 @Composable
    fun SemiOvalShape() {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.White)
        ) {
            Box(
                modifier = Modifier
                    .fillMaxHeight(.4f)
                    .fillMaxSize(1.0f)
                    .clip(RoundedCornerShape(bottomStart = 180.dp, bottomEnd = 180.dp))
                    .border(2.dp, Color.Red)
                    .background(color = Color.Blue)
            )
        }
    }

Answer 1

您可以使用Canvas来实现这些输出。您可以调整该值以进行更多更改。

预览

代码

@Preview
@Composable
fun Stack03() {
    Canvas(modifier = Modifier.size(400.dp)) {
        drawCircle(
            color = Color(0xFFACBCCB),
            radius = 800f,
            center = Offset(size.width / 2.0f, size.height / 5.0f)
        )
        drawCircle(
            color = Color(0xFF0B305E),
            radius = 775f,
            center = Offset(size.width / 2.0f, size.height / 5.0f)
        )
    }
}