前言

底部抽屉（Bottom Sheet）是移动应用中常见的交互模式——从屏幕底部弹出一个面板，展示设置项或更多操作。HarmonyOS 提供了 bindSheet 方法，以半模态方式弹出可拖拽的底部面板。

本文以「猫猫大作战」的设置抽屉为锚点，讲解 bindSheet 的使用方式。

提示：本系列不讲 ArkTS 基础语法与环境搭建，假设你已跟完第 1–98 篇。本篇是阶段三第 99 篇。

一、bindSheet 基本用法

1.1 基本结构

@Entry
@Component
struct Index {
  @State showSettings: boolean = false;

  build() {
    Column() {
      Button('⚙️ 设置')
        .onClick(() => { this.showSettings = true })
    }
    .bindSheet(this.showSettings, this.SettingsSheet(), {
      detents: [SheetSize.MEDIUM, SheetSize.LARGE],
      backgroundColor: '#FFFFFF'
    })
  }

  @Builder
  SettingsSheet() {
    Column() {
      Text('⚙️ 设置').fontSize(24).fontWeight(FontWeight.Bold).margin({ bottom: 24 })
      Row() { Text('音效'); Toggle({ type: ToggleType.Switch, isOn: true }) }
        .width('100%').justifyContent(FlexAlign.SpaceBetween).margin({ bottom: 16 })
      Row() { Text('震动'); Toggle({ type: ToggleType.Switch, isOn: true }) }
        .width('100%').justifyContent(FlexAlign.SpaceBetween)
    }
    .padding(24)
    .width('100%')
  }
}

1.2 参数说明

参数	类型	说明
isShow	boolean	是否显示
builder	CustomBuilder	底部面板内容
options	SheetOptions	配置：高度、背景色、拖拽等

二、游戏设置面板

2.1 设置抽屉

.bindSheet(this.showSettings, this.SettingsSheet(), {
  detents: [SheetSize.MEDIUM],
  backgroundColor: '#FFF',
  showDragBar: true,
  onDisappear: () => { this.saveSettings() }
})

三、总结

bindSheet 实现底部抽屉半模态弹窗，支持多级高度拖拽和自定义内容。

核心要点：

• .bindSheet(isShow, builder, options) 绑定底部抽屉
• detents 控制高度级别
• 适合设置面板、分享菜单、操作列表等

下一篇预告：第 100 篇将深入 Menu 弹出菜单——长按菜单的实现。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

---

相关资源：

• bindSheet API 参考
• 开源鸿蒙跨平台社区
• 第 98 篇：bindContentCover
• 第 100 篇：Menu 菜单