主页 / coding / 问题 / 78550623
Accepted
RJA
Asked: 2024-05-29 23:38:50 +0800 CST

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

  • 772

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

@Composable
fun CustomButtonPrimary(
    onClick: () -> Unit,
    shape: RoundedCornerShape? = null,
    modifier: Modifier = Modifier,
    color: Color? = null,
    border: BorderStroke? = null,
    enabled: Boolean = true,
    content: @Composable RowScope.() -> Unit
){
    
    Button(
        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 = border
    ) {
        ProvideTextStyle(value = MaterialTheme.typography.titleSmall) {
            content()
        }
    }
    
}

像这样调用可组合按钮：

CustomButtonPrimary(
    onClick = { ... },
    modifier = modifier
        .widthIn(95.dp, 120.dp)
        .height(20.dp),
    color = if(account.availableFunds <= 0) Color.DarkGray else null,
    border = BorderStroke(1.dp, Color.Red)
) {
    Text(text = btnText)
}

不会覆盖原来的边界。如果你看下面的图片。我的 MaterialTheme 着色后面有一个 border = Color.Red...但我无法删除绿色而只显示红色。

注意绿色后面的红色边框

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

我也尝试过改变Button.modifier = modifier.border()属性

正在纠结这个问题，有什么建议吗？

material-ui

2 个回答

  1. Best Answer

    我正在使用您的代码，但在编译时它向我展示您想要的方式，带有红色边框，尝试将其放入应用程序的根目录中，也许某些值使边框始终为绿色。

    在此输入图像描述

    • 1

  2. 菜鸟错误....我错过了这样一个事实：我把它包裹在一个 Box() 中，这超越了我的风格。删除它按预期工作。

    感谢大家！接受witodev的回答。

    Box(
    modifier = modifier
      .border(
        1.dp, MaterialTheme.colorScheme.primary, 
        RoundedCornerShape(4.dp)
      )
) {
   MyCustomButton(){ }
}
    • 0

相关问题