当前位置：首页 > news >正文

Android笔记【12】脚手架Scaffold和导航Navigation

news 来源：原创 2025/5/11 8:26:52

一、前言

学习课程时，对于自己不懂的点的记录。

对于cy老师第二节课总结。

二、内容

1、PPT介绍scaffold

2、开始代码实操

先新建一个screen包，写一个Homescreen函数，包括四个页面。

再新建一个compenent包，写一个displayText函数，是对四个页面容器的统一封装。里面是一个Box容器修饰。再回到Homescreen中传入不同参数以示区别。

在screen包中，创建一个Screen的类来管理这些界面。可继承的，这个类参数不仅要有route,title,icon 还要有一个加载页面函数 @Composable ()->unit 。在这个类里面实现界面的数据对象，最后将这些对象存在screens列表中。

在screen包中，创建一个Mainscreen函数，写脚手架。要传入当前页面可以用currentScreen变量来记录到内存，并注意变量是MutableState<Screen>

好。按照这样写，从topAppBar开始写，最后content大括号部分Box容器可以用currentScreen.value.loadScreen.invoke()展示页面主体及上面效果。

topAppbar部分的action里继续写下拉菜单。先设置一个变量expanded表示下来与否，写一个Button里面是DropDownMenu。这一部分用screens.forEach来设置，并在最后加一个退出图标。最后将这繁琐一大部分放到Compenent包里创建MenuViews。

再写Bottombar导航NavigationBarItem部分，也是screens.forEach 选中页面，点击切换。同样剪切到Compenent的BottomViews里。

然后写悬浮按钮。FloatingActionButton。点击就将currentScreen切换到HomeScreen，这里面还有一些设计样式的布局。

最后写侧拉页面，在component包里新建一个DrawViews函数。drawContent分为DrawerHead和DrawerBottom。DrawerHead细致写：

val (imgRef,titleRef,contentRef) = remember{createRefs()}
createVerticalChain(titleRef,contentRef, chainStyle = ChainStyle.Spread)

没听清这两个约束布局效果。设置水平竖直引导线控制位置。写了三个部分。

DrawerBottom写导航。Screen.forEach后，NavigationBarItem有图标标签，选中就跳转，还可以颜色修饰。主页面的跳转也可以改成

DrawViews(drawerState,currentScreen)

最后将DrawViews和MainScreen结合。记录一个状态变量，但无法直接设置值，需要在协程中打开运行。在DrawViews退出操作也同样是协程。

OK!写完！！后面还有一些对于代码优化方面内容。

优化一：将状态封装定义一个类StateHolder，实现一个rememberState函数。定义一个容器，四个状态就是类里面属性。实现一个组合函数，将状态默认值保存至内存中，需要时再提取出来，再用这四个值创建四个对象。

//    val currentScreen:MutableState<Screen> =remember{ mutableStateOf(Screen.HomePage) }
//    val expanded = remember { mutableStateOf(false) }
//    val drawerState = rememberDrawerState(DrawerValue.Closed)
//    val scope= rememberCoroutineScope()val stateHolder= rememberState()

改成

//将状态保存在状态容器中
class stateHolder(val drawerState: DrawerState,val currentScreen: MutableState<Screen>,val expanded:MutableState<Boolean>,val scope: CoroutineScope) {}@Composable
fun rememberState(drawerState: DrawerState= rememberDrawerState(initialValue = DrawerValue.Closed),currentScreen: MutableState<Screen> = remember { mutableStateOf(Screen.HomePage) },expanded:MutableState<Boolean> = remember { mutableStateOf(false) },scope: CoroutineScope= rememberCoroutineScope()):stateHolder
= remember(drawerState,currentScreen,expanded,scope) {  //stateHolder(drawerState,currentScreen,expanded,scope)
}

优化二：利用导航。（自己先同步和定义和库依赖）

定义MainScreen2。不需要界面，只需要route,icon,title。加载页面也是我们自己操作。定义导航图，导航数组，控件（数组的）。传递参数route。继续写NavigationBarItem一样的选中调换。区别：不用记录当前状态，只需route就可跳转。

@Composable
fun NavigationGraphScreen(navController: NavHostController){//顶层的导航控件一定要是数组的 否则后面会出错NavHost(navController = navController, startDestination = "home") {composable(route = "home") {HomeScreen()}composable(route = "config") {ConfigScreen()}composable(route = "help") {HelpScreen()}}
}@Preview
@Composable
fun MainScreen2() {val navController: NavHostController = rememberNavController()Scaffold(bottomBar = {BottomAppBar {screens.forEach{NavigationBarItem(selected =navController.currentDestination?.route==it.route ,onClick = {navController.navigate(it.route)},icon = {Icon(it.icon, contentDescription = "null")})}}}) {Box (modifier = Modifier.padding(it)){NavigationGraphScreen(navController)}

细节：将页面压栈的清栈操作需要考虑。

现在放上源代码:

【超级会员V1】通过百度网盘分享的文件：navigati…
链接:https://pan.baidu.com/s/1xetKh4LJ9SMQRA2gMUi43g?pwd=rx2c
提取码:rx2c
复制这段内容打开「百度网盘APP 即可获取」

一、前言

二、内容

相关文章：