概述

现在市场上大多数的手机APP的通用布局结构都是顶部有个顶部导航栏，底部有个底部导航栏，例如抖音的布局结构：

点击导航栏里面的各个项又可以跳转到相应的页面，现在这种结构特别流行，如果我们使用传统的View来实现会很费力。而且效果还不咋理想。所以Compose 给我们提供了一个组件叫脚手架（Scaffold)可以快速的实现一个类似的UI结构。

实例解析

Scaffold 组件实现了Material Design的布局结构，通过配合其他Material组件就可以轻松实现Matterial Design风格的界面，下面是实现一个包括首页布局，底部导航和侧边栏的简单例子，代码如下：

@Composable
fun ScaffoldDemo() {var selectedItem by remember {mutableStateOf(0)}val items = listOf(Item("主页", R.drawable.home_page),Item("列表", R.drawable.list_page),Item("设置", R.drawable.setting_page))val scaffoldState = rememberScaffoldState()val scope = rememberCoroutineScope()Scaffold(drawerContent = {Text(text = "我是侧边栏")},scaffoldState = scaffoldState,topBar = {TopAppBar(title = {Text(text = "主页")},navigationIcon = {IconButton(onClick = { /*TODO*/ }) {Icon(imageVector = Icons.Filled.Menu,contentDescription = null);}})}, bottomBar = {BottomNavigation {items.forEachIndexed { index, item ->BottomNavigationItem(selected = selectedItem == index,onClick = { selectedItem = index },icon = {Icon(painterResource(id = item.icon), null)},alwaysShowLabel = false,label = {Text(text = item.name)})}}}) {Box(modifier = Modifier.fillMaxSize(),contentAlignment = Alignment.Center) {Text(text = "主页界面")}BackHandler(enabled = scaffoldState.drawerState.isOpen) {scope.launch {scaffoldState.drawerState.close()}}}
}data class Item(val name: String,val icon: Int
)

然后我们将其运行起来，在我们的Activity中调用
ScaffoldDemo()函数就可以了。

class MainActivity : ComponentActivity() {@SuppressLint("SetJavaScriptEnabled")override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {ScaffoldDemo()}}
}

运行效果：

从上面的代码中可以看到，Scaffold会自动处理好各自的位置BottomNavigation组件创造了底部导航栏的总体布局，比如高度等，这些都是按照Material Design风格设计的，如果要修改整体的颜色，可以在BottomNavigation的其他参数上修改。

BottomNavigationItem组件则创建了具体的导航图标及标签，在BottomNavigationItem组件中可以设置一些其他参数，例如选中或者是未选中时图标的颜色。在上述例子中，我们设置了alwaysShowLabel = false。即只有是选中当前页面时，才会展示标签的文字。

在上面的例子中我们还添加了一个侧边栏，通过Scaffold添加侧边栏非常简单，Scaffold有一个drawerContent参数，只需要传入一个自定义的Composable的content即可。侧边栏做好了后，我们还需要处理下按键事件，因为如果我们不做处理的情况下，按下系统的返回键，应用会直接退出，而此时我们希望是关闭侧边栏。所以Compose提供了用于拦截系统返回键的组件BackHandler。此外，我们通过ScaffoldState可以监听侧边栏是否打开。具体的逻辑为：我们通过rememberScaffoldState()获取到包含侧边栏状态的ScaffoldState,当侧边栏被打开时，scaffoldState.drawerState.isOpen被更新为true,此时，BackHandler开始监听系统返回键事件，返回键事件被按下时会通过scaffoldState来关闭侧边栏。

总结

本文主要是简单介绍了Compose的Scaffold 脚手架的使用，使用脚手架可以极大的节约我们开发的时间，让我们快速的搭建一个app的界面结构，并且代码也比使用传统view少了很多，而且添加侧边栏还非常简便，非常适合快速实现需求。建议读者可以去研究下Scaffold的实现，我相信会对我们的开发有很大的帮助。