Android Jetpack Compose - ModalNavigationDrawer、NavigationRail、PullToRefreshBox

一、ModalNavigationDrawer抽屉式导航栏使用 drawerContent提供 ModalDrawerSheet提供抽屉式导航栏的内容。可以通过从侧边滑动或点击按钮来打开抽屉式导航栏varselectedItemIndexbyremember{mutableStateOf(0)}ModalNavigationDrawer(drawerContent{ModalDrawerSheet{Text(抽屉式导航栏,modifierModifier.padding(16.dp))HorizontalDivider()NavigationDrawerItem(icon{Icon(Icons.Filled.Home,contentDescriptionnull)},label{Text(Home)},selectedselectedItemIndex0,onClick{selectedItemIndex0})NavigationDrawerItem(icon{Icon(Icons.Filled.Call,contentDescriptionnull)},label{Text(Call)},selectedselectedItemIndex1,onClick{selectedItemIndex1})NavigationDrawerItem(icon{Icon(Icons.Filled.Email,contentDescriptionnull)},label{Text(Email)},selectedselectedItemIndex2,onClick{selectedItemIndex2})NavigationDrawerItem(icon{Icon(Icons.Filled.Person,contentDescriptionnull)},label{Text(Person)},selectedselectedItemIndex3,onClick{selectedItemIndex3})}}){}控制抽屉式导航栏的打开和关闭使用 DrawerState它提供了 open 与 close 方法varselectedItemIndexbyremember{mutableStateOf(0)}valdrawerStaterememberDrawerState(initialValueDrawerValue.Closed)valscoperememberCoroutineScope()ModalNavigationDrawer(drawerStatedrawerState,drawerContent{ModalDrawerSheet{Text(抽屉式导航栏,modifierModifier.padding(16.dp))HorizontalDivider()NavigationDrawerItem(icon{Icon(Icons.Filled.Home,contentDescriptionnull)},label{Text(Home)},selectedselectedItemIndex0,onClick{selectedItemIndex0scope.launch{drawerState.close()}})NavigationDrawerItem(icon{Icon(Icons.Filled.Call,contentDescriptionnull)},label{Text(Call)},selectedselectedItemIndex1,onClick{selectedItemIndex1scope.launch{drawerState.close()}})NavigationDrawerItem(icon{Icon(Icons.Filled.Email,contentDescriptionnull)},label{Text(Email)},selectedselectedItemIndex2,onClick{selectedItemIndex2scope.launch{drawerState.close()}})NavigationDrawerItem(icon{Icon(Icons.Filled.Person,contentDescriptionnull)},label{Text(Person)},selectedselectedItemIndex3,onClick{selectedItemIndex3scope.launch{drawerState.close()}})}}){Box(modifierModifier.fillMaxSize(),contentAlignmentAlignment.Center,){Button(onClick{scope.launch{drawerState.open()}}){Text(打开抽屉式导航栏)}}}varselectedItemIndexbyremember{mutableStateOf(0)}valdrawerStaterememberDrawerState(initialValueDrawerValue.Closed)valscoperememberCoroutineScope()ModalNavigationDrawer(drawerStatedrawerState,gesturesEnabledfalse,drawerContent{ModalDrawerSheet{Text(抽屉式导航栏,modifierModifier.padding(16.dp))HorizontalDivider()NavigationDrawerItem(icon{Icon(Icons.Filled.Home,contentDescriptionnull)},label{Text(Home)},selectedselectedItemIndex0,onClick{selectedItemIndex0scope.launch{drawerState.close()}})NavigationDrawerItem(icon{Icon(Icons.Filled.Call,contentDescriptionnull)},label{Text(Call)},selectedselectedItemIndex1,onClick{selectedItemIndex1scope.launch{drawerState.close()}})NavigationDrawerItem(icon{Icon(Icons.Filled.Email,contentDescriptionnull)},label{Text(Email)},selectedselectedItemIndex2,onClick{selectedItemIndex2scope.launch{drawerState.close()}})NavigationDrawerItem(icon{Icon(Icons.Filled.Person,contentDescriptionnull)},label{Text(Person)},selectedselectedItemIndex3,onClick{selectedItemIndex3scope.launch{drawerState.close()}})}}){Scaffold(topBar{TopAppBar(colorstopAppBarColors(containerColorMaterialTheme.colorScheme.primaryContainer,titleContentColorMaterialTheme.colorScheme.primary,),title{IconButton(onClick{scope.launch{drawerState.open()}}){Icon(Icons.Default.MoreVert,contentDescriptionMoreVert)}})},){innerPadding-Column(modifierModifier.fillMaxSize().padding(innerPadding),horizontalAlignmentAlignment.CenterHorizontally,verticalArrangementArrangement.Center,){Text(内容区域)}}}二、NavigationRail侧边导航栏varselectedItemIndexbyremember{mutableStateOf(0)}NavigationRail{NavigationRailItem(icon{Icon(Icons.Filled.Home,contentDescriptionnull)},label{Text(Home)},selectedselectedItemIndex0,onClick{selectedItemIndex0})NavigationRailItem(icon{Icon(Icons.Filled.Call,contentDescriptionnull)},label{Text(Call)},selectedselectedItemIndex1,onClick{selectedItemIndex1})NavigationRailItem(icon{Icon(Icons.Filled.Email,contentDescriptionnull)},label{Text(Email)},selectedselectedItemIndex2,onClick{selectedItemIndex2})NavigationRailItem(icon{Icon(Icons.Filled.Person,contentDescriptionnull)},label{Text(Person)},selectedselectedItemIndex3,onClick{selectedItemIndex3})}varselectedItemIndexbyremember{mutableStateOf(0)}Row(modifierModifier.fillMaxSize()){NavigationRail{NavigationRailItem(icon{Icon(Icons.Filled.Home,contentDescriptionnull)},label{Text(Home)},selectedselectedItemIndex0,onClick{selectedItemIndex0})NavigationRailItem(icon{Icon(Icons.Filled.Call,contentDescriptionnull)},label{Text(Call)},selectedselectedItemIndex1,onClick{selectedItemIndex1})NavigationRailItem(icon{Icon(Icons.Filled.Email,contentDescriptionnull)},label{Text(Email)},selectedselectedItemIndex2,onClick{selectedItemIndex2})NavigationRailItem(icon{Icon(Icons.Filled.Person,contentDescriptionnull)},label{Text(Person)},selectedselectedItemIndex3,onClick{selectedItemIndex3})}Column(modifierModifier.fillMaxHeight().weight(1f),horizontalAlignmentAlignment.CenterHorizontally,verticalArrangementArrangement.Center){Text(内容区域)}}dataclassNavItem(valtitle:String,valicon:ImageVector,)valnavItemslistOf(NavItem(Home,Icons.Filled.Home),NavItem(Call,Icons.Filled.Call),NavItem(Email,Icons.Filled.Email),NavItem(Person,Icons.Filled.Person))varselectedItemIndexbyremember{mutableStateOf(0)}Row(modifierModifier.fillMaxSize()){NavigationRail{navItems.forEachIndexed{index,item-NavigationRailItem(icon{Icon(item.icon,contentDescriptionitem.title)},label{Text(item.title)},selectedselectedItemIndexindex,onClick{selectedItemIndexindex},)}}Column(modifierModifier.fillMaxHeight().weight(1f),horizontalAlignmentAlignment.CenterHorizontally,verticalArrangementArrangement.Center){when(selectedItemIndex){0-Text(Home)1-Text(Call)2-Text(Email)3-Text(Person)}}}三、PullToRefreshBox下拉刷新1、基本介绍PullToRefreshBox 组件用于实现下拉刷新该组件可以包裹可滚动内容关键参数如下isRefreshing指示刷新操作是否正在进行onRefresh当发起刷新时执行的函数2、演示varitemsbyremember{mutableStateOf(List(5){第${it1}项})}valscoperememberCoroutineScope()varisRefreshingbyremember{mutableStateOf(false)}PullToRefreshBox(modifierModifier.fillMaxSize(),isRefreshingisRefreshing,onRefresh{isRefreshingtruescope.launch{delay(1500)itemsList((1..10).random()){新数据${it1}}isRefreshingfalse}}){LazyColumn(modifierModifier.fillMaxSize(),contentPaddingPaddingValues(16.dp),verticalArrangementArrangement.spacedBy(8.dp)){items(items){item-Card(modifierModifier.fillMaxWidth(),colorsCardDefaults.cardColors(containerColorMaterialTheme.colorScheme.surfaceVariant)){Text(textitem,modifierModifier.padding(16.dp),styleMaterialTheme.typography.bodyLarge)}}}}