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

Question

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

喜欢 ：

Answer 1

只需使用修饰符即可：

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

Answer 2

随着1.0.x与圆角边框实现了按钮，你可以使用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" )
    }

Answer 3

使用剪辑修改器，此外您还可以选择特定的角来弯曲

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

Answer 4

使用clip修改器。

Modifier.clip(CircleShape)

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

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