在使用 Material Design 风格的 WEB 应用中，会经常用到 Toolbar 和 Navigation Drawer。然而，使用时却经常会遇到 Toolbar 和 Navigation Drawer 被应用主题颜色覆盖的问题，这使得应用的设计效果受到了很大的影响。本篇文章将介绍如何解决这个问题。
问题的原因
在 Material Design 中，Toolbar 和 Navigation Drawer 是应用的重要组件，通常都会设置应用主题的颜色。应用主题颜色可以在 Styles.xml 文件的 <color name="colorPrimary">#3F51B5</color> 标签中定义。当我们在使用 Toolbar 和 Navigation Drawer 时，这些元素会默认使用应用主题颜色进行渲染，因此，如果应用主题颜色与 Toolbar 或 Navigation Drawer 的颜色不同，就会导致颜色混乱或者被覆盖的问题。
解决方案
为了解决这个问题，我们可以对 Toolbar 和 Navigation Drawer 采取不同的处理方式。
解决 Toolbar 被颜色覆盖的问题
对于 Toolbar，主要有两种解决方式。
方式一：使用 NoActionBar 的主题
我们可以在 Styles.xml 文件中使用 Theme.AppCompat.Light.NoActionBar 或 Theme.MaterialComponents.Light.NoActionBar 主题，这样就可以取消应用默认的 Toolbar，即使应用主题颜色也不会覆盖 Toolbar。
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="colorPrimary">@color/blue</item>
<item name="colorPrimaryDark">@color/blue_dark</item>
<item name="colorAccent">@color/pink</item>
</style>方式二：设置 Toolbar 的背景颜色和标题颜色
如果我们想要保留 Toolbar，可以在 Toolbar 布局文件中设置 Toolbar 的背景颜色和标题颜色。例如：
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:titleTextColor="@android:color/white"
app:layout_collapseMode="pin" />其中，android:background="?attr/colorPrimary" 表示设置 Toolbar 的背景颜色；android:titleTextColor="@android:color/white" 表示设置 Toolbar 标题的文字颜色。
解决 Navigation Drawer 被颜色覆盖的问题
对于 Navigation Drawer，我们可以在修改应用主题颜色的同时，修改 Navigation Drawer 的背景颜色。例如：
-- -------------------- ---- -------
------ --------------- ----------------------------------------------------
---- --------- ---- ----- ----- ---
----- ---------------------------------------------------------------
----- --------------------------------------
----- -----------------------------------------------
----- -------------------------------------
----- ----------------------------------------------------
----- ---------------------------------------------------
--------其中，<item name="android:navigationBarColor">@color/blue</item> 表示设置 Navigation Drawer 的背景颜色。
总结
通过本篇文章的介绍，我们了解了如何解决使用 Material Design 时导航栏被颜色覆盖的问题，同时也学习了如何更好地使用 Toolbar 和 Navigation Drawer。在实际开发中，我们可以根据应用的需求和设计要求，选择不同的方案来解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471d0b3968c7c53b0fba192