在移动端应用中，弹出窗口是一个常见的 UI 控件。与 Material Design 中的风格相符，我们希望弹出窗口以某种形式与屏幕底部对齐，以实现更流畅和更高效的用户体验。在这篇文章中，我们将介绍如何使用 BottomSheet 控件来实现底部弹窗效果。
什么是 BottomSheet？
BottomSheet 是一个 Material Design 中的控件，它可以实现与屏幕底部对齐的弹窗效果。BottomSheet 控件支持两种类型：
Persistent Bottom Sheet- 始终可见的弹窗，可以显示常用的应用控件，如搜索框或播放控制器等。Modal Bottom Sheet- 可滑动以显示更多内容的弹窗，通常包含具体的应用信息或操作。
如何实现 BottomSheet？
要在应用中使用 BottomSheet，首先需要在 build.gradle 文件中添加依赖项：
dependencies {
implementation 'com.google.android.material:material:1.3.0-alpha03'
}然后，在布局文件中添加 BottomSheet 控件。在下面的示例代码中，我们添加了一个 Modal Bottom Sheet，该 BottomSheet 包含一个列表项和两个按钮。
-- -------------------- ---- -------
----------------------------------------------------------
------------------------------
-----------------------------------
------------------------------------
----------------------------
------------------------------
------------
-----------------------------------
------------------------------------
------------------------------------------
---------
---------------------------
-----------------------------------
-------------------------------------
-----------
-------------
-----------------------------------
------------------------------------
--------------------------------
-------------------------------
-----------------------
-------
----------------------------
--------------------------
------------------------------------
-------------------------
----------------------------------------
-------
----------------------------
--------------------------
------------------------------------
-------------------------
----------------------------------------
---------------
--------------
------------------------------------------------------------在代码中，我们定义了一个列表视图，并在 BottomSheet 中添加了两个按钮。BottomSheet 对话框的高度会自动匹配视图内容，所以我们无需指定其高度。
现在，我们需要在代码中为 BottomSheet 控件添加动作，以便在用户与应用交互时显示和隐藏 BottomSheet。在下面的示例代码中，我们使用了一个 onClick 方法来显示 BottomSheet。
-- -------------------- ---- -------
------ ---- ----------------------- -
----------------- ----------------- - --- ------------------------
---- --------------- - --------------------------------------------------------- ------
--------------------------------------------------
------------ ------ - ------------------------------------------------
-------- -------- - ---------------------------------------------
------ --------- - ----------------------------------------------
------ --------- - ----------------------------------------------
----------------------- ------ --------
-------------------------------- ---------------------- -
---------
------ ---- ------------ ----- -
-- -- ---------
-------------------------
-
---
-------------------------------- ---------------------- -
---------
------ ---- ------------ ----- -
-- -- ---------
-------------------------
-
---
-------------------------
-在代码中，我们使用 getLayoutInflater() 方法获取布局实例并将其添加到 BottomSheet 对话框中。我们还添加了两个按钮，以便在用户点击时执行某些操作并隐藏 BottomSheet。
总结
在本文中，我们介绍了 Material Design 中的 BottomSheet 控件，并展示了如何使用它来实现底部弹出窗口效果。使用 BottomSheet 控件可以为应用增强体验并提高用户交互流畅度。，请记住添加适当的依赖项并在布局文件和代码中使用 BottomSheet 控件，以实现所需的底部弹出窗口效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cea704b5eee0b52565bfb3