如何在Jetpack Compose中实现左侧无边框的自定义按钮？

你之前的问题出在两个地方：一是OutlinedButton自带的border属性会给四边都添加边框，二是自定义的topBorder和bottomBorder重复绘制了左右边框，导致最终效果混乱。下面是直接有效的解决方案：

第一步：编写正确的边框绘制Modifier #

创建一个统一的Modifier扩展函数，只绘制顶部、右侧、底部的边框，完全跳过左侧：

import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Stroke
import androidx.compose.ui.graphics.drawscope.drawArc
import androidx.compose.ui.graphics.drawscope.drawLine
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.toPx
import androidx.compose.ui.unit.LocalDensity

fun Modifier.rightTopBottomBorder(strokeWidth: Dp, color: Color, cornerRadiusDp: Dp) = composed(
    factory = {
        val density = LocalDensity.current
        val strokeWidthPx = density.run { strokeWidth.toPx() }
        val cornerRadiusPx = density.run { cornerRadiusDp.toPx() }

        Modifier.drawBehind {
            val width = size.width
            val height = size.height

            // 绘制顶部边框（从左上角到右上角圆角起点）
            drawLine(
                color = color,
                start = Offset(0f, 0f),
                end = Offset(width - cornerRadiusPx, 0f),
                strokeWidth = strokeWidthPx
            )

            // 绘制右上角圆角弧
            drawArc(
                color = color,
                startAngle = 270f,
                sweepAngle = 90f,
                useCenter = false,
                topLeft = Offset(width - cornerRadiusPx * 2, 0f),
                size = Size(cornerRadiusPx * 2, cornerRadiusPx * 2),
                style = Stroke(width = strokeWidthPx)
            )

            // 绘制右侧竖边框（从右上角圆角终点到右下角圆角起点）
            drawLine(
                color = color,
                start = Offset(width, cornerRadiusPx),
                end = Offset(width, height - cornerRadiusPx),
                strokeWidth = strokeWidthPx
            )

            // 绘制右下角圆角弧
            drawArc(
                color = color,
                startAngle = 0f,
                sweepAngle = 90f,
                useCenter = false,
                topLeft = Offset(width - cornerRadiusPx * 2, height - cornerRadiusPx * 2),
                size = Size(cornerRadiusPx * 2, cornerRadiusPx * 2),
                style = Stroke(width = strokeWidthPx)
            )

            // 绘制底部边框（从右下角圆角终点到左下角）
            drawLine(
                color = color,
                start = Offset(width - cornerRadiusPx, height),
                end = Offset(0f, height),
                strokeWidth = strokeWidthPx
            )
        }
    }
)

第二步：修改按钮实现 #

去掉OutlinedButton自带的border参数，使用上面的自定义Modifier：

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun StandardButton(modifier: Modifier, onClicked: () -> Unit) {
    OutlinedButton(
        modifier = modifier
            .fillMaxWidth()
            .height(70.dp)
            .padding(end = 50.dp)
            .rightTopBottomBorder(6.dp, Color.Blue, 50.dp),
        colors = ButtonDefaults.buttonColors(containerColor = Color.Black),
        border = null, // 禁用自带边框
        shape = androidx.compose.foundation.shape.RoundedCornerShape(
            topStart = 0.dp,
            topEnd = 50.dp,
            bottomEnd = 50.dp
        ),
        onClick = onClicked
    ) {
        Text(text = "Button", color = Color.White)
    }
}

关键说明 #

• 禁用OutlinedButton的border参数：避免自带的四边边框和自定义边框冲突。
• 统一绘制逻辑：通过一个Modifier完成所有需要的边框绘制，避免重复绘制左右边框。
• 匹配圆角：绘制圆弧时严格对应按钮的圆角尺寸，保证边框和按钮形状完全契合。

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