如何在Jetpack Compose中仅为布局底部添加边框

我懂你不想用Divider、只想手动给Row加底部边框的需求，目前用border()会给四边都加上边框，确实不是你想要的效果。下面给你两种实用的手动实现方法：

方法一：用drawBehind自定义绘制底部线 #

这个方法直接在布局的背景层绘制一条底部边框线，灵活度很高：

Row(
    modifier = Modifier
        .drawBehind {
            // 将dp转换为像素值，适配不同屏幕
            val borderWidth = 1.dp.toPx()
            // 从布局左下角画到右下角，线的位置居中于底部边缘
            drawLine(
                color = Color.LightGray,
                start = Offset(0f, size.height - borderWidth / 2),
                end = Offset(size.width, size.height - borderWidth / 2),
                strokeWidth = borderWidth
            )
        }
        .padding(vertical = 8.dp) // 可选，避免内容和边框重叠，提升视觉体验
) {
    TextField(value = "", onValueChange = {}, modifier = Modifier.weight(1f))
    Switch(checked = true, onCheckedChange = {})
    Icon(Icons.Filled.Close, "Remove", tint = Color.Gray)
}

方法二：自定义Shape实现局部边框 #

如果你更习惯用border()修饰符，可以自定义一个只显示底部区域的Shape，让边框只出现在底部：

// 自定义一个仅包含底部区域的Shape
val BottomBorderShape = object : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val borderHeight = 1.dp.toPx(density)
        return Outline.Rectangle(
            Rect(
                left = 0f,
                top = size.height - borderHeight,
                right = size.width,
                bottom = size.height
            )
        )
    }
}

// 在Row中使用这个自定义Shape
Row(
    modifier = Modifier
        .border(
            width = 1.dp,
            color = Color.LightGray,
            shape = BottomBorderShape
        )
) {
    TextField(value = "", onValueChange = {}, modifier = Modifier.weight(1f))
    Switch(checked = true, onCheckedChange = {})
    Icon(Icons.Filled.Close, "Remove", tint = Color.Gray)
}

小提示 #

如果发现内容和边框重叠，可以给Row添加padding(bottom = 1.dp)，或者调整内部组件的padding，让整体布局更协调。

内容的提问来源于stack exchange，提问作者nasibeyyubov