Material Toolbar 和 Jetpack 导航故障问题

Question

使用 jetpack 导航库 (2.3.5)、Material Toolbar 和视图绑定时，我的应用程序出现了一些奇怪的“故障”和刷新问题。

演示场景如下：在 3 个不同片段之间进行简单导航。

ENTRY POINT ---> SCREEN C ---> SCREEN D

免责声明

很抱歉屏幕上出现“伪模糊框”，但我无法显示真实的 UI，如果我出于演示目的更改片段布局，问题就会发生变化。所以我需要使用真实的 UI。

第一步：入口点--->屏幕C

用户在我们的应用程序中输入：一个空的 MaterialToolbar 在屏幕顶部，带有一个标准的后退图标。

然后用户点击一个按钮并进入 SCREEN C。 当 SCREEN C 完全渲染后，Material Toolbar 会更新为屏幕标题“SCREEN C”、自定义导航图标和右侧的菜单项（问号图标）。

正如您在 gif 中看到的，导航过程中有两个主要问题：

• 屏幕标题“SCREEN C”最初以非常大的字体和错误的颜色（白色）显示。这是 ENTRY POINT 片段中空 MaterialToolbar 的样式。
• 后退图标最初是标准图标，一段时间后（呈现整个屏幕时）它会使用自定义导航图标进行更改。

第二步：屏幕 C ---> 屏幕 D

用户在“屏幕 C”上。然后点击一张卡片并进入“屏幕D”。

当 SCREEN D 完全渲染后，Material Toolbar 会更新为屏幕标题“SCREEN D”，自定义后退箭头图标和右侧的菜单项将消失。

正如你在 gif 中看到的，也存在一些问题：

• 首先，向用户显示标题“SCREEN D”，标准的后退图标和右侧的菜单项
• 然后，当“SCREEN D”完全呈现时，后退图标为自定义图标，菜单项消失。

MaterialToolbar，在每个片段中，配置如下：

val navController = NavHostFragment.findNavController(fragment)
val appBarConfiguration = AppBarConfiguration(navController.graph)
setupWithNavController(navController, appBarConfiguration)

这在片段 onViewCreated 回调中被调用。

为什么每个导航步骤都会出现这样的渲染问题？

Answer 1

当您将工具栏传递给setupWithNavController 时，它会在您浏览应用程序时自动设置标题，使用导航目标的label 值。它的设计使您的 Activity 中有一个静态工具栏，目标片段在其下方换出，并且工具栏会更新以反映当前片段。

当您在每个片段中都有一个单独的工具栏时，您会遇到此故障，即在导航到下一个片段之前，当前片段的工具栏上的标题会更新。这里最简单的解决方法是清除导航图中每个片段上的label 值，然后在每个工具栏上手动设置它们（例如在布局 XML 中）。我看到 Ian Lake（其中一位开发人员）说这些标签实际上是为自动标题更改行为而设计的，如果您有单独的工具栏，则不应使用它们

我们在这里 - 在这个问题的 cmets 中： How to remove glitch when navigating between Fragments with different toolbars?

那么为什么要在导航图中使用标签？工具栏具有设置静态标题的 API，如果您知道工具栏仅与一个片段相关联，这当然是合适的。