So erstellen Sie einen Button mit abgerundetem Rand mit Jetpack Compose

Ich muss in Button mit Jetpack Compose einen Rand mit abgerundeten Ecken hinzufügen

Mögen :

Um eine Schaltfläche mit einem Rand mit abgerundeten Ecken zu erhalten, können Sie die verwenden OutlinedButton Komponente Anwendung in der shape Parameter a 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" )
}

Verwenden Sie einfach den Modifikator als:

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

verwenden Klipp Modifikator, außerdem können Sie auch eine bestimmte Ecke zum Krümmen auswählen

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

Verwenden Sie die clip Modifikator.

Modifier.clip(CircleShape)

Dies ist die Schaltfläche, die Sie in diesem Bild haben:

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

Versuche dies

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