Android Jetpack Compose - ModalNavigationDrawer、NavigationRail、PullToRefreshBox

一、ModalNavigationDrawer（抽屉式导航栏）

1. 使用 drawerContent，提供 ModalDrawerSheet（提供抽屉式导航栏的内容）。可以通过从侧边滑动或点击按钮来打开抽屉式导航栏

varselectedItemIndexbyremember{mutableStateOf(0)}ModalNavigationDrawer(drawerContent={ModalDrawerSheet{Text("抽屉式导航栏",modifier=Modifier.padding(16.dp))HorizontalDivider()NavigationDrawerItem(icon={Icon(Icons.Filled.Home,contentDescription=null)},label={Text("Home")},selected=selectedItemIndex==0,onClick={selectedItemIndex=0})NavigationDrawerItem(icon={Icon(Icons.Filled.Call,contentDescription=null)},label={Text("Call")},selected=selectedItemIndex==1,onClick={selectedItemIndex=1})NavigationDrawerItem(icon={Icon(Icons.Filled.Email,contentDescription=null)},label={Text("Email")},selected=selectedItemIndex==2,onClick={selectedItemIndex=2})NavigationDrawerItem(icon={Icon(Icons.Filled.Person,contentDescription=null)},label={Text("Person")},selected=selectedItemIndex==3,onClick={selectedItemIndex=3})}}){}

2. 控制抽屉式导航栏的打开和关闭，使用 DrawerState，它提供了 open 与 close 方法

varselectedItemIndexbyremember{mutableStateOf(0)}valdrawerState=rememberDrawerState(initialValue=DrawerValue.Closed)valscope=rememberCoroutineScope()ModalNavigationDrawer(drawerState=drawerState,drawerContent={ModalDrawerSheet{Text("抽屉式导航栏",modifier=Modifier.padding(16.dp))HorizontalDivider()NavigationDrawerItem(icon={Icon(Icons.Filled.Home,contentDescription=null)},label={Text("Home")},selected=selectedItemIndex==0,onClick={selectedItemIndex=0scope.launch{drawerState.close()}})NavigationDrawerItem(icon={Icon(Icons.Filled.Call,contentDescription=null)},label={Text("Call")},selected=selectedItemIndex==1,onClick={selectedItemIndex=1scope.launch{drawerState.close()}})NavigationDrawerItem(icon={Icon(Icons.Filled.Email,contentDescription=null)},label={Text("Email")},selected=selectedItemIndex==2,onClick={selectedItemIndex=2scope.launch{drawerState.close()}})NavigationDrawerItem(icon={Icon(Icons.Filled.Person,contentDescription=null)},label={Text("Person")},selected=selectedItemIndex==3,onClick={selectedItemIndex=3scope.launch{drawerState.close()}})}}){Box(modifier=Modifier.fillMaxSize(),contentAlignment=Alignment.Center,){Button(onClick={scope.launch{drawerState.open()}}){Text("打开抽屉式导航栏")}}}

varselectedItemIndexbyremember{mutableStateOf(0)}valdrawerState=rememberDrawerState(initialValue=DrawerValue.Closed)valscope=rememberCoroutineScope()ModalNavigationDrawer(drawerState=drawerState,gesturesEnabled=false,drawerContent={ModalDrawerSheet{Text("抽屉式导航栏",modifier=Modifier.padding(16.dp))HorizontalDivider()NavigationDrawerItem(icon={Icon(Icons.Filled.Home,contentDescription=null)},label={Text("Home")},selected=selectedItemIndex==0,onClick={selectedItemIndex=0scope.launch{drawerState.close()}})NavigationDrawerItem(icon={Icon(Icons.Filled.Call,contentDescription=null)},label={Text("Call")},selected=selectedItemIndex==1,onClick={selectedItemIndex=1scope.launch{drawerState.close()}})NavigationDrawerItem(icon={Icon(Icons.Filled.Email,contentDescription=null)},label={Text("Email")},selected=selectedItemIndex==2,onClick={selectedItemIndex=2scope.launch{drawerState.close()}})NavigationDrawerItem(icon={Icon(Icons.Filled.Person,contentDescription=null)},label={Text("Person")},selected=selectedItemIndex==3,onClick={selectedItemIndex=3scope.launch{drawerState.close()}})}}){Scaffold(topBar={TopAppBar(colors=topAppBarColors(containerColor=MaterialTheme.colorScheme.primaryContainer,titleContentColor=MaterialTheme.colorScheme.primary,),title={IconButton(onClick={scope.launch{drawerState.open()}}){Icon(Icons.Default.MoreVert,contentDescription="MoreVert")}})},){innerPadding->Column(modifier=Modifier.fillMaxSize().padding(innerPadding),horizontalAlignment=Alignment.CenterHorizontally,verticalArrangement=Arrangement.Center,){Text("内容区域")}}}

