JetpackCompose

Jetpack Compose 入门：Button、OutlinedButton、TextButton、IconButton、FilledTonalButton、ElevatedButton

按钮 Button 是 material3（androidx.compose.material3.Button）组件，常用的还有 OutlinedButton、TextButton、IconButton、FilledTonalButton、ElevatedButton。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
@Composable
fun ButtonScreen(
    modifier: Modifier = Modifier
) {
    Column(
        modifier = modifier.fillMaxWidth()
    ) {
        Button(
            onClick = { /*TODO*/ },
            modifier = modifier
                .fillMaxWidth()
                .padding(16.dp),
        ) {
            Text(text = "基本按钮")
        }

        OutlinedButton(
            onClick = { /*TODO*/ },
            modifier = modifier
                .fillMaxWidth()
                .padding(16.dp),
        ) {
            Text(text = "外边款按钮")
        }

        TextButton(
            onClick = { /*TODO*/ },
            modifier = modifier
                .fillMaxWidth()
                .padding(16.dp),
        ) {
            Text(text = "文本按钮")
        }

        FilledTonalButton(
            onClick = { /*TODO*/ },
            modifier = modifier
                .fillMaxWidth()
                .padding(16.dp),
        ) {
            Text(text = "FilledTonalButton")
        }

        ElevatedButton(
            onClick = { /*TODO*/ },
            modifier = modifier
                .fillMaxWidth()
                .padding(16.dp),
        ) {
            Text(text = "ElevatedButton")
        }

        IconButton(
            onClick = { /*TODO*/ },
            modifier = modifier
                .fillMaxWidth()
                .padding(16.dp),
        ) {
            Icon(imageVector = Icons.Default.ArrowBack, contentDescription = "返回")
        }

        Button(
            onClick = { /*TODO*/ },
            modifier = modifier
                .fillMaxWidth()
                .padding(16.dp),
        ) {
            Text(text = "默认是 RowScope,从左至右排列")
            Icon(imageVector = Icons.Default.ArrowForward, contentDescription = "")
        }

        Button(
            onClick = { /*TODO*/ },
            modifier = modifier
                .fillMaxWidth()
                .padding(16.dp),
            enabled = true,
            shape = ButtonDefaults.elevatedShape,
            colors = ButtonDefaults.elevatedButtonColors(
                containerColor = Color.Blue,
                contentColor = Color.White,
                disabledContainerColor = Color.Blue.copy(alpha = 0.5f),
                disabledContentColor = Color.LightGray
            ),
            elevation = null,
            border = BorderStroke(8.dp, Brush.horizontalGradient(listOf(Color.Cyan, Color.Green))),
            contentPadding = PaddingValues(32.dp)
        ) {
            Text(text = "自定义属性的按钮")
        }
    }
}

基本属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
): Unit

参数:

enabled 是否启用或禁用；

elevation 高度；

shape 形状，ButtonDefaults.outlinedShape、ButtonDefaults.textShape、ButtonDefaults.filledTonalShape、ButtonDefaults.elevatedShape，其实提供了对应的组件： OutlinedButton、TextButton、FilledTonalButton；ElevatedButton

border 边框线；

colors 设置颜色，可以设置背景颜色、前景颜色、禁用状态和启动状态下的颜色；

contentPadding 内容内间距；

content 默认是 RowScope.() 即 Row。

Demo: https://github.com/hefengbao/jetpack-compose-demo.git