JetpackCompose

Jetpack Compose 入门：TopAppBar & BottomAppBar

TopAppBar、MediumTopAppBar、LargeTopAppBar、CenterAlignedTopAppBar 用于的顶部 AppBar，BottomAppBar 用在底部的 AppBar。TopAppBar 主要是三部分，从左至右依次是：navigationIcon、title 、actions，BottomAppBar 一种是自己定义要显示的内容，一种是通过 actions 设置，并可以设置 floatingActionButton。

示例代码：

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
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppBarScreen(
    modifier: Modifier = Modifier
) {
    Column (
        modifier = modifier.fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        TopAppBar(
            title = { 
                Text(text = "8ug.icu")
            },
            navigationIcon = {
                IconButton(onClick = { /*TODO*/ }) {
                    Icon(imageVector = Icons.Default.Home, contentDescription = null)
                }
            },
            actions = {
                IconButton(onClick = { /*TODO*/ }) {
                    Icon(imageVector = Icons.Default.Share, contentDescription = null)
                }
                IconButton(onClick = { /*TODO*/ }) {
                    Icon(imageVector = Icons.Default.Settings, contentDescription = null)
                }
            }
        )
        
        MediumTopAppBar(
            title = {
                Text(text = "8ug.icu")
            }
        )

        LargeTopAppBar(
            title = {
                Text(text = "8ug.icu")
            }
        )

        CenterAlignedTopAppBar(
            title = {
                Text(text = "8ug.icu")
            }
        )

        BottomAppBar {
            OutlinedTextField(value = "", onValueChange = {})
            Button(onClick = { /*TODO*/ }) {
                Text(text = "提交")
            }
        }

        BottomAppBar(
            actions = {
                IconButton(onClick = { /*TODO*/ }) {
                    Icon(imageVector = Icons.Default.Share, contentDescription = null)
                }
                IconButton(onClick = { /*TODO*/ }) {
                    Icon(imageVector = Icons.Default.ThumbUp, contentDescription = null)
                }
            },
            floatingActionButton = {
                FloatingActionButton(onClick = { /*TODO*/ }) {
                    Icon(imageVector = Icons.Default.Edit, contentDescription = null)
                }
            }
        )
    }
}

@Preview
@Composable
private fun TopAppBarScreenPreview() {
    AppBarScreen()
}

写 Preview 技巧，输入 prev 等出现提示按回车键。

Demo：https://www.8ug.icu/search/tags/jetpack-compose-tutorial 中的 AppBarScreen。