Jetpack：020-Jetpack导航示例：底部导航栏

最新推荐文章于 2025-10-24 18:22:17 发布

原创

最新推荐文章于 2025-10-24 18:22:17 发布 · 494 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#移动开发 #Jetpack #compose #脚手架scaffold #底部导航栏

本文详细介绍了在Jetpack中使用Compose实现底部导航栏的步骤，包括创建NavController、NavHost和使用Scaffold。通过示例代码和分析，展示了如何在Compose中构建并管理底部导航功能，以及其与传统Fragment/Activity方法的对比。

我们在上一章回中介绍了Jetpack中导航相关的内容，本章回中主要介绍 导航的综合示例：底部导航栏。闲话休提，让我们一起Talk Android Jetpack吧！

1. 概念介绍

我们在前面章回中介绍过底部导航栏的知识，如果有看官忘记的话可以点击这里查看之前的文章，本章回在此基础上添加导航功能。也就是说点击不同的底部导航标签切换到不同的页面。

回想一下，我们在使用Fragment和Activity实现底部导航时的做法：创建一个Activity并且在Activity中包含Fragment容器，通过Fragment容器来切换Fragment，进而实现底部导航功能。大家看完本章回的内容后就回来对比一下哪种方式的导航方便一些。

2. 使用方法

创建底部导航的方法和在compose中使用Navigation库实现导航的方法类似，下面是详细的使用步骤：

创建NavController；
创建NavHost,并且把各个页面添加到容器中；
通过NavController的navigate方法实现各个页面之间的导航；

3. 代码与分析

3.1 示例代码

介绍完创建底部导航的方法后，我们通过具体的示例代码来演示：

fun ExScaffold(
) {
   
   

    //这个NavController主要用来切换底部的导航，只能在这里获取，不能在底部导航的方法中获取，不会导航栏会出现在屏幕上方
    val  naviController = rememberNavController()

    Scaffold(
        modifier = Modifier.background(color = MaterialTheme.colorScheme.primary),
        topBar = {
   
    CustomCenterAppBar()},

        bottomBar = {
   
    BottomNaviBarTemplate(navController = naviController)},

        //控制FAB的位置,只有两种
        floatingActionButtonPosition = FabPosition.End,
        floatingActionButton = {
   
    CustomFAB(snackbarHostState, scope) },
    ) {
   
   innerPadding->
        Column(modifier = Modifier
            .padding