节后第一篇文章，稍微轻松一点，简单介绍下Scaffold的使用。在如今各式各样的app里面，如果我们想要在里面寻找一个共同点，那么就是基本每个app首页都是以底部tab切换页面加上顶部导航栏的形式出现，所以Compose也专门为了这一点设计出自己的便捷式布局--Scaffold，我们称为脚手架布局，如同字面意思，脚手架布局就是将各种Meterial Design风格的组件组合在一起形成一个具有Meterial Design风格的布局

Scaffold的参数

学习Compose的组件第一步我们肯定是去看看这个组件都支持哪些参数，哪些必传哪些可选，当我们点到Scaffold里面去查看它的参数的时候，会发现它的参数基本囊括了我们熟知的首页所具备的一切元素

其中有几个参数是专门用来设置Composable组件的，它们分别是

• 
  
• topBar:顶部导航栏布局，推荐使用TopAppBar组件
  
• bottomBar:底部导航栏，推荐使用BottomAppBar
  
• snackBarHost:Snackbars组件
  
• floatingActionButton:悬浮按钮
  
• drawerContent:侧边栏布局
  
• content: Scaffold需要呈现出来的布局
  

一般一个普通的app首页，使用topBar,bottomBar和content这三个参数就可以搭建出来，我们来尝试下

搭建首页

导航栏

首先创建个Composable函数，在最外层使用Scaffold布局，然后topBar就使用官方推荐的TopAppBar组件

而这个TopAppBar组件在AppBar.kt文件里面，有两个重载函数，一个是内部布局完全自定义的

一个是如同脚手架布局一样帮你已经排版好了布局，你只需要往里面添加相应组件就好

我们这边就选择第二种方式来做我们的导航栏，代码如下

navigationIcon对应着导航栏上最左边的图标，一般可以放返回键，菜单键，这边使用系统自带的菜单icon，title对应着导航栏上的标题，可以直接放一个文案，也可以放一个布局，actions是一个RowScope，放置在导航栏的右侧，在里面可以添加一些小按钮，使用的也都是系统自带的icon，效果图如下

很方便是不，想想看这样的一个布局我们用传统xml形式来写需要多少代码量，用我们的脚手架布局几行代码就搞定了，接下来做底部导航栏

底部导航栏

底部导航栏也使用官方推荐的BottomAppBar,它也是个RowScope,所以往里面添加组件就能满足水平布局的效果，而我们每一个tab都可以使用另外一个组件，BottomNavigationItem来表示，它的参数如下所示

• 
  
• selected:是否被选中
  
• onClick：点击事件
  
• icon:图标组件，通常是个矢量图
  
• modifier:操作符
  
• enabled:是否可点击
  
• label：文案
  
• alwaysShowLabel:默认为true,表示文案常驻在图标底下，如果是false,那么只有等item被选中时候文案才会展示出来
  
• interactionSource:监听导航栏点击事件
  
• selectedContentColor:选中的颜色
  
• unselectedContentColor:未被选中的颜色
  

知道参数以后，我们就可以把底部导航栏添加到布局里面

selectedIndex记录着我们点击过的下标值，我们可以通过下标值来判断应该展示哪个页面，代码如下

一个简单的首页切换页面的效果就出来了，效果如下

侧边栏

刚刚我们看到Scaffold的参数里面还有大量drawerxxxx相关的参数，不用猜肯定知道是用来设置侧边栏的，其中drawerContent就是拿来写侧边栏里面的视图，那么我们也简单写个侧边栏布局看看

代码很简单就是一个头像加一个用户名，运行下代码看看

加了drawerContent以后我们在界面上轻松向右一滑就出来个侧边栏了，能够通过手势直接滑出侧边栏主要是因为Scaffold里面的drawerGesturesEnabled这个参数默认为true，我们如果说哪一天不要侧边栏了，又不想把代码删掉，可以直接把drawerGesturesEnabled设置为false就好了，但是这里有个问题，我们看到drawerxxx参数里面没有用来设置去打开侧边栏的参数，要知道现在应用当中但凡有侧边栏功能的，都会提供一个按钮提示用户去点击展示出侧边栏，还是说Compose里面的侧边栏里面没有这功能？当然不是，我们看下Scaffold里面第二个参数，也就是ScaffoldState，我们看下这个状态类里面都有啥

总共俩参数，第一个就是DrawerState,一看就知道是拿来设置侧边栏状态的，我们再去DrawerState里面看看

第一个参数DrawerValue就是拿来设置侧边栏打开还是关闭的，他有两个值，分别是Closed和Open,第二个参数是用来监听侧边栏开启或者关闭状态的，暂时用不到先忽略，这样我们先在代码当中创建一个ScaffoldState,并且传入一个DrawerState,代码如下

到了这一步我们知道了如果要通过某个按钮来展示侧边栏，只需要改变drawerState的DrawerValue属性就好，从Closed改变到Open,那怎么变呢？我们使用DrawerState里面提供的animateTo函数

我们看到animateTo函数里面第一个参数就是目标值，也就是我们需要设置成DrawerValue.Open的地方，第二个参数是个动画参数，因为侧边栏展示出来有个滑动的动画过程，当然如果不需要动画可以使用另一个函数snapTo就可以了，这个函数只需要设置一个targetValue值，另外无论是animateTo还是snapTo，都是挂起函数，所以我们还需要为它提供一个协程作用域，这里直接使用
rememberCoroutineScope函数来创建协程作用域

现在我们就可以在界面顶部的菜单按钮上设置一个打开侧边栏的动作，代码如下

代码到这里就结束了，我们看下效果

总结

Scaffold使用起来就相当于我们平时用过的自定义View一样，已经把一些常用的视图和逻辑已经封装在里面，我们开发时候可以使用已经被封装过的组件，也可以自己去写视图，开发起来也是很方便的.