Jetpack Compose：底部栏导航下全屏页面隐藏底部栏的实现方案

核心思路 #

放弃嵌套NavHost，改用一个顶级NavHost管理所有页面（包括底部栏的3个目的地和设置页）。通过判断当前导航目的地是否属于底部栏的目标集合，动态控制底部应用栏的显示/隐藏。

步骤实现 #

1. 定义导航图（nav_graph.xml） #

把所有页面放在同一个导航图里，明确区分底部栏目的地和全屏页面：

<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph"
    app:startDestination="@id/homeFragment">

    <!-- 底部栏对应的3个目的地 -->
    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.HomeFragment"
        android:label="Home" />

    <fragment
        android:id="@+id/searchFragment"
        android:name="com.example.SearchFragment"
        android:label="Search" />

    <fragment
        android:id="@+id/profileFragment"
        android:name="com.example.ProfileFragment"
        android:label="Profile" />

    <!-- 需要隐藏底部栏的全屏设置页 -->
    <fragment
        android:id="@+id/settingsFragment"
        android:name="com.example.SettingsFragment"
        android:label="Settings" />

</navigation>

2. 主Activity布局（activity_main.xml） #

放置顶级NavHost和底部应用栏，布局结构简洁：

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.navigation.fragment.NavHostFragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/bottom_nav_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

3. 主Activity逻辑控制底部栏显示 #

在MainActivity中监听导航目的地变化，动态切换底部栏可见性：

class MainActivity : AppCompatActivity() {
    private lateinit var navController: NavController
    private lateinit var bottomNav: BottomNavigationView

    // 底部栏对应的目的地ID集合
    private val bottomBarDestinations = setOf(
        R.id.homeFragment,
        R.id.searchFragment,
        R.id.profileFragment
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        bottomNav = findViewById(R.id.bottom_nav)
        val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
        navController = navHostFragment.navController

        // 关联底部栏与导航控制器
        bottomNav.setupWithNavController(navController)

        // 监听目的地切换，控制底部栏显示
        navController.addOnDestinationChangedListener { _, destination, _ ->
            bottomNav.visibility = if (bottomBarDestinations.contains(destination.id)) {
                View.VISIBLE
            } else {
                View.GONE
            }
        }
    }
}

4. HomeFragment中跳转到设置页 #

直接通过NavController完成跳转，无需嵌套结构：

class HomeFragment : Fragment() {
    private lateinit var navController: NavController

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        navController = findNavController()

        // 设置页跳转按钮点击事件
        view.findViewById<Button>(R.id.btn_go_settings).setOnClickListener {
            navController.navigate(R.id.settingsFragment)
        }
    }
}

优势说明 #

• 避免嵌套NavHost带来的导航逻辑混乱，所有页面统一管理
• 通过目的地ID集合精准控制底部栏显示，逻辑清晰易维护
• 代码结构简洁，后续新增页面只需更新导航图和目的地集合

内容的提问来源于stack exchange，提问作者Ait-Gacem Nabil