android - 如何绘制内边框？

Question

我想在列上绘制两个边框(1 个在里面 - 1 个在外面)。

预期结果:

Modifier.border(2.dp) // -> this creates inner border.

Answer 1

您有不同的选择。

• 您可以简单地应用 border 修饰符，然后应用 padding。

类似于:

    val shape = RoundedCornerShape(16.dp)

    Box(modifier = Modifier
        .size(60.dp , 100.dp)
        .border(2.dp, Blue, shape)
        .padding(4.dp)
        .background(Blue, shape)
    ){
      //content
    }

• 您可以两次应用 border 修饰符:

    val shape = RoundedCornerShape(16.dp)
  
    Box(modifier = Modifier
        .size(60.dp , 100.dp)
        .border(2.dp, Blue, shape)
        .border(4.dp, White, shape)
        .background(Blue, shape)
    ){
        //content
    } 
  

• 最后，您可以绘制一个内部边框。

类似于:

fun Modifier.innerBorder(
    strokeWidth: Dp,
    color: Color,
    cornerRadiusDp: Dp,
    offset : Offset = Offset.Zero
) = composed(
    factory = {
        val density = LocalDensity.current
        val strokeWidthPx = density.run { strokeWidth.toPx() }
        val cornerRadiusPx = density.run { cornerRadiusDp.toPx() }
        val halfStroke = strokeWidthPx / 2
        val topLeft = Offset(halfStroke + offset.x, halfStroke + offset.y)

        Modifier.drawBehind {
            val width = size.width -  topLeft.x*2  
            val height = size.height - topLeft.y*2              

            drawRoundRect(
                color = color,
                topLeft = topLeft,
                size = Size(width, height),
                cornerRadius = CornerRadius(cornerRadiusPx, cornerRadiusPx).shrink(halfStroke),
                style = Stroke(strokeWidthPx)
            )

        }
    }
)

private fun CornerRadius.shrink(value: Float): CornerRadius = CornerRadius(
    kotlin.math.max(0f, this.x - value),
    kotlin.math.max(0f, this.y - value)
)

然后应用它:

   val shape = RoundedCornerShape(16.dp)

   Column(modifier = Modifier
        .size(60.dp , 100.dp)
        .background( Blue , shape)
        .innerBorder(
            strokeWidth = 2.dp,
            color = White,
            cornerRadiusDp = 16.dp,
            offset = Offset(4f,4f)
        )
    ){
      //....content
    }