目录

一、Navigation

二、BottomNavigation

---

        Compose是一个偏向静态刷新的UI组件，如果不想要自己管理页面切换的复杂状态，可以以使用Navigation组件。

        页面间的切换可以NavHost，使用底部页面切换栏，可以使用脚手架的bottomBar+NavHost。

一、Navigation页面跳转

        在Compose中使用navigation需要增加依赖：

implementation("androidx.navigation:navigation-compose:2.9.0")

        代码：

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import cn.yy.navhost.ui.theme.NavhostThemeclass MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)enableEdgeToEdge()setContent {NavhostTheme {AppNavigation()}}}
}@Composable
fun AppNavigation() {val navController = rememberNavController()NavHost(navController = navController,startDestination = "home") {composable("welcome") {WelcomeScreen(navController = navController)}composable("login") {LoginScreen(navController = navController)}composable("home") {HomeScreen(navController = navController)}}
}@Composable
fun HomeScreen(navController: NavHostController) {Column(verticalArrangement = Arrangement.Center,modifier = Modifier.fillMaxSize()) {Text(text = "HomeScreen")Button(onClick = {navController.navigate("welcome")}) {Text(text = "welcome")}}
}@Composable
fun LoginScreen(navController: NavHostController) {Column(verticalArrangement = Arrangement.Center,modifier = Modifier.fillMaxSize()) {Text(text = "LoginScreen")Button(onClick = {navController.navigate("home")}) {Text(text = "home")}}
}@Composable
fun WelcomeScreen(navController: NavHostController) {Column(verticalArrangement = Arrangement.Center,modifier = Modifier.fillMaxSize()) {Text(text = "WelcomeScreen")Button(onClick = {navController.navigate("login")}) {Text(text = "login")}}
}@Preview(showBackground = true)
@Composable
fun GreetingPreview() {NavhostTheme {AppNavigation()}
}

        效果：

        

二、BottomNavigation页面跳转栏

        将Navigation集成脚手架（scaffold）中的bottomBar。

        先进行屏幕定义：

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.filled.ShoppingCart
import androidx.compose.ui.graphics.vector.ImageVectorsealed class Screen(val route: String,val label: String,val icon: ImageVector
) {object Home : Screen("home", "home", Icons.Filled.Home)object Favorite : Screen("favorite", "favorite", Icons.Filled.Favorite)object Person : Screen("person", "person", Icons.Filled.Person)object ShoppingCart : Screen("shoppingCart", "shoppingCart", Icons.Filled.ShoppingCart)
}val items = listOf(Screen.Home,Screen.Favorite,Screen.Person,Screen.ShoppingCart,
)

        再使用脚手架：

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.NavDestination.Companion.hierarchy
import androidx.navigation.NavGraph.Companion.findStartDestination
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController@Composable
fun BottomNav() {var navController = rememberNavController()Scaffold(bottomBar = {NavigationBar {val navBackStackEntry = navController.currentBackStackEntryAsState()var currentDestination = navBackStackEntry.value?.destinationitems.forEachIndexed { index, screen ->NavigationBarItem(icon = { Icon(screen.icon, contentDescription = null) },label = { Text(screen.label) },selected = currentDestination?.hierarchy?.any { it.route == screen.route } == true,onClick = {navController.navigate(screen.route) {popUpTo(navController.graph.findStartDestination().id) {saveState = true}launchSingleTop = truerestoreState = true}},)}}}) { innerPadding ->NavHost(navController,startDestination = Screen.Home.route,Modifier.padding(innerPadding)) {composable(Screen.Home.route) { DemoScreen("Home") }composable(Screen.Favorite.route) { DemoScreen("Favorite") }composable(Screen.Person.route) { DemoScreen("Person") }composable(Screen.ShoppingCart.route) { DemoScreen("ShoppingCart") }}}
}@Composable
fun DemoScreen(name: String) {Column(verticalArrangement = Arrangement.Center,modifier = Modifier.fillMaxSize()) {Text("This is $name")}
}@Preview
@Composable
fun PreBottomNav() {BottomNav()
}

        效果：