JetpackCompose Material3 按钮边框覆盖不起作用

标签：material-ui android-jetpack-compose android-jetpack-compose-material3

如标题所述：无法覆盖我的 Button 可组合按钮的边框描边。下面是我自定义的 Button，我如何通过传递 border:BorderStroke 参数来调用可组合按钮，以及显示其外观的图片。

@Composable
fun CustomButtonPrimary(
    onClick: () -> Unit、
    shape：= null、
    modifier：modifier = Modifier、
    color: Color?
    border：= null、
    enabled：Boolean = true、
    content：() -> Unit
){

    按钮(
        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 = 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
        ),
        border = 边框
    ){
        ProvideTextStyle(value = MaterialTheme.typography.titleSmall) {
            内容()
        }
    }

}

像这样调用可组合按钮：

CustomButtonPrimary(
    onClick = { ...},
    modifier = modifier
        .widthIn(95.dp, 120.dp)
        .height(20.dp)、
    color = if(account.availableFunds <= 0) Color.DarkGray 否则为空、
    border = BorderStroke(1.dp, Color.Red)
) {
    文本（text = btnText）
}

不会覆盖原始边框。请看下图。我的 MaterialTheme coloring.... 后面有一个 = Color.Red 的边框，但我无法移除绿色而只显示红色。

我已尝试将我的按钮包装在一个应用了边框样式的 Surface(){} 中。

我还尝试更改 Button.modifier = modifier.border() 属性

我对这个问题一筹莫展，有什么建议吗？

---

问题在于是在 ButtonColors 中设置禁用按钮的颜色。这将覆盖为边框设置的任何颜色。

可以通过两种方式解决此问题：

1. 更新 ButtonColors 以使用想要的边框颜色：

CustomButtonPrimary(
    // ... your other parameters
    colors = 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,
        // 设置禁用状态的边框颜色
        disabledBorderColor = Color.Red
    ),
    border = BorderStroke(1.dp, Color.Red)
) {
    // ... your content
}

这将确保即使在禁用状态下，边框也会使用指定的颜色。

2. 根据 enabled 状态有条件地应用边框：

CustomButtonPrimary(
    // ... your other parameters
) {
    Button(
        // ... your other parameters
        modifier = modifier
            .height(30.dp)
            .contentPadding(PaddingValues(top = 0.dp, bottom = 0.dp, start = 8.dp, end = 8.dp))
            // 如果启用，则应用边框修饰符
            .then(if (enabled) Modifier.border(BorderStroke(1.dp, Color.Red)) else Modifier),
        // ... your other parameters
    ) {
        // ... your content
    }
}

这种方法允许在启用和禁用状态下为按钮应用不同的边框样式。

选择哪种方法取决于希望如何自定义按钮的外观。 如果希望在所有状态下边框颜色都相同，则第一种方法更简单。 如果希望在启用和禁用状态下具有不同的边框样式，则第二种方法提供了更大的灵活性。

标签：material-ui,android-jetpack-compose,android-jetpack-compose-material3
From： 78550623