Material Design 是一种 Google 推出的设计语言，它的出现为应用程序的设计和开发注入了许多新的灵感和活力。在前端开发中，SnackBar 是 Material Design 中非常常用的组件之一，它可以在底部或顶部弹出信息提示框，方便用户获取重要提示信息。但是在实际开发中，很多开发者会遇到 SnackBar 在显示位置上出现异常的问题，下面我将详细介绍这个问题的解决方法。
问题描述
SnackBar 本质上是一个 View，从源码中我们可以看到 SnackBar 内部自带一个 FrameLayout，用来显示 Snackbar 的内容。在它上面的还有一个 OverlayFrameLayout，用来显示 SnackBar 悬浮在界面上的效果。但是在一些极端情况下，SnackBar 会出现在屏幕外面而不是底部或者顶部。
问题分析
这个问题的根源是 OverLayFrameLayout 组件在设置 snack bar 位置时的异常，这种异常主要是由于 OverLayFrameLayout 的 parentView 为 DecorView，而不是 ContentView 导致。
在 Android 系统中，Activity 的显示界面包含两部分，一是 DecorView，另一个是 ContentView。DecorView 可以算作整个 Activity 的容器，它可以用来控制 Activity 窗口的装饰部分，如窗口标题栏。ContentView 则是实际显示的内容区域。而 SnackBar 组件的 layout_gravity 属性是针对 ContentView 内部的，因此如果在 OverLayFrameLayout 的 parentView 是 DecorView 的情况下设置了 layout_gravity 属性，这时候 SnackBar 就会出现位置异常的情况。
解决方案
为了解决问题，我们需要获取 ContentView 并将其作为 OverLayFrameLayout 的 parentView。具体的操作如下所示。
View contentView = getActivity().findViewById(android.R.id.content); FrameLayout parentLayout = contentView.findViewById(android.R.id.content); parentLayout.addView(snackBarView);
上述代码中，getActivity().findViewById(android.R.id.content) 获取到的就是 ContentView。在获取到 ContentView 后，我们需要通过其 findViewById(android.R.id.content) 方法获取到它的父布局视图，然后将 SnackBar View 添加到父布局中即可。
具体实现
通过上述分析，我们可以编写一段针对 SnackBar 位置异常问题的解决方案。下面是一段示例代码：
-- -------------------- ---- -------
------- ---- ----------------- ----- ------ -------- -
-------- -------- - ------------------- -------- ----------------------
---- ------------ - -------------------
------------------------ ------ - -------------------------- -------------------------------
-------------- - ------------
-------------------------------------
-- ----- ------------ --------
---- ----------- - -------------------------------------------------
----------- ------------ - -----------------------------------------------
-----------------------------------
----------------
-在上述代码中，传入了两个参数——View 和 message，它们分别代表 SnackBar 所需要显示的信息和显示 View。 它内部首先通过 Snackbar.make(view, message, Snackbar.LENGTH_LONG) 方法获取到 SnackBar 对象，然后通过 Snackbar.getView() 获取 SnackBar 的 View，接下来就是对 SnackBar View 布局进行修改。我们通过获取 SnackBar View 的 LayoutParams 对象，然后将 gravity 属性设置为 Gravity.TOP，即显示在屏幕顶部的位置。最后通过 parentLayout.addView(snackBarView) 将 SnackBar View 添加到 ContentView 的父布局中，最后调用 snackbar.show() 进行显示即可。
总结
至此，我们已经详细的讲解了 SnackBar 位置异常的原因和解决方案。通过我们的实际编码测试，可以看到这种解决方案能够成功解决 SnackBar 位置异常的问题。除此之外，在实际开发中我们也需要注意保持代码的稳定性和兼容性，前端开发需要不断学习和探索，发现并解决各种问题，并提高自己的开发实力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650044f495b1f8cacde73f49