二、NavigationRail（侧边导航栏）

varselectedItemIndexbyremember{mutableStateOf(0)}NavigationRail{NavigationRailItem(icon={Icon(Icons.Filled.Home,contentDescription=null)},label={Text("Home")},selected=selectedItemIndex==0,onClick={selectedItemIndex=0})NavigationRailItem(icon={Icon(Icons.Filled.Call,contentDescription=null)},label={Text("Call")},selected=selectedItemIndex==1,onClick={selectedItemIndex=1})NavigationRailItem(icon={Icon(Icons.Filled.Email,contentDescription=null)},label={Text("Email")},selected=selectedItemIndex==2,onClick={selectedItemIndex=2})NavigationRailItem(icon={Icon(Icons.Filled.Person,contentDescription=null)},label={Text("Person")},selected=selectedItemIndex==3,onClick={selectedItemIndex=3})}

varselectedItemIndexbyremember{mutableStateOf(0)}Row(modifier=Modifier.fillMaxSize()){NavigationRail{NavigationRailItem(icon={Icon(Icons.Filled.Home,contentDescription=null)},label={Text("Home")},selected=selectedItemIndex==0,onClick={selectedItemIndex=0})NavigationRailItem(icon={Icon(Icons.Filled.Call,contentDescription=null)},label={Text("Call")},selected=selectedItemIndex==1,onClick={selectedItemIndex=1})NavigationRailItem(icon={Icon(Icons.Filled.Email,contentDescription=null)},label={Text("Email")},selected=selectedItemIndex==2,onClick={selectedItemIndex=2})NavigationRailItem(icon={Icon(Icons.Filled.Person,contentDescription=null)},label={Text("Person")},selected=selectedItemIndex==3,onClick={selectedItemIndex=3})}Column(modifier=Modifier.fillMaxHeight().weight(1f),horizontalAlignment=Alignment.CenterHorizontally,verticalArrangement=Arrangement.Center){Text("内容区域")}}

dataclassNavItem(valtitle:String,valicon:ImageVector,)valnavItems=listOf(NavItem("Home",Icons.Filled.Home),NavItem("Call",Icons.Filled.Call),NavItem("Email",Icons.Filled.Email),NavItem("Person",Icons.Filled.Person))varselectedItemIndexbyremember{mutableStateOf(0)}Row(modifier=Modifier.fillMaxSize()){NavigationRail{navItems.forEachIndexed{index,item->NavigationRailItem(icon={Icon(item.icon,contentDescription=item.title)},label={Text(item.title)},selected=selectedItemIndex==index,onClick={selectedItemIndex=index},)}}Column(modifier=Modifier.fillMaxHeight().weight(1f),horizontalAlignment=Alignment.CenterHorizontally,verticalArrangement=Arrangement.Center){when(selectedItemIndex){0->Text("Home")1->Text("Call")2->Text("Email")3->Text("Person")}}}

三、PullToRefreshBox（下拉刷新）

1、基本介绍

• PullToRefreshBox 组件用于实现下拉刷新，该组件可以包裹可滚动内容，关键参数如下

1. isRefreshing：指示刷新操作是否正在进行

2. onRefresh：当发起刷新时执行的函数

2、演示

varitemsbyremember{mutableStateOf(List(5){"第${it+1}项"})}valscope=rememberCoroutineScope()varisRefreshingbyremember{mutableStateOf(false)}PullToRefreshBox(modifier=Modifier.fillMaxSize(),isRefreshing=isRefreshing,onRefresh={isRefreshing=truescope.launch{delay(1500)items=List((1..10).random()){"新数据${it+1}"}isRefreshing=false}}){LazyColumn(modifier=Modifier.fillMaxSize(),contentPadding=PaddingValues(16.dp),verticalArrangement=Arrangement.spacedBy(8.dp)){items(items){item->Card(modifier=Modifier.fillMaxWidth(),colors=CardDefaults.cardColors(containerColor=MaterialTheme.colorScheme.surfaceVariant)){Text(text=item,modifier=Modifier.padding(16.dp),style=MaterialTheme.typography.bodyLarge)}}}}