Jetpack Compose - Button按钮使用

效果

这只是简单效果

普通使用

  Button(onClick = {
                showToast("点击了")
            }, Modifier.padding(vertical = 9.dp)) {
                Text(text = "文字")
            }
1
2
3
4
5

可以设置形状

 Button(
                onClick = {
                    showToast("点击了")
                },
                Modifier.padding(vertical = 9.dp),

                border = BorderStroke(2.dp, Color.Green),//边框颜色
                shape = RoundedCornerShape(
                    topStart = 5.dp,
                    topEnd = 6.dp,
                    bottomEnd = 10.dp,
                    bottomStart = 10.dp
                )
//也可以设置形状
            ) {
                Text(text = "形状")
            }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

设置图片位置

简单来说就是一个布局可以随意了
只是更改代码位置

 Button(onClick = {
                showToast("点击了")
            }, Modifier.padding(vertical = 9.dp)) {
                Column(
                ) {
                    Image(
                        painter = rememberImagePainter(data = R.drawable.bg_iamge),
                        contentDescription = "",
                        Modifier
                            .clip(CircleShape)
                            .size(30.dp),
                        contentScale = ContentScale.Crop,
                    )
                    // 添加间隔
                    Spacer(Modifier.size(ButtonDefaults.IconSpacing))
                    Text(text = "在上")
                }
            }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

其余效果

1. Compose内置了几十个常用的图标,我们使用枚举类型即可使用
   Icons里面定了5种类型Outlined Filled Sharp TwoTone Rounded,可以根据自己的需要选择不同的类型,如填充型(Filled)或者是轮廓型(Outlined)

Button(onClick = { println("点击了按钮")}){
    Icon(Icons.Default.Search,contentDescription = null)
    Text(text = "测试")
}

1
2
3
4
5

2.还可以设置 点击状态变换shap 等这个可以拓展很多一切靠想象

//如果是按压状态则是切角形状,否则则是圆角形状 
    val myShape = if(pressState.value) CutCornerShape(10.dp) else RoundedCornerShape(10.dp)

    Column(
        Modifier.padding(20.dp)
    ) {
        Button(
            onClick = { /*TODO*/ },
            //设置我们定义的shape
            shape = myShape,
            //设置创建的MutableInteractionSource对象
            interactionSource = myInteractionSource
        ) {
            Text("你好")
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

参考链接：
图标(Icon) 按钮(Button) 输入框(TextField) 的使用
Jetpack Compose - Button
Android Compose Button按钮控件