Android 中使用 Kotlin 实现一个点击按钮弹出底部可滑动对话框 BottomSheetDialog

BottomSheetDialog 是 Android Material Components 库中的一个类，继承自 Dialog。它用于在屏幕底部显示一个可滑动的对话框，通常用于显示一些可操作的内容或选项，而不会阻塞用户对其他 UI 元素的操作。

用途:

BottomSheetDialog 允许你显示一个类似于对话框的内容，但它从屏幕底部滑入，而不是像普通对话框那样在屏幕中央弹出。它常用于提供一组操作、菜单选项、或者在屏幕底部提供更多详细内容，而不会完全覆盖当前的活动页面。

核心特点:

• 从底部滑入：它的出现方式是从屏幕底部滑入，给用户一种更轻量的感觉。

• 可滑动：用户可以向下滑动来关闭这个对话框。

• 轻量级交互：适合使用在一些轻量级的、不会打断用户主要任务的情况下。

在 Android 中使用 Kotlin 实现一个点击按钮弹出 BottomSheetDialog 可以通过以下步骤进行。下面是一个简单的示例：

1. 添加依赖

如果你还没有在项目中使用 Material Components，需要确保在 build.gradle 中添加依赖：

//Material库
implementation("com.google.android.material:material:1.9.0")   // 使用最新版本  

2. 布局文件

创建一个布局文件 bottom_sheet_layout.xml 作为 BottomSheetDialog 的内容：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这是底部对话框"
        android:textSize="18sp"
        android:paddingBottom="8dp" />

    <Button
        android:id="@+id/btnClose"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="关闭" />

</LinearLayout>

3. 在 Activity 或 Fragment 中实现点击按钮弹出 BottomSheetDialog

package edu.stu.mall.fragment.hot_key

import android.view.View
import android.widget.Button
import com.google.android.material.bottomsheet.BottomSheetDialog
import edu.mall.base.BaseFragment
import edu.stu.mall.BR
import edu.stu.mall.R
import edu.stu.mall.databinding.FragmentHotKeyBinding


class FragHotKey : BaseFragment<FragmentHotKeyBinding, FragHotKeyViewModel>() {
    override fun getLayoutId(): Int {
        return R.layout.fragment_hot_key

    }

    override fun getViewModelId(): Int {
        return BR.hotKeyVm

    }

    override fun initViewData() {
        binding?.btn?.setOnClickListener {
            showBottomSheetDialog()

        }


    }

    private fun showBottomSheetDialog() {
        // 使用 requireContext() 获取正确的 Context
        val bottomSheetDialog = BottomSheetDialog(requireContext())
        // Activity 中使用this
        //  val bottomSheetDialog = BottomSheetDialog(this)

        // 为 BottomSheetDialog 设置布局
        val view: View = layoutInflater.inflate(R.layout.bottom_sheet_layout, null)
        bottomSheetDialog.setContentView(view)

        // 获取布局中的 Button，并设置点击事件
        val btnClose = view.findViewById<Button>(R.id.btnClose)
        btnClose.setOnClickListener {
            // 关闭 BottomSheetDialog
            bottomSheetDialog.dismiss()
        }

        // 显示 BottomSheetDialog
        bottomSheetDialog.show()
    }


}

解释：

1. 布局文件 bottom_sheet_layout.xml：包含一个 TextView 和一个 Button，用作 BottomSheetDialog 的内容。

2. MainActivity 中的逻辑：

   1. 通过 layoutInflater 加载底部对话框的布局。

   2. 创建并显示 BottomSheetDialog。

   3. 为对话框中的关闭按钮设置点击事件，点击时调用 dismiss() 方法关闭对话框。

3. 点击按钮弹出对话框：在 MainActivity 的按钮点击事件中调用 showBottomSheetDialog() 来显示 BottomSheetDialog。

注意：

BottomSheetDialog 的构造函数期望的是一个 Context 对象，而在 Fragment 中，直接传递 this 会传递 Fragment 本身，这不是一个 Context，因此会出现错误。