android 如何使用Jetpack合成创建圆形边框按钮

ao218c7q  于 2023-03-16  发布在  Android
关注(0)|答案(6)|浏览(155)

我需要使用Jetpack合成在按钮中添加圆角边框
例如:

70gysomp

70gysomp1#

要实现带圆角边框的按钮,可以使用**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。

gojuced7

gojuced72#

只需将修饰符用作:

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

ubbxdtey3#

使用“剪辑”“修改器”,另外还可以选择要绘制曲线的特定角

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

rjjhvcjd4#

使用clip修改器。
Modifier.clip(CircleShape)

esyap4oy

esyap4oy5#

这是你在图像中的按钮:

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

4dbbbstv6#

试试这个

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

相关问题