Android Material3带菜单项的BottomSheet实现方案咨询

问题描述 #

想要实现与Material3官方指南示例完全一致的BottomSheet，目前通过LinearLayout嵌套TextButton构建，但样式和官方示例的列表元素差异大，不够原生。咨询以下问题：

• 当前的LinearLayout嵌套实现方式是否正确？
• 是否可以通过菜单XML文件实现？
• 还有哪些可行的实现方案？

附带当前布局代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:padding="16dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="match_parent">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/bottom_sheet_image"
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:background="#E6E6E6"
                    android:scaleType="centerCrop" />
            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingLeft="20dp">

            <TextView
                android:id="@+id/textView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Some Text" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Some Description" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Some Date" />
        </LinearLayout>
    </LinearLayout>

    <Button
        style="@style/Widget.Material3.Button.TextButton.Icon"
        app:icon="@drawable/materialicons_add"
        android:text="Text button"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:gravity="left|center"
        android:title="Reise Bearbeiten" />

    <Button
        android:id="@+id/button"
        style="@style/Widget.Material3.Button.TextButton.Icon"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="left|center"
        android:text="Text button"
        android:title="Reise Bearbeiten"
        app:icon="@drawable/materialicons_add" />

</LinearLayout>

解决方案 #

1. 当前实现方式的问题 #

用LinearLayout嵌套TextButton的方式不是最优选择。Material3的BottomSheet列表项有专门的组件规范，TextButton的默认样式（内边距、行高、图标与文字的间距、点击反馈）和官方示例的列表项匹配度低，需要手动大量调整才能贴近原生效果，效率低且容易出现样式不一致的问题。

2. 推荐实现方案 #

方案一：使用Material3 List Item组件（最贴合官方样式）

Material3提供了ListItemButton、ListItem等专门为列表交互设计的组件，这些组件自带官方规范的样式（统一的内边距、图标位置、文字排版、按压反馈），直接使用就能和官方示例完全对齐。

替换原布局中的两个Button为ListItemButton：

<!-- 替换原布局中的Button -->
<com.google.android.material.list.ListItemButton
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:icon="@drawable/materialicons_add"
    app:supportItemText="Text button"
    app:supportItemTextAppearance="?attr/textAppearanceBodyLarge"/>

<com.google.android.material.list.ListItemButton
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:icon="@drawable/materialicons_add"
    app:supportItemText="Text button"
    app:supportItemTextAppearance="?attr/textAppearanceBodyLarge"/>

这种方式无需手动调整样式，组件会自动遵循Material3的设计规范。

方案二：通过菜单XML实现（适合纯选项型BottomSheet）

如果BottomSheet以选项列表为主，可以结合BottomSheetDialogFragment和菜单XML来实现，代码更简洁，样式统一。

步骤如下：

• 创建菜单文件res/menu/bottom_sheet_menu.xml：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_edit"
        android:icon="@drawable/materialicons_add"
        android:title="Text button"/>
    <item
        android:id="@+id/menu_delete"
        android:icon="@drawable/materialicons_add"
        android:title="Text button"/>
</menu>

• 在BottomSheetDialogFragment中加载菜单并处理点击：

class CustomBottomSheetDialogFragment : BottomSheetDialogFragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        // 加载包含自定义头部的布局
        val view = inflater.inflate(R.layout.your_bottom_sheet_layout, container, false)
        
        // 绑定菜单
        val menuHost = view as MenuHost
        menuHost.addMenuProvider(object : MenuProvider {
            override fun onCreateMenu(menu: Menu, menuInflater: MenuInflater) {
                menuInflater.inflate(R.menu.bottom_sheet_menu, menu)
            }

            override fun onMenuItemSelected(menuItem: MenuItem): Boolean {
                // 根据菜单ID处理点击事件
                return when(menuItem.itemId) {
                    R.id.menu_edit -> {
                        // 处理编辑逻辑
                        true
                    }
                    R.id.menu_delete -> {
                        // 处理删除逻辑
                        true
                    }
                    else -> false
                }
            }
        }, viewLifecycleOwner, Lifecycle.State.RESUMED)
        
        return view
    }
}

注意：如果需要保留原布局中的自定义头部（图片+文本区域），只需在your_bottom_sheet_layout中保留该头部区域，菜单会自动在头部下方生成规范的列表项。

方案三：手动优化LinearLayout布局（不推荐）

如果坚持使用LinearLayout嵌套Button，需要手动对齐Material3的设计规范：

• 设置Button的最小高度为?attr/listItemMinHeight
• 水平内边距使用?attr/listItemPaddingHorizontal
• 图标与文字的间距用?attr/iconPadding
• 文字样式设置为?attr/textAppearanceBodyLarge

修改后的Button示例：

<Button
    style="@style/Widget.Material3.Button.TextButton.Icon"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/listItemMinHeight"
    android:paddingHorizontal="?attr/listItemPaddingHorizontal"
    app:icon="@drawable/materialicons_add"
    app:iconPadding="?attr/iconPadding"
    android:text="Text button"
    android:textAppearance="?attr/textAppearanceBodyLarge"
    android:gravity="start|center_vertical"/>

这种方式需要手动维护样式参数，后续Material3规范更新时需要同步调整，灵活性差。

总结 #

优先选择方案一（ListItem组件），能最快速地实现和官方指南一致的BottomSheet；如果是纯选项列表，方案二更简洁；方案三仅作为特殊场景下的备选。

内容的提问来源于stack exchange，提问作者MMA