Как создать пунктирную границу в Jetpack Compose?

#android #border #android-jetpack-compose

#Android #граница #android-jetpack-compose

Вопрос:

Я могу легко создать обычную границу, используя Modifier.border() , но как создать пунктирную границу, как показано на рисунке ниже.

Ответ №1:

При 1.0.x этом нет встроенного Modifier.border() пути с тире.

Однако вы можете использовать PathEffect.dashPathEffect в a Canvas .
Что-то вроде:

 val stroke = Stroke(width = 2f,
    pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f), 0f)
)

Box(Modifier.size(250.dp,60.dp),contentAlignment = Alignment.Center){
    Canvas(modifier = Modifier.fillMaxSize()) {
        drawRoundRect(color = Color.Red,style = stroke)
    }
    Text(
        textAlign = TextAlign.Center,text = "Tap here to introduce yourseft")
}

1. Я не понимаю, почему ее больше нет Modifier.border() ? На самом деле я использую бета-версию Android 04, и она не устарела

2. @DavidIbrahim Модификатор.border() существует, и он не устарел.

3. О, извините, я неправильно понял, я думал, что вы предлагаете другое решение этой проблемы, потому что мой код устарел, lol.

Ответ №2:

После некоторого изучения модификатора normal border я обнаружил, что он использует объект Stroke, который может принимать параметр PathEffect, который может сделать его пунктирным, вот модифицированная версия функции normal border, которая принимает этот параметр.

https://gist.github.com/DavidIbrahim/236dadbccd99c4fd328e53587df35a21

1. После приведенного выше вопроса я начал копаться в этом и застрял на этой ошибке: «Несоответствие типов: предполагаемый тип — DashPathEffect, но ожидался эффект пути». Это работало до альфа-09, но не в бета-версии. После вашего ответа у меня все заработало. Спасибо!

Ответ №3:

Я написал это расширение для модификатора, вы можете просто использовать его или изменить.

 fun Modifier.dashedBorder(width: Dp, radius: Dp, color: Color) = 
    drawBehind {
        drawIntoCanvas {
            val paint = Paint()
                .apply {
                    strokeWidth = width.toPx()
                    this.color = color
                    style = PaintingStyle.Stroke
                    pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f), 0f)
        }
        it.drawRoundRect(
            width.toPx(),
            width.toPx(),
            size.width - width.toPx(),
            size.height - width.toPx(),
            radius.toPx(),
            radius.toPx(),
            paint
        )
    }
}

1. Используя это как есть, моя граница немного отличалась от фактического края представления. Обновление до этого исправило, что it.drawRoundRect( (width.topX() / 2), (width.topX() / 2), size.width — (width.topX() / 2), size.height — (width.topX() / 2), radius.topX(), radius.topX(), paint )