跳到主要内容

TopAppBar

@Composable
fun TopAppBar(
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
navigationIcon: @Composable (() -> Unit)? = null,
actions: @Composable RowScope.() -> Unit = {},
backgroundColor: Color = MaterialTheme.colors.primarySurface,
contentColor: Color = contentColorFor(backgroundColor),
elevation: Dp = AppBarDefaults.TopAppBarElevation
)

Jetpack Compose 为我们准备了基于 Material Design 风格设计的 TopAppBar 组件。

接下来让我们看看怎么使用吧!

@Composable
fun ScaffoldDemo(){
Scaffold(
topBar = {
TopAppBar(
title = {
Text("主页")
},
navigationIcon = {
IconButton(
onClick = { }
) {
Icon(Icons.Filled.ArrowBack, null)
}
}
)
},
) {

}
}

还可以设置 TopAppBar 中的 actions 参数

@Composable
fun ScaffoldDemo(){
Scaffold(
topBar = {
TopAppBar(
title = {
Text("主页")
},
navigationIcon = {
IconButton(
onClick = { } //do something
) {
Icon(Icons.Filled.ArrowBack, null)
}
},
actions = {
IconButton(
onClick = { } //do something
) {
Icon(Icons.Filled.Search, null)
}
IconButton(
onClick = { } //do something
) {
Icon(Icons.Filled.MoreVert, null)
}
}
)
},
) {

}
}

它会将里面的内容以 Row 的方式来排列