Skip to content

侧边栏 (Side Sheets)

源:Side sheets

侧边栏是包含补充内容的表面,固定在屏幕侧边。M3 提供了两种变体。

侧边栏示例

变体对比

  1. Standard side sheet (标准型): 与主内容并存,允许同时操作。适用于平板或宽屏。
  2. Modal side sheet (模态型): 弹出时带有遮罩,阻塞与主内容的交互。适用于手机。

代码实现

1. 标准侧边栏 (Standard)

标准侧边栏通常作为 CoordinatorLayout 的子项,并应用 SideSheetBehavior

xml
<androidx.coordinatorlayout.widget.CoordinatorLayout ...>

    <LinearLayout
        android:id="@+id/side_sheet"
        style="@style/Widget.Material3.SideSheet"
        android:layout_width="256dp"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.sidesheet.SideSheetBehavior">
        <!-- 侧边栏内容 -->
    </LinearLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

2. 模态侧边栏 (Modal)

kotlin
val sideSheetDialog = SideSheetDialog(context)
sideSheetDialog.setContentView(R.layout.side_sheet_content)
sideSheetDialog.show()

核心交互

1. 状态控制

kotlin
val behavior = SideSheetBehavior.from(sideSheetView)
// 隐藏
behavior.state = SideSheetBehavior.STATE_HIDDEN
// 展开
behavior.state = SideSheetBehavior.STATE_EXPANDED

2. 预测性返回

M3 侧边栏原生支持 Android 14+ 的预测性返回手势,用户可以平滑地通过滑动将其关闭。


侧边位置 (Sheet Edge)

你可以通过 android:layout_gravity 设置侧边栏从左侧 (start) 还是右侧 (end) 出现。