脚手架顶部栏在屏幕内容加载之前出现/消失（Jetpack Compose）

Question

在我的活动中，我将内容设置为支架，以将我的自定义导航主机作为其内容，其中导航主机控制显示哪些可组合项。我还在顶部栏中显示了 pageName，但仅当字符串不为空时。

val pageName by remember { mutableStateOf("") }
val navController = rememberNavController()
Scaffold (
    topBar = {
        if (pageName.isNotBlank()) {
            Row {
                Text(text = pageName)
            }
        }
    }
) {
    MyNavHost(navController, pageName)
}

本质上，某些屏幕不会有顶栏，而其他屏幕则有。对于那些不会的人，在 navhost 中，我将设置该可组合项以将 pageName 设置为“”，以便它将触发活动中的脚手架 pageName 并更新以使 topBar 消失。

问题是，当我们从带有顶栏的屏幕和没有顶栏（“”）的屏幕转换时，顶栏消失/出现与正在加载的屏幕内容之间存在轻微的滞后/延迟。顶部栏立即出现/消失，而屏幕内容仍在加载半秒（注意：导航主机中没有任何效果）。

如何使顶部栏随 navhost 可组合项的内容一起出现和消失？

Answer 1

您可以为

TopBar

的可见性设置动画。

Scaffold(
    topBar = {
        AnimatedVisibility(visible = pageName.isNotBlank()) {
            Row {
                Text(text = pageName)
            }
        }
    }
) {
    MyNavHost(navController, pageName)
}