Jetpack Navigation Component 处理带有底部导航的导航控制器和它的 Back Stack 导航

Question

您好，我正在开发一个应用程序，但在导航视图中的导航卡住了。

例如，我有活动，并且在里面我定义了导航主机控制器，如下所示

    setSupportActionBar(mMainToolbar);

    mAppBarConfiguration = new AppBarConfiguration.Builder(
            R.id.homeFragment, R.id.questionBankFragment,
            R.id.testFragment, R.id.dailyHuntFragment,
            R.id.liveClassesFragment)
            .setOpenableLayout(mMainDrawerLayout)
            .build();

    View mNavigationViewHeaderView = mNavigationView.getHeaderView(0);

    mNavHostFragment = getSupportFragmentManager().findFragmentById(R.id.nav_host_fragment);
    mNavController = Navigation.findNavController(this, R.id.nav_host_fragment);

    NavigationUI.setupActionBarWithNavController(this, mNavController, mAppBarConfiguration);
    NavigationUI.setupWithNavController(mNavigationView, mNavController);

    NavigationUI.setupWithNavController(mMainToolbar, mNavController, mAppBarConfiguration);
    NavigationUI.setupWithNavController(mBottomNavigationView, mNavController);

    mNavController.addOnDestinationChangedListener((controller, destination, arguments) -> {
        switch (destination.getId()) {

            case R.id.homeFragment:
            case R.id.questionBankFragment:
                mMainToolbar.setVisibility(View.VISIBLE);
                mBottomNavigationView.setVisibility(View.VISIBLE);
                setStatusBarColor(getResources().getColor(R.color.colorPrimaryDark));
                setDrawerLocked(false);
                break;


            case R.id.welcomeFragment:
            case R.id.loginFragment:
                mMainToolbar.setVisibility(View.GONE);
                mBottomNavigationView.setVisibility(View.GONE);
                setStatusBarColor(Color.WHITE);
                setDrawerLocked(true);
                break;

        
            case R.id.customModuleFragment:
            case R.id.createCustomModuleOneFragment:
            case R.id.createCustomModuleTwoFragment:
                mBottomNavigationView.setVisibility(View.GONE);
                setDrawerLocked(true);
                break;
            case R.id.logoutFragment:

                new AppSharedPreference(MainActivity.this).clearAllData();

                Intent intent = new Intent(getApplicationContext(), UserAuthanticationActivity.class);
                startActivity(intent);
                finish();
                break;

        }
    });

它工作正常。但现在我必须处理我无法理解的返回堆栈上的导航。

我的问题是假设我是底部导航有 4 个菜单。回家、打猎、Qbank、考试。

我被选中 Qbank。 Qbank 有 5 个片段 A、B、C、D、E。现在我已经开始遍历片段 A -> B B -> C C -> D

现在我可以选择在哪里导航回到 Direct A like 。当前位置是D

D->A

但是我怎样才能回到 A 并清除我遍历 A -> B -> C -> D 的堆栈，我想清除这个，就像我想从 A 重新开始一样。

如何使用 Jetpack 导航组件实现这一点。

我尝试了直接导航或弹回堆栈导航，但它不起作用，如果我直接导​​航到，它会给我错误

java.lang.IllegalStateException: View androidx.core.widget.NestedScrollView{98060fe VFED..... ......ID 0,0-0,0} does not have a NavController set
        at androidx.navigation.Navigation.findNavController(Navigation.java:84)
        at app.technotech.koncpt.McqTestFragment$2.onClick(McqTestFragment.java:232)
        at android.view.View.performClick(View.java:7201)
        at com.google.android.material.button.MaterialButton.performClick(MaterialButton.java:992)
        at android.view.View.performClickInternal(View.java:7170)
        at android.view.View.access$3500(View.java:806)
        at android.view.View$PerformClick.run(View.java:27562)
        at android.os.Handler.handleCallback(Handler.java:883)
        at android.os.Handler.dispatchMessage(Handler.java:100)
        at android.os.Looper.loop(Looper.java:214)
        at android.app.ActivityThread.main(ActivityThread.java:7682)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:516)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:950)

我不知道如何处理这个导航。请帮助我解决这个问题

