节后榜首篇文章，略微轻松一点，简略介绍下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相同，现已把一些常用的视图和逻辑现已封装在里边，咱们开发时候能够运用现已被封装过的组件，也能够自己去写视图，开发起来也是很方便的.