HarmonyOS7 文件操作菜单页实战：ActionSheet 不只是会用，还要用得顺手

文章目录ActionSheet 适合放什么文件列表要先有清楚的数据结构文件菜单的核心逻辑使用时有个小提醒完整代码写在最后文件类 App 里“更多”按钮基本绕不开底部菜单。这个页面没有只演示一个空弹窗而是把ActionSheet放进文件列表、头像选择和排序操作里看起来更像真实业务会写出来的样子。ActionSheet 适合放什么ActionSheet更适合承载“当前对象相关”的次级操作。比如一个文件右侧的更多按钮点开后出现打开、分享、重命名、复制、下载、删除这些操作都围绕同一个文件展开用户理解起来很自然。但如果是页面最核心的动作比如“提交订单”“立即支付”我不建议藏在底部菜单里。菜单层级越深用户越容易找不到。文件列表要先有清楚的数据结构页面里用FileItem_y1ww描述文件项字段包括name、size、type、icon、color。这几个字段不复杂但刚好能撑起文件列表的主要信息用户知道文件叫什么、占多大、是什么类型也能通过图标快速扫一眼。这里有三个状态比较关键fileList负责渲染列表selectedFile记录当前操作对象lastAction用来把菜单点击结果反馈到页面上。很多示例只弹出菜单不处理结果这个案例把结果也做出来了更适合拿去改业务。文件菜单的核心逻辑showFileAction()是这篇最值得看的地方。它先把当前文件保存到selectedFile再调用ActionSheet.show()。菜单里的每一项都通过action修改lastAction这样用户点完之后页面立刻知道发生了什么。这段逻辑的好处是边界清楚列表只负责展示菜单函数只负责组装操作项点击回调只负责更新结果。后面真要接打开文件、分享系统能力或者删除接口也能沿着这个结构继续扩展。关键代码如下showFileAction(file:FileItem_y1ww){this.selectedFilefile ActionSheet.show({title:file.name,message:文件大小${file.size},confirm:{value:取消,action:(){this.lastAction已取消}},sheets:[{title: 打开文件,action:(){this.lastAction打开${file.name}}},{title: 分享文件,action:(){this.lastAction分享${file.name}}},{title:✏️ 重命名,action:(){this.lastAction重命名${file.name}}},{title: 复制到,action:(){this.lastAction复制${file.name}}},{title:⬇️ 下载到本地,action:(){this.lastAction下载${file.name}}},{title:️ 删除文件,action:(){this.lastAction删除${file.name}}}]})}头像选择和排序菜单也是同一个套路只是sheets里的选项换了。实际项目里可以把这种菜单项整理成配置数组但我不建议一开始就抽太深先保证每个菜单的业务语义清楚再考虑复用。使用时有个小提醒底部菜单适合承载“低频但重要”的操作别把页面主路径藏进ActionSheet。另外像删除文件这种危险操作真实项目里最好再加一层确认不要让用户手滑后直接执行。完整代码下面是整理后的完整代码入口组件名已经换成和当前场景匹配的名字放进自己的页面目录后可以按项目路由规则接入。// ActionSheet 底部操作菜单interfaceFileItem_y1ww{id:numbername:stringsize:stringtype:stringicon:stringcolor:string}EntryComponentstruct FileActionSheetPage{StateselectedFile:FileItem_y1ww|nullnullStatelastAction:string点击文件右侧菜单按钮StatefileList:FileItem_y1ww[][{id:1,name:产品需求文档.docx,size:2.4 MB,type:doc,icon:,color:#2563EB},{id:2,name:设计稿 v2.0.fig,size:18.7 MB,type:fig,icon:,color:#7C3AED},{id:3,name:会议录音_0605.mp3,size:45.2 MB,type:mp3,icon:,color:#059669},{id:4,name:季度报表.xlsx,size:3.1 MB,type:xls,icon:,color:#D97706},{id:5,name:项目截图合集.zip,size:128 MB,type:zip,icon:️,color:#DC2626},]showFileAction(file:FileItem_y1ww){this.selectedFilefile ActionSheet.show({title:file.name,message:文件大小${file.size},confirm:{value:取消,action:(){this.lastAction已取消}},sheets:[{title: 打开文件,action:(){this.lastAction打开${file.name}}},{title: 分享文件,action:(){this.lastAction分享${file.name}}},{title:✏️ 重命名,action:(){this.lastAction重命名${file.name}}},{title: 复制到,action:(){this.lastAction复制${file.name}}},{title:⬇️ 下载到本地,action:(){this.lastAction下载${file.name}}},{title:️ 删除文件,action:(){this.lastAction删除${file.name}}}]})}showImageAction(){ActionSheet.show({title:选择头像,message:更新您的个人头像,confirm:{value:取消,action:(){}},sheets:[{title: 拍照,action:(){this.lastAction选择拍照}},{title:️ 从相册选择,action:(){this.lastAction选择从相册选择}},{title: 搜索网络图片,action:(){this.lastAction选择搜索网络图片}}]})}showSortAction(){ActionSheet.show({title:排序方式,message:选择文件的排序方式,confirm:{value:取消,action:(){}},sheets:[{title: 按名称排序,action:(){this.lastAction排序按名称}},{title: 按修改时间,action:(){this.lastAction排序按修改时间}},{title: 按文件大小,action:(){this.lastAction排序按文件大小}},{title: 按文件类型,action:(){this.lastAction排序按文件类型}}]})}build(){Column(){// 顶部标题栏Row(){Text(我的文件).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#1A1A1A)Row({space:16}){Button(排序).fontSize(13).fontColor(#2563EB).backgroundColor(#EFF6FF).borderRadius(16).padding({left:12,right:12,top:6,bottom:6}).onClick(()this.showSortAction())Button(更换头像).fontSize(13).fontColor(#7C3AED).backgroundColor(#F5F3FF).borderRadius(16).padding({left:12,right:12,top:6,bottom:6}).onClick(()this.showImageAction())}}.width(100%).justifyContent(FlexAlign.SpaceBetween).alignItems(VerticalAlign.Center).padding({left:20,right:20,top:16,bottom:12})// 当前操作提示Row(){Text().fontSize(14)Text(this.lastAction).fontSize(13).fontColor(#374151).margin({left:6})}.width(100%).padding({left:20,right:20,top:10,bottom:10}).backgroundColor(#F9FAFB).margin({bottom:8})// 文件列表Column({space:2}){ForEach(this.fileList,(file:FileItem_y1ww){Row(){// 文件图标Text(file.icon).fontSize(32).width(52).height(52).textAlign(TextAlign.Center).backgroundColor(#F3F4F6).borderRadius(12)// 文件信息Column({space:4}){Text(file.name).fontSize(15).fontWeight(FontWeight.Medium).fontColor(#111827).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis})Text(file.size).fontSize(12).fontColor(#9CA3AF)}.alignItems(HorizontalAlign.Start).layoutWeight(1).margin({left:12})// 更多操作按钮Text(⋮).fontSize(22).fontColor(#6B7280).width(36).height(36).textAlign(TextAlign.Center).onClick(()this.showFileAction(file))}.width(100%).padding({left:20,right:16,top:12,bottom:12}).backgroundColor(Color.White).alignItems(VerticalAlign.Center)},(file:FileItem_y1ww)file.id.toString())}.width(100%)// 说明区域Column({space:8}){Text(ActionSheet 用法说明).fontSize(15).fontWeight(FontWeight.Bold).fontColor(#374151)Text(• title / message标题与副标题\n• confirm底部取消按钮\n• sheets操作选项数组title action\n• 点击选项自动关闭弹窗).fontSize(13).fontColor(#6B7280).lineHeight(22)}.width(100%).padding(16).margin({top:16,left:16,right:16}).backgroundColor(#F9FAFB).borderRadius(12)}.width(100%).height(100%).backgroundColor(#FFFFFF)}}写在最后如果你正在整理 HarmonyOS7 组件案例可以把这篇当成ActionSheet的实践模板。先跑通页面再逐步替换数据和样式效率会高不少。