如何使用 Jetpack Compose 创建圆角边框按钮答案

【问题标题】：How to create rounded border Button using Jetpack Compose如何使用 Jetpack Compose 创建圆角边框按钮
【发布时间】：2019-11-15 10:57:09
【问题描述】：

我需要使用 Jetpack Compose 在 Button 中添加圆角边框

喜欢：

【问题讨论】：

标签： android android-layout android-button android-jetpack android-jetpack-compose

【解决方案1】：

通过1.0.x来实现一个带有圆角边框的按钮，您可以使用OutlinedButton组件应用在shape参数aRoundedCornerShape ：

OutlinedButton(
    onClick = { },
    border = BorderStroke(1.dp, Color.Red),
    shape = RoundedCornerShape(50), // = 50% percent
                                    // or shape = CircleShape
    colors = ButtonDefaults.outlinedButtonColors(contentColor = Color.Red)
){
    Text( text = "Save" )
}

【讨论】：

谢谢先生，但我想要带有圆角边框的自定义 ui
@Sanjayrajsinh OutlinedButtonStyle 默认为圆角。在任何情况下，您都可以使用 shape = RoundedCornerShape(x.dp) 覆盖该值
@Sanjayrajsinh 或使用百分比值与shape = RoundedCornerShape(50)。我刚刚更新了答案。
@RanjithKumar OutlinedButton 是一个 Button，带有一个 outlinedBorder 和自定义颜色为 backgroundColor= MaterialTheme.colors.surface 和 contentColor = MaterialTheme.colors.primary
@GabrieleMariotti 非常感谢。你是我的导师。

【解决方案2】：

只需使用修饰符：

modifier = Modifier.border( width = 2.dp,
                            color = Color.Red,
                            shape = RoundedCornerShape(5.dp))

【讨论】：

【解决方案3】：

使用clip 修饰符。

Modifier.clip(CircleShape)

【讨论】：

【解决方案4】：

使用剪辑修饰符，另外你还可以选择特定的角来弯曲

 modifier = Modifier.clip(RoundedCornerShape(15.dp, 15.dp, 0.dp, 0.dp))

【讨论】：

【解决方案5】：

这是您在该图像中的按钮：

Button(
       onClick = {},
       shape = RoundedCornerShape(23.dp),
       border = BorderStroke(3.dp, Color.Red),
       colors = ButtonDefaults.buttonColors(contentColor = Color.Red, backgroundColor = Color.White)
       ) {
            Text(
                text = "Save",
                fontSize = 17.sp,
                modifier = Modifier.padding(horizontal = 30.dp, vertical = 6.dp)
            )
        }

【讨论】：