HarmonyOS应用开发实战：猫猫大作战-bindSheet 的使用方式

前言

底部抽屉（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 参数说明

二、游戏设置面板

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 菜单