Need to have a round corner Surface, with dashed line.
Found a way to make it work, but think there should be a simpler way, or direct api to achieve it, does anyone know?
@Composable
fun testRoundCornerSurface() {
Surface(
color = Color.Cyan,
shape = RoundedCornerShape(8.dp),
modifier = getBorderModifierModifier().then(Modifier.height(56.dp))
.padding(2.dp)
){
Text(" test Surface")
}
}
fun getBorderModifierModifier(): Modifier {
val dashWidth = 10.dp
val dashGap = 5.dp
val dashedBorderModifier = Modifier.drawWithContent {
val path = Path().apply {
val cornerRadius = 8.dp.toPx()
moveTo(cornerRadius, 0f)
lineTo(size.width - cornerRadius, 0f)
quadraticBezierTo(size.width, 0f, size.width, cornerRadius)
lineTo(size.width, size.height - cornerRadius)
quadraticBezierTo(size.width, size.height, size.width - cornerRadius, size.height)
lineTo(cornerRadius, size.height)
quadraticBezierTo(0f, size.height, 0f, size.height - cornerRadius)
lineTo(0f, cornerRadius)
quadraticBezierTo(0f, 0f, cornerRadius, 0f)
close()
}
val stroke =
Stroke(
width = 2.dp.toPx(),
pathEffect = PathEffect.dashPathEffect(
floatArrayOf(
dashWidth.toPx(),
dashGap.toPx()
), 0f
)
)
drawPath(
path = path,
color = Color.Blue,
style = stroke,
)
drawContent()
}
return dashedBorderModifier
}