Jetpack Compose 底部导航栏 注意：您需要有Android Studio Arctic Fox 及更高版本才能在您的项目中使用Jetpack Compose。添加库转到您的项目级gradle.build文件，并添加以下扩展名：buildscript { ext { compose_version = '1.0.2' } // ... }现在转到应用级gradle.build文件，并添加以下内容：android { // ... kotlinOptions { jvmTarget = '1.8' useIR = true } buildFeatures { // ... compose true } composeOptions { kotlinCompilerExtensionVersion compose_version } } dependencies { // ... implementation "androidx.compose.ui:ui:$compose_version" implementation "androidx.compose.material:material:$compose_version" implementation "androidx.compose.ui:ui-tooling:$compose_version" implementation "androidx.navigation:navigation-compose:2.4.0-alpha08" implementation "androidx.activity:activity-compose:1.3.1" // ... }创建顶部栏打开activity（例如MainActivity.kt），并在类之外添加以下可组合函数以创建topbar@Composable fun TopBar() { TopAppBar( title = { Text(text = stringResource(R.string.app_name), fontSize = 18.sp) }, backgroundColor = colorResource(id = R.color.colorPrimary), contentColor = Color.White ) } @Preview(showBackground = true) @Composable fun TopBarPreview() { TopBar() }创建底部导航栏在创建底部导航栏之前，我们必须准备Item；创建一个Sealed Class并指定NavigationItem作为名称。并使用参数为每个条形项目创建一个模型：route：必须是unique。用来从底部导航栏导航到视图icon : 栏项的图标title : 栏项的名称sealed class NavigationItem(var route: String, var icon: Int, var title: String) { object Home : NavigationItem("home", R.mipmap.ic_home, "首页") object Recommend : NavigationItem("recommend", R.mipmap.ic_recommend, "关注") object Books : NavigationItem("books", R.mipmap.ic_book, "书城") object Profile : NavigationItem("profile", R.mipmap.ic_profile, "我的") }同样，在MainActivity.kt 中，添加以下可组合函数：@Composable fun BottomNavigationBar() { val items = listOf( NavigationItem.Home, NavigationItem.Recommend, NavigationItem.Books, NavigationItem.Profile ) BottomNavigation( backgroundColor = colorResource(id = R.color.colorPrimary), contentColor = Color.White ) { items.forEach { item -> BottomNavigationItem( icon = { Icon(painterResource(id = item.icon), contentDescription = item.title) }, label = { Text(text = item.title) }, selectedContentColor = Color.White, unselectedContentColor = Color.White.copy(0.4f), alwaysShowLabel = true, selected = false, onClick = { /* Add code later */ } ) } } } @Preview(showBackground = true) @Composable fun BottomNavigationBarPreview() { BottomNavigationBar() }创建包含顶部栏和底部导航栏的视图这里我将使用Scaffold，创建一个名为MainScreen()的新组合函数，里面有一个Scaffold布局，并添加我们之前创建的TopBar()和BottomNavigationBar()class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MainScreen() } } } @Composable fun MainScreen() { Scaffold( topBar = { TopBar() }, bottomBar = { BottomNavigationBar() } ) { /* Add code later */ } } @Preview(showBackground = true) @Composable fun MainScreenPreview() { MainScreen() }将导航栏与视图连接起来（导航）连接之前，需要先创建Views,我创建了4个名为*Screen的 Kotlin 文件HomeScreen.kt@Composable fun HomeScreen() { Column( modifier = Modifier .fillMaxSize() .background(colorResource(id = R.color.colorPrimaryDark)) .wrapContentSize(Alignment.Center) ) { Text( text = "Home View", fontWeight = FontWeight.Bold, color = Color.White, modifier = Modifier.align(Alignment.CenterHorizontally), textAlign = TextAlign.Center, fontSize = 25.sp ) } } @Preview(showBackground = true) @Composable fun HomeScreenPreview() { HomeScreen() }RecommendScreen.kt@Composable fun RecommendScreen() { Column( modifier = Modifier .fillMaxSize() .background(colorResource(id = R.color.colorPrimaryDark)) .wrapContentSize(Alignment.Center) ) { Text( text = "Recommend View", fontWeight = FontWeight.Bold, color = Color.White, modifier = Modifier.align(Alignment.CenterHorizontally), textAlign = TextAlign.Center, fontSize = 25.sp ) } } @Preview(showBackground = true) @Composable fun RecommendScreenPreview() { RecommendScreen() }BooksScreen.kt@Composable fun BooksScreen() { Column( modifier = Modifier .fillMaxSize() .background(colorResource(id = R.color.colorPrimaryDark)) .wrapContentSize(Alignment.Center) ) { Text( text = "Books View", fontWeight = FontWeight.Bold, color = Color.White, modifier = Modifier.align(Alignment.CenterHorizontally), textAlign = TextAlign.Center, fontSize = 25.sp ) } } @Preview(showBackground = true) @Composable fun BooksScreenPreview() { BooksScreen() }ProfileScreen.kt@Composable fun ProfileScreen() { Column( modifier = Modifier .fillMaxSize() .background(colorResource(id = R.color.colorPrimaryDark)) .wrapContentSize(Alignment.Center) ) { Text( text = "Profile View", fontWeight = FontWeight.Bold, color = Color.White, modifier = Modifier.align(Alignment.CenterHorizontally), textAlign = TextAlign.Center, fontSize = 25.sp ) } } @Preview(showBackground = true) @Composable fun ProfileScreenPreview() { ProfileScreen() }接下来在BottomNavigationBar中，添加参数navController，并创建navBackStackEntry和currentRoute。使用currentRoute，我们检查是否必须突出显示栏项目，然后使用navigate()方法导航到视图@Composable fun BottomNavigationBar(navController: NavController) { val items = listOf( NavigationItem.Home, NavigationItem.Recommend, NavigationItem.Books, NavigationItem.Profile ) BottomNavigation( backgroundColor = colorResource(id = R.color.colorPrimary), contentColor = Color.White ) { val navBackStackEntry by navController.currentBackStackEntryAsState() val currentRoute = navBackStackEntry?.destination?.route items.forEach { item -> BottomNavigationItem( icon = { Icon(painterResource(id = item.icon), contentDescription = item.title) }, label = { Text(text = item.title) }, selectedContentColor = Color.White, unselectedContentColor = Color.White.copy(0.4f), alwaysShowLabel = true, selected = currentRoute == item.route, onClick = { navController.navigate(item.route) { navController.graph.startDestinationRoute?.let { route -> popUpTo(route) { saveState = true } } launchSingleTop = true // 重新选择同一项目时避免同一目的地的多个副本 restoreState = true } } ) } } } @Preview(showBackground = true) @Composable fun BottomNavigationBarPreview() { // BottomNavigationBar() }创建一个新的可组合函数并将其命名为Navigation()，参数为NavHostController类型的参数navController。在这里，我们创建了一个NavHost，我们将Home视图设置为startDestination，我们将每个View的路由设置为可组合的。@Composable fun Navigation(navController: NavHostController) { NavHost(navController, startDestination = NavigationItem.Home.route) { composable(NavigationItem.Home.route) { HomeScreen() } composable(NavigationItem.Recommend.route) { RecommendScreen() } composable(NavigationItem.Books.route) { BooksScreen() } composable(NavigationItem.Profile.route) { ProfileScreen() } } }在MainScreen()中创建NavigationController，并将其传递给BottomNavigationBar和Navigation@Composable fun MainScreen() { val navController = rememberNavController() Scaffold( topBar = { TopBar() }, bottomBar = { BottomNavigationBar(navController) } ) { Navigation(navController) } }