提前致谢。

Answer 1

您可以检查当前的导航目的地，如果那是您的起点或想要的目的地，则弹出包容性导航

    if (navController.currentDestination.id == navController.graph.YOUR_PREFERED_DESTIONATION) {
    
            navController.popBackStack(
                navController.graph.YOUR_PREFERED_DESTIONATION, true
            )
    }else {
   navController.navigate(R.id.other_destination)
}

Answer 2

使用 popUpTo 从 backstack 中删除前一个 Fragment 的实例，并使用 popUpToInclusive 删除 A Fragment 的第一个实例，否则您将有两个实例堆栈中的片段：

来自Android官方文档的演示代码：

导航图 XML 视图：

<fragment
android:id="@+id/c"
android:name="com.example.myapplication.C"
android:label="fragment_c"
tools:layout="@layout/fragment_c">

<action
    android:id="@+id/action_d_to_a"
    app:destination="@id/a"
    app:popUpTo="@+id/a"
    app:popUpToInclusive="true"/>

Answer 3

您应该为每个底部导航项使用不同的导航图。

这样每个底部菜单项都有自己的图表和自己的起始目的地。所以按照这个导航路径

A -> B B -> C C -> D 并添加以下代码-

<action
    android:id="@+id/action_d_to_a"
    app:destination="@id/a"
    app:popUpTo="@+id/a"
    app:popUpToInclusive="true"/>

您可以弹出片段 A，它将作为底部菜单项的起始目的地，并且您不会收到有关 NavController 目的地的错误。

我尝试通过以下示例和代码进一步解释-

我们有三个菜单项，即仪表板、查找和选项，在主要活动中，我将使用以下代码来设置底部导航-

private void setupBottomNavigation() {
        BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_nav_view);
        bottomNavigationView.setItemIconTintList(null);

        List<Integer> navGraphList = new ArrayList<>();
        navGraphList.add(R.navigation.dashboard_navigation);
        navGraphList.add(R.navigation.find_navigation);
        navGraphList.add(R.navigation.options_navigation);

        LiveData<NavController> navControllerLiveData = new NavigationExtensions().setupWithNavController(
                bottomNavigationView
                , navGraphList
                , getSupportFragmentManager()
                , R.id.fragment_container, getIntent()
        );
        currentNavController = navControllerLiveData;
    }

R.navigation.dashboard_navigation、R.navigation.find_navigation和R.navigation.options_navigation将是如下导航文件-

dashboard_navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@id/dashboard_navigation"
    app:startDestination="@id/dashboardFragment">

    <fragment
        android:id="@+id/dashboardFragment"
        android:name="your.package.DashboardFragment"
        android:label=""
        tools:layout="@layout/fragment_dashboard" >

    </fragment>

    <fragment
        //add other fragment to this graph

    </fragment>

<navigation>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/coordinatorLayout_main"
    android:background="?android:attr/colorBackground"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="?attr/actionBarSize" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        app:itemTextColor="@drawable/bottom_nav_selector"
        android:id="@+id/bottom_nav_view"
        android:layout_width="match_parent"
        app:itemRippleColor="?colorPrimary"
        app:labelVisibilityMode="labeled"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="bottom"
        app:menu="@menu/bottom_nav_menu"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

bottom_nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/dashboard_navigation"
        android:icon="@drawable/dashboard_icon_selector"
        android:title="@string/dashboardTitle" />

    <item
        android:id="@+id/find_navigation"
        android:icon="@drawable/find_icon_selector"
        android:title="@string/findTitle" />

    <item
        android:id="@+id/options_navigation"
        android:icon="@drawable/setting_icon_selector"
        android:title="@string/optionTitle" />

</menu>

确保菜单项 id 与导航图的 id 匹配。作为仪表板的检查，我使用菜单项 id 作为 android:id="@+id/dashboard_navigation" 这是相同的 id，用于dashboard_navigation.xml 图

您还必须使用谷歌自己提供的Navigation Extension (In Kotlin)。

要获取有关使用多个导航图的更多信息，请单击here

如果您想了解如何在您的 java 代码中使用 Navigatin 扩展文件，请查看我的回答 here。

编码愉快！