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

Question

我需要使用Jetpack Compose在按钮中添加带圆角的边框。

例如：

- Sanjayrajsinh

Answer 1

要实现一个带有圆角边框的按钮，您可以使用OutlinedButton组件，在shape参数中应用RoundedCornerShape：

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" )
}

它适用于M2和M3。

- Gabriele Mariotti

---

谢谢您先生，但我想要一个带有圆角边框的自定义UI。 - Sanjayrajsinh

@Sanjayrajsinh OutlinedButtonStyle 默认拥有圆角。然而，你可以使用 shape = RoundedCornerShape(x.dp) 以覆盖默认值。 - Gabriele Mariotti

@Sanjayrajsinh 或者使用 shape = RoundedCornerShape(50) 的百分比值。我刚刚更新了答案。 - Gabriele Mariotti

@GabrieleMariotti 我看不出Button()和OutlinedButton()之间有什么区别。如果我使用相同的代码与Button()一起使用，它将给出相同的结果。请问它们之间有什么区别？ - Ranjithkumar

@RanjithKumar OutlinedButton 是一个带有 outlinedBorder 和自定义颜色的 Button，其中 backgroundColor= MaterialTheme.colors.surface 和 contentColor = MaterialTheme.colors.primary。 - Gabriele Mariotti

Answer 2

只需使用修饰符：

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

- Pratik Pitale

Answer 3

使用Clip修饰符，此外您还可以选择特定的角来使其弯曲。

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

- RJnr

Answer 4

使用clip修饰符。 Modifier.clip(CircleShape)。

- Richard Onslow Roper

Answer 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)
            )
        }

- Mahdi nezam parast

---

在 Material 3 中使用 shape = RoundedCornerShape(23.dp) 就能轻松实现圆角效果！ - Daniele Ceglia

Answer 6

试试这个

               Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(40.dp)
                        .padding(4.dp)
                        .clip(RoundedCornerShape(8.dp))
                        .background(Color.White)
                        .border(
                            1.dp,
                            Color.RED,
                            shape = RoundedCornerShape(8.dp),
                        )

                ) {
                    Text(
                        modifier = Modifier.align(Alignment.Center),
                        text = "Save",
                        color = Color.RED,
                        style = MaterialTheme.typography.h6
                    )
                }

- deas maha putra