Jetpack Composeで点線のDividerを表示する

よく作るのである程度パラメータで調整可能にしています。

横向き

@Composable
fun DashHorizontalDivider(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colorScheme.outlineVariant,
    thickness: Dp = 1.dp,
    gap: Dp = 4.dp,
    length: Dp = 8.dp
) {
    Canvas(
        modifier
            .fillMaxWidth()
            .height(thickness)
    ) {
        drawLine(
            color = color,
            strokeWidth = thickness.toPx(),
            start = Offset(0f, thickness.toPx() / 2),
            end = Offset(size.width, thickness.toPx() / 2),
            cap = StrokeCap.Square,
            pathEffect = PathEffect.dashPathEffect(
                intervals = floatArrayOf(
                    length.toPx(),
                    gap.toPx(),
                ),
            ),
        )
    }
}

縦向き

@Composable
fun DashVerticalDivider(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colorScheme.outlineVariant,
    thickness: Dp = 1.dp,
    gap: Dp = 4.dp,
    length: Dp = 8.dp
) {
    Canvas(
        modifier
            .fillMaxHeight()
            .width(thickness)
    ) {
        drawLine(
            color = color,
            strokeWidth = thickness.toPx(),
            start = Offset(thickness.toPx() / 2, 0f),
            end = Offset(thickness.toPx() / 2, size.height),
            cap = StrokeCap.Square,
            pathEffect = PathEffect.dashPathEffect(
                intervals = floatArrayOf(
                    length.toPx(),
                    gap.toPx(),
                ),
            ),
        )
    }
}