android - 如何使用具有多个 backstack 的导航组件实现具有相同行为的 3 个选项卡组合导航应用程序？

Question

我搜索并实现了 Jetpack 撰写示例。我也实现了以下导航 Codelab 示例。

https://github.com/googlecodelabs/android-compose-codelabs/tree/main/NavigationCodelab

我这里有个问题。当我单击选项卡上的某些内容时，我们导航到可组合项并将该可组合项放入堆栈中。当我点击返回时，会显示之前的可组合项。

在我的导航组件应用程序中，不使用 jetpack compose，例如，有 3 个选项卡:主页、收藏夹、设置。我依次单击“收藏夹”、“设置”、“主页”、“收藏夹”、“设置”。当我按下后退按钮时，会显示主页 fragment 。然后，当我再次按下后退按钮时，应用程序将关闭。

在我的撰写导航应用程序中，我执行相同的操作(单击“收藏夹”、“设置”、“主页”、“收藏夹”、“设置”)。为了关闭应用程序，我需要按后退按钮 5 次。这是我的问题。我希望导航组件具有相同的行为。我希望当我单击后退按钮时应显示起始目标 fragment ，然后，当我再次单击后退按钮时，应用程序应关闭。如何做到这一点？

Answer 1

//tab密封类

typealias ComposableFun = @Composable () -> Unit

sealed class TabsItem(val title: String, val screen: ComposableFun){
    object HomeScrenn: TabsItem(title = "Home", { Home() })
    object FavScreen: TabsItem(title = "fav", { fav()})
    object SetingScreen: TabsItem(title = "Setting"{Setting()}, 
}

//您可以在此处添加标签

@Composable
fun SectionTabScreen() {

    val tabs = listOf(
        TabsItem.Home,
        TabsItem.Fav,
        TabsItem.Setting,
        
    )

    val pagerState = rememberPagerState()

    Scaffold{
        Column {
            Tabs(tabs = tabs, pagerState = pagerState)
            TabsContent(tabs = tabs, pagerState = pagerState)
        }
    }
}

@Composable
fun Tabs(tabs: List<TabsItem>, pagerState: PagerState) {
    val scope = rememberCoroutineScope()
    // OR ScrollableTabRow()
    ScrollableTabRow(
        modifier = Modifier.fillMaxWidth(),
        selectedTabIndex = pagerState.currentPage,
        backgroundColor = MaterialTheme.colors.background,
//        contentColor = Color.White,
        edgePadding = 0.dp,
        indicator = { tabPositions ->
            TabRowDefaults.Indicator(
                Modifier.pagerTabIndicatorOffset(pagerState, tabPositions)
            )
        }){

        tabs.forEachIndexed { index, tab ->
            // OR LeadingIconTab()

            Tab(
                text = {
                    Text(
                        text = tab.title,
                        fontSize = MaterialTheme.typography.h6.fontSize,
                        )},
                selected = pagerState.currentPage == index,
                onClick = {
                    scope.launch {
                        pagerState.animateScrollToPage(index)
                    }
                },
            )
        }
    }
}

@Composable
fun TabsContent(tabs: List<TabsItem>, pagerState: PagerState) {
    HorizontalPager(state = pagerState, count = tabs.size) { page ->
        tabs[page].screen()
    }
}