Jetpack Compose 入门:Scaffold & Snackbar

Scaffold(脚手架),提供一个基本的布局:

1
2
3
4
5
6
7
8
9
10
11
12
Scaffold(
topBar = {},
bottomBar = {},
floatingActionButton = {},
snackbarHost = {}
) { paddingValues ->
Column(
modifier = modifier.padding(paddingValues)
) {

}
}

示例代码:

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
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScaffoldScreen(
modifier: Modifier = Modifier
) {
val snackbarHostState = remember { SnackbarHostState() }
var showSnackbar by remember { mutableStateOf(false) }

Scaffold(
topBar = {
TopAppBar(
title = {
Text(text = "ww.8ug.icu")
},
navigationIcon = {
IconButton(onClick = { /*TODO*/ }) {
Icon(imageVector = Icons.Default.ArrowBack, contentDescription = null)
}
},
actions = {
IconButton(onClick = { /*TODO*/ }) {
Icon(imageVector = Icons.Default.Search, contentDescription = null)
}
}
)
},
bottomBar = {
BottomAppBar {
IconButton(onClick = { /*TODO*/ }) {
Icon(imageVector = Icons.Default.Undo, contentDescription = null)
}
IconButton(onClick = { /*TODO*/ }) {
Icon(imageVector = Icons.Default.Redo, contentDescription = null)
}
}
},
floatingActionButton = {
FloatingActionButton(onClick = { /*TODO*/ }) {
Icon(imageVector = Icons.Default.Send, contentDescription = null)
}
},
snackbarHost = { SnackbarHost(snackbarHostState)}
) { paddingValues ->
Column(
modifier = modifier.padding(paddingValues)
) {
Button(onClick = { showSnackbar = true }) {
Text(text = "Show Snackbar")
}
}

LaunchedEffect(showSnackbar){
if (showSnackbar){
val result = snackbarHostState.showSnackbar(
message = "欢迎来到 www.8ug.icu",
actionLabel = "关闭",
duration = SnackbarDuration.Indefinite,
withDismissAction = true
)

showSnackbar = when(result){
SnackbarResult.Dismissed -> {
false
}

SnackbarResult.ActionPerformed -> {
false
}
}
}
}
}
}

showSnackbar() 中的 duration 设为 SnackbarDuration.Indefinite (不自动关闭),最好把 withDismissAction 设为 true,另外还有 SnackbarDuration.Long SnackbarDuration.Short,一段时间后会自行关闭。

参考文档:https://developer.android.google.cn/jetpack/compose/layouts/material?hl=zh-cn

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