Android JetPack Compose组件中Scaffold的应用

一、 创建Activity Empty Compose模块
在Android Studio中创建一个新的项目，选择一个Empty Compose Activity,如下图所示：

二、搭建Scaffold脚手架主结构

/** * Main activity * 定义主活动 * @constructor Create empty Main activity */class MainActivity : ComponentActivity() {    override fun onCreate(savedInstanceState: Bundle" />
 
/** 定义首页界面*/@Preview@Composablefun HomeScreen(){    Column(modifier= Modifier        .fillMaxSize()        .padding(10.dp)        .background(colorResource(id = R.color.teal_200)),          horizontalAlignment = Alignment.CenterHorizontally,          verticalArrangement = Arrangement.Center,          content = {            Text(text="首页界面",color=Color.White,                 fontSize=36.sp, fontWeight = FontWeight.ExtraBold)         })}/**定义配置界面*/@Preview@Composablefun SettingScreen(){    Column(        content = {            Text("配置界面",                fontSize=36.sp,                color = Color.White)        },        modifier = Modifier            .fillMaxSize()            .background(colorResource(R.color.teal_200)),        horizontalAlignment = Alignment.CenterHorizontally,        verticalArrangement = Arrangement.Center,    )}/**定义帮助界面*/@Preview@Composablefun HelpScreen(){    Column(modifier= Modifier.fillMaxSize()                             .background(colorResource(id = R.color.teal_200)),           verticalArrangement = Arrangement.Center,           horizontalAlignment = Alignment.CenterHorizontally){            Text("帮助界面",color= Color.White,fontSize=36.sp)        }}
也可以定义通用的组合函数，然后让定义个界面的组合函数来调用，形如：
@Composablefun DisplayText(content:String){    Column(modifier= Modifier.fillMaxSize()                             .background(colorResource(id = R.color.teal_200)),           verticalArrangement = Arrangement.Center,           horizontalAlignment = Alignment.CenterHorizontally){            Text("$content",color= Color.White,fontSize=36.sp)        }}
则三个界面的修改如下：
/** 定义首页界面*/@Preview@Composablefun HomeScreen(){    DisplayText("首页界面")}
/**定义配置界面*/@Preview@Composablefun SettingScreen(){    DisplayText("配置界面")}
/**定义帮助界面*/@Preview@Composablefun HelpScreen(){    DisplayText("帮助界面")}
四、将切换屏幕界面定义在密封类中
/** * 定义要切换界面的密封类 * @property route String 导航线路 * @property title String  标题 * @property icon ImageVector 图标 * @property screenToLoad [@androidx.compose.runtime.Composable] Function0 加载动作处理 * @constructor */sealed class Screens(val route:String, val title:String, val icon: ImageVector, val screenToLoad:@Composable ()-> Unit){    object HomePage:Screens("home","首页界面", Icons.Filled.Home,{        HomeScreen()    })    object SettingPage:Screens("setting","配置界面",Icons.Filled.Settings,{        SettingScreen()    })    object HelpPage:Screens("help","帮助界面",Icons.Filled.Info,{        HelpScreen()    })}
定义保存屏幕界面的列表中
 //定义要切换的界面列表
val screens = listOf(Screens.HomePage,Screens.SettingPage,Screens.HelpPage)
五、创建侧滑菜单的导航
 创建侧滑菜单，显示效果如下所示：
（1）定义侧滑菜单的顶部内容
/** * Top bar view * 定义头部 */@Preview@Composablefun HeaderBarView(){   Box(modifier= Modifier       .fillMaxWidth()       .wrapContentHeight()       .background(color = colorResource(id = R.color.purple_200))){       Row(modifier= Modifier           .fillMaxWidth()           .padding(5.dp)){           Column{                   Image(painter=painterResource(id = android.R.mipmap.sym_def_app_icon),                       contentDescription = "logo图标",                       modifier= Modifier .width(dimensionResource(id = R.dimen.image_width))                           .height(60.dp)                           .clip(shape = CircleShape)                           .background(Color.Black))               }//end Column          Column{                   Text(stringResource(id = R.string.title_robot))                   Text(stringResource(id = R.string.title_introduction))           }       }//end Column   }}
（2）定义侧滑菜单
/** * 定义侧滑的下面的菜单 * @param scaffoldState ScaffoldState 脚手架的状态 * @param action Function1" />
 定义底部导航栏的内容
 
/** * 定义应用底部的视图  *接收从外部传递的要显示的当前界面 */@Composablefun BottomViews(currentScreen:MutableState){    BottomAppBar(        backgroundColor = Color.Blue,        contentColor = Color.Yellow){            screens.forEach { screen->                    BottomNavigationItem(                        icon = {                               Icon(imageVector = item.icon, contentDescription = "${screen.title}")                        } ,                        label={                             Text("${screen.title}")                        },                        selected = screen.route == currentScreen.value.route,                        onClick = {                            currentScreen.value = screen                        }                    )            }       }}
(3) 底部导航栏加入到脚手架中，并实现底部导航
 在MainActivity.kt中的脚手架中，增加底部导航栏的处理
@Composablefun MainScreen(){    val scaffoldState = rememberScaffoldState()    val currentScreens:MutableState = remember{ mutableStateOf(Screens.HomePage) }    Scaffold(scaffoldState = scaffoldState,    topBar = {        TopBarView(currentScreen,scaffoldState)    },    drawerContent = {        HeaderBarView()        DrawerViews(scaffoldState){screen->            currentScreens.value = screen        }    },    content={        currentScreens.value.screenToLoad()    },    bottomBar = {        BottomViews(currentScreen = currentScreens)    },    ......}
八、脚手架增加浮动按钮返回首页的处理
 
@Composablefun MainScreen(){    //脚手架的状态    val scaffoldState = rememberScaffoldState()    //当前显示的界面    val currentScreen:MutableState = remember{ mutableStateOf(Screens.HomePage) }    //当前的上下文    val context = LocalContext.current            Scaffold(scaffoldState = scaffoldState,    topBar = {        TopBarView(currentScreen,scaffoldState)    },    drawerContent = {        HeaderBarView()        DrawerViews(scaffoldState){screen->            currentScreen.value = screen        }    },    content={        currentScreen.value.screenToLoad()    },    bottomBar = {        BottomViews(currentScreen = currentScreen)    },    floatingActionButton = {        FloatingActionButton(        backgroundColor = Color.Red,             onClick = {            Toast.makeText(context,"返回首页",Toast.LENGTH_LONG).show()            currentScreen.value = Screens.HomePage        }){            Icon(Icons.Filled.Home, contentDescription = "返回首页")        }    })}
参考文献
 （1）https://www.geeksforgeeks.org/bottom-navigation-bar-in-android-jetpack-compose/
 （2）https://amryousef.me/side-drawer-jetpack-compose