Jetpack Compose——TopAppBar（顶部应用程序栏）、BottomAppBar（底部应用程序栏）

该博客基于：compose_version = '1.1.0-beta01'

TopAppBar：位于屏幕的顶部。一般包含标题，导航图标和其他的更多操作等
BottomAppBar：位于屏幕的底部，一般显示导航和按键操作

TopAppBar

首先看看TopAppBar的参数：有两种参数类型

TopAppBar(
    modifier: Modifier = Modifier,//布局修饰
    backgroundColor: Color = MaterialTheme.colors.primarySurface,//appbar背景颜色
    contentColor: Color = contentColorFor(backgroundColor),//子级内容颜色
    elevation: Dp = AppBarDefaults.TopAppBarElevation,//标题栏阴影效果
    contentPadding: PaddingValues = AppBarDefaults.ContentPadding,//内边距
    content: @Composable RowScope.() -> Unit//appbar的内容，默认布局是Row，内容将被水平放置
)
TopAppBar(
    title: @Composable () -> Unit,//appbar的中心标题
    modifier: Modifier = Modifier,//布局修饰
    navigationIcon: @Composable (() -> Unit)? = null,//导航图标
    actions: @Composable RowScope.() -> Unit = {},//其他行为，例如设置，分享等
    backgroundColor: Color = MaterialTheme.colors.primarySurface,//appbar背景颜色
    contentColor: Color = contentColorFor(backgroundColor),//子级内容颜色
    elevation: Dp = AppBarDefaults.TopAppBarElevation//标题栏阴影效果
)

简单使用：

@Composable
fun BarTest() {
    val context = LocalContext.current
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray)
    ) {
        //自定义的appbar
        TopAppBar(
            modifier = Modifier.fillMaxWidth(),
            backgroundColor = Color.White,//背景色
            contentColor = Color.Red, //子级内容颜色
            contentPadding = PaddingValues(4.dp)//AppBar的内边距
        ) {
            //返回按钮
            IconButton(onClick = { Toast.makeText(context, "返回", Toast.LENGTH_SHORT).show() }) {
                Icon(Icons.Filled.ArrowBack, null)
            }
            //标题
            Text(