JetpackCompose 使用compose navigation实现底部导航栏

依赖项

implementation(libs.androidx.navigation.compose)
implementation (libs.androidx.hilt.navigation.compose)

编写router

enum class Screen(
    val route:String,
    @StringRes val label: Int,
    val iconSelected:ImageVector?=null,
    val iconNotSelected: ImageVector? = null,
    val iconSelectedId: Int? = null,
    val iconNotSelectedId: Int? = null,
)

导航栏组件

调用NavController进行跳转

fun BottomNavigation(
    modifier: Modifier,
    navController: NavController
){
    val navBackStackEntry by  navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route ?:Screen.Home.route
    Column {
        NavigationBar(
            tonalElevation = 8.dp
        ) {
            Screen.entries.forEach {screen->
                NavigationBarItem(
                    selected = currentRoute==screen.route ,
                    onClick = {
                        navController.navigate(screen.route){
                            popUpTo(navController.graph.findStartDestination().id){
                                saveState=true
                            }
                            launchSingleTop = true
                            restoreState = true
                        }
                    },
               .....
        }

    }
}

页面内使用

Scaffold(
    bottomBar = {
        BottomNavigation(
            modifier = Modifier,
            navController =navController
        )
    }
){ innerPadding -> //RouterView
    NavHost(
        navController =navController,
        startDestination = Screen.Home.route,
        modifier = Modifier.padding(innerPadding)

    ){
        composable(Screen.Home.route){
            UserHome(modifier = Modifier)
        }
        composable(Screen.Synthesis.route){
            SynthesisPage(modifier = Modifier)
        }
        composable(Screen.Record.route){
            RecordPage(modifier = Modifier)
        }
    }
}

坑点

不清楚问题来源,可能是因为kapt提供的插件版本问题,引用导航后组件的viewmodel不能再使用原版的ViewModel()方法构造,得替换为hiltViewModel(),否则会爆找不到ViewModel构造方法的错误

@Composable
fun SynthesisPage(
    modifier: Modifier,
    state:SynthesisViewModel= hiltViewModel()
){
    Surface(modifier=Modifier.fillMaxWidth().fillMaxHeight()) {
        Text(text = "Synthesis")
        
    }
    
}