如何在 Jetpack Compose 中创建带有虚线的卡片视图以进行分离

Question

我想在 jetpack compose 中创建几张用破折号分隔的卡片，但我不知道它是如何创建的。有谁知道它是如何创建的？ 注意：这不是一张卡片，有几张卡片用破折号隔开，破折号的角是三角形的。

Answer 1

我用画布创建了这个：

Column {
        Box(
            modifier = modifier
                .fillMaxWidth()
                .wrapContentHeight()
                .background(AppColor.brandColor.BLUE_DE_FRANCE)
        ) {
            Column(
                modifier = modifier
                    .wrapContentSize()
                    .padding(16.dp)
            ) {
                Card(
                    modifier = modifier
                        .fillMaxWidth(),
                    shape = CutCornerShape(4.dp)
                ) {
                    Column(modifier = modifier.wrapContentSize()) {
                        Text(text = "text")
                        Text(text = "text")
                        Text(text = "text")
                        Text(text = "text")

                    }

                }
                DrawDashLine()
                Card(
                    modifier = modifier
                        .fillMaxWidth(),
                    shape = CutCornerShape(4.dp)
                ) {
                    Column(modifier = modifier.wrapContentSize()) {
                        Text(text = "text")
                        Text(text = "text")
                        Text(text = "text")
                        Text(text = "text")

                    }

                }
                DrawDashLine()
                Card(
                    modifier = modifier
                        .fillMaxWidth(),
                    shape = CutCornerShape(4.dp)
                ) {
                    Column(modifier = modifier.wrapContentSize()) {
                        Text(text = "text")
                        Text(text = "text")
                        Text(text = "text")
                        Text(text = "text")

                    }

                }
            }

        }
        Spacer(modifier = Modifier.size(32.dp))
        DefaultSecondaryButton(
            text = stringResource(id = R.string.get_help_now),
            textColor = AppColor.brandColor.BLUE_DE_FRANCE,
            borderColor = AppColor.brandColor.BLUE_DE_FRANCE,
            onClick = {

            },
            modifier = modifier.fillMaxWidth(),
            icon = {
                Icon(
                    modifier = modifier.padding(top = 2.dp),
                    painter = painterResource(id = R.drawable.ic_chat_support),
                    contentDescription = "support icon",
                    tint = Color.Unspecified
                )
            }
        )
    }

@Composable
private fun DrawDashLine() {
    val pathEffect = PathEffect.dashPathEffect(floatArrayOf(20f, 10f), 0f)
    Canvas(
        Modifier.fillMaxWidth()
    ) {
        drawLine(
            color = AppColor.brandColor.BLUE_DE_FRANCE,
            strokeWidth = 5f,
            start = Offset(20f, 0f),
            end = Offset(size.width - 20, 0f),
            pathEffect = pathEffect
        )
    }
}