Jetpack Compose Scaffold和BottomAppBar(底部导航)

Jetpack Compose 以下简称JC
JC提供了Scaffold这个组件来实现一些导航的效果，例如顶部菜单，底部导航，旁边的抽屉菜单等等，Scaffold的意思是脚手架，也就是Scaffold这是提供的一个支架，或者说固定了一些控件实现的位置。下面通过实现BottomAppBar来说明。
bottomBar是Scaffold的一个属性，类似的属性还有topbar，这篇文章只介绍bottomBar。
topbar可以看这篇文章：topBar

主要用到的类其实就是BottomAppBar，这个类也没什么特别的，其实就是自动定位到底部了，你手写也能实现，只是比较麻烦。
需要注意的点其实就是Icon和文本的居中对齐，整体颜色可以用contentColor属性修改，也可以自己一个个改。

Scaffold(
        bottomBar = {
             BottomAppBar(contentColor = Color.Yellow, backgroundColor = Color(0xffcc00ff)) {
                 Row(modifier = Modifier.fillMaxSize().wrapContentSize(Alignment.Center)){
                     IconButton(onClick = {}) {
                         Column(horizontalAlignment = Alignment.CenterHorizontally ) {
                             Text("主页" , fontWeight = FontWeight.Bold)
                             Icon(imageVector = Icons.Default.Home , contentDescription = "主页")
                         }
                     }

                     IconButton(onClick = {}, modifier = Modifier.padding(50.dp,0.dp,50.dp,0.dp)) {
                         Column(horizontalAlignment = Alignment.CenterHorizontally ) {
                             Text("发现" ,fontWeight = FontWeight.Bold)
                             Icon(imageVector = Icons.Default.Search , contentDescription = "发现")
                         }
                     }



                     IconButton(  onClick = {}) {
                         Column(horizontalAlignment = Alignment.CenterHorizontally ) {
                             Text("设置" ,fontWeight = FontWeight.Bold)
                             Icon(imageVector = Icons.Default.Settings , contentDescription = "设置")
                         }
                     }

                 }

             }

        }
    ) {

    }