概述

现在市场上大多数的手机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的完成，我信任会对咱们的开发有很大的帮助。