Jetpack Compose Material3 Button边框覆盖失效问题求助

在Material3中，默认的Button组件（填充按钮）的border参数优先级低于主题中定义的ButtonStyle，如果你的主题为Button设置了默认边框，直接传入border参数会被主题样式覆盖，导致自定义边框显示在底层被遮挡。另外，填充按钮的容器颜色会覆盖通过Modifier.border添加的边框（如果Modifier顺序不正确）。

方案1：显式自定义ButtonStyle覆盖主题边框 #

通过创建自定义的ButtonStyle并传入border参数，强制覆盖主题中的默认边框设置：

修改你的CustomButtonPrimary代码：

@Composable
fun CustomButtonPrimary(
    onClick: () -> Unit,
    shape: RoundedCornerShape? = null,
    modifier: Modifier = Modifier,
    color: Color? = null,
    border: BorderStroke? = null,
    enabled: Boolean = true,
    content: @Composable RowScope.() -> Unit
){
    val buttonShape = shape ?: MaterialTheme.shapes.small
    val buttonColors = ButtonDefaults.buttonColors(
        containerColor = color ?: MaterialTheme.colorScheme.primary.copy(alpha = 0.8f),
        contentColor = if(color != null) Color.LightGray.copy(alpha = 0.75f) else MaterialTheme.colorScheme.surfaceVariant,
        disabledContainerColor = Color.DarkGray,
        disabledContentColor = Color.White
    )
    // 自定义ButtonStyle，将传入的border应用到样式中
    val buttonStyle = ButtonDefaults.buttonStyle(
        shape = buttonShape,
        colors = buttonColors,
        border = border
    )

    Button(
        onClick = onClick,
        modifier = modifier.height(30.dp),
        contentPadding = PaddingValues(top = 0.dp, bottom = 0.dp, start = 8.dp, end = 8.dp),
        enabled = enabled,
        style = buttonStyle // 使用自定义样式覆盖主题默认
    ) {
        ProvideTextStyle(value = MaterialTheme.typography.titleSmall) {
            content()
        }
    }
}

方案2：调整Modifier顺序，用Modifier.border添加边框 #

如果坚持使用默认Button组件，确保用户传入的Modifier（包含边框）先于内部Modifier应用，这样边框会显示在按钮容器上层：

1. 修改CustomButtonPrimary中Button的modifier顺序：

Button(
    onClick = onClick,
    // 先应用用户传入的modifier，再添加内部height设置
    modifier = modifier.then(Modifier.height(30.dp)),
    contentPadding = PaddingValues(top = 0.dp, bottom = 0.dp, start = 8.dp, end = 8.dp),
    shape = shape ?: MaterialTheme.shapes.small,
    enabled = enabled,
    colors = ButtonDefaults.buttonColors(
        containerColor = color ?: MaterialTheme.colorScheme.primary.copy(alpha = 0.8f),
        contentColor = if(color != null) Color.LightGray.copy(alpha = 0.75f) else MaterialTheme.colorScheme.surfaceVariant,
        disabledContainerColor = Color.DarkGray,
        disabledContentColor = Color.White
    )
) {
    ProvideTextStyle(value = MaterialTheme.typography.titleSmall) {
        content()
    }
}

2. 调用时添加边框（确保shape与Button一致）：

CustomButtonPrimary(
    onClick = { /* 点击逻辑 */ },
    modifier = modifier
        .widthIn(95.dp, 120.dp)
        .height(20.dp)
        .border(1.dp, Color.Red, MaterialTheme.shapes.small),
    color = if(account.availableFunds <= 0) Color.DarkGray else null
) {
    Text(text = btnText)
}

方案3：改用OutlinedButton组件 #

如果你的按钮需要显示边框，Material3的OutlinedButton是专门为带边框的按钮设计的，其border参数会直接生效，不会被主题默认样式覆盖：

修改CustomButtonPrimary为基于OutlinedButton：

@Composable
fun CustomButtonPrimary(
    onClick: () -> Unit,
    shape: RoundedCornerShape? = null,
    modifier: Modifier = Modifier,
    color: Color? = null,
    border: BorderStroke? = null,
    enabled: Boolean = true,
    content: @Composable RowScope.() -> Unit
){
    OutlinedButton(
        onClick = onClick,
        modifier = modifier.height(30.dp),
        contentPadding = PaddingValues(top = 0.dp, bottom = 0.dp, start = 8.dp, end = 8.dp),
        shape = shape ?: MaterialTheme.shapes.small,
        enabled = enabled,
        colors = ButtonDefaults.outlinedButtonColors(
            containerColor = color ?: MaterialTheme.colorScheme.primary.copy(alpha = 0.8f),
            contentColor = if(color != null) Color.LightGray.copy(alpha = 0.75f) else MaterialTheme.colorScheme.surfaceVariant,
            disabledContainerColor = Color.DarkGray,
            disabledContentColor = Color.White
        ),
        border = border ?: BorderStroke(1.dp, MaterialTheme.colorScheme.outline)
    ) {
        ProvideTextStyle(value = MaterialTheme.typography.titleSmall) {
            content()
        }
    }
}

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