Android Compose setupWithNavController

Question

我正在寻找 setupWithNavController(Toolbar, NavController) 的 Compose 变体自动更新 AppBar 中的向上按钮每当导航目的地发生变化时。
到目前为止，我还没有发现任何有用的东西。
它在 Compose 中被认为是一个糟糕的设计吗？还是有一些简单的方法可以实现我没有看到的相同的东西？

Answer 1

我已经破解了一个解决方案，但我并不满意。
androidx.navigation:navigation-compose:1.0.0-alpha08提供了一个扩展函数来观察当前的回栈入口。

@Composable
fun NavController.currentBackStackEntryAsState(): State<NavBackStackEntry?>

我创建了一个类似的扩展来观察之前的返回堆栈条目

/**
 * Gets the previous navigation back stack entry as a [MutableState]. When the given navController
 * changes the back stack due to a [NavController.navigate] or [NavController.popBackStack] this
 * will trigger a recompose and return the second top entry on the back stack.
 *
 * @return a mutable state of the previous back stack entry
 */
@Composable
fun NavController.previousBackStackEntryAsState(): State<NavBackStackEntry?> {
    val previousNavBackStackEntry = remember { mutableStateOf(previousBackStackEntry) }
    // setup the onDestinationChangedListener responsible for detecting when the
    // previous back stack entry changes
    DisposableEffect(this) {
        val callback = NavController.OnDestinationChangedListener { controller, _, _ ->
            previousNavBackStackEntry.value = controller.previousBackStackEntry
        }
        addOnDestinationChangedListener(callback)
        // remove the navController on dispose (i.e. when the composable is destroyed)
        onDispose {
            removeOnDestinationChangedListener(callback)
        }
    }
    return previousNavBackStackEntry
}

和一个可组合的后退按钮

@Composable
fun NavigationIcon(navController: NavController): @Composable (() -> Unit)? {
    val previousBackStackEntry: NavBackStackEntry? by navController.previousBackStackEntryAsState()
    return previousBackStackEntry?.let {
        {
            IconButton(onClick = {
                navController.popBackStack()
            }) {
                Icon(Icons.Default.ArrowBack, contentDescription = "Up button")
            }
        }
    }
}

我不得不返回 @Composable (() -> Unit)? (而不是可组合函数没有返回值)因为 TopAppBar使用可空性检查是否将标题偏移 16dp(无图标)或 72dp(有图标)。
最后，内容看起来像这样

@Composable
fun MainContent() {
    val navController: NavHostController = rememberNavController()

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Weather") },
                navigationIcon = NavigationIcon(navController)
            )
        },
    ) {
        NavHost(
            navController,
            startDestination = "list"
        ) {
            composable("list") {
                ...
            }
            composable("detail") {
                ...
            }
        }
    }
}

列表:

细节:

创建自定义 NavigationTopAppBar 可能更简洁可组合和吊装 NavController出 NavigationIcon但这个想法保持不变。我没有再费心去修修补补。

我还尝试根据当前的 NavGraph 目的地自动更新标题。不幸的是，如果不从 androidx.navigation:navigation-compose 中提取相当大的内部实现，就没有可靠的方法来为目的地设置标签。图书馆。