FlutterOpenHarmony弹窗与对话框组件-程序员充电站

前言

弹窗和对话框是应用中与用户进行交互的重要方式，它们用于显示提示信息、确认操作、收集用户输入等场景。在笔记应用中，删除确认、保存提示、表单输入等功能都需要使用弹窗组件。一个设计良好的弹窗应该清晰传达信息、提供明确的操作选项，同时不过度打扰用户。本文将详细介绍如何在Flutter和OpenHarmony平台上实现各种类型的弹窗和对话框组件。

Flutter AlertDialog基础

AlertDialog是Flutter中最常用的对话框组件。

void_showDeleteConfirmDialog(){showDialog(context:context,builder:(context)=>AlertDialog(title:Text('删除确认'),content:Text('确定要删除这条笔记吗？删除后无法恢复。'),actions:[TextButton(onPressed:()=>Navigator.pop(context),child:Text('取消'),),TextButton(onPressed:(){Navigator.pop(context);_deleteNote();},child:Text('删除',style:TextStyle(color:Colors.red)),),],),);}

showDialog函数用于显示对话框，它接收context和builder参数。AlertDialog包含title标题、content内容和actions操作按钮三个主要部分。title通常是简短的标题文字，content是详细的说明信息，actions是操作按钮列表。Navigator.pop用于关闭对话框，可以在关闭后执行相应的操作。删除按钮使用红色文字强调这是一个危险操作，这种视觉提示可以防止用户误操作。

Future<bool?>_showConfirmDialog(String title,String message){returnshowDialog<bool>(context:context,barrierDismissible:false,builder:(context)=>AlertDialog(title:Text(title),content:Text(message),actions:[TextButton(onPressed:()=>Navigator.pop(context,false),child:Text('取消'),),ElevatedButton(onPressed:()=>Navigator.pop(context,true),child:Text('确定'),),],),);}

对话框可以返回结果值，通过Navigator.pop的第二个参数传递。showDialog的泛型参数指定返回值类型，调用方可以使用await获取用户的选择结果。barrierDismissible设置为false禁止点击对话框外部关闭，强制用户做出选择。ElevatedButton比TextButton更突出，用于强调主要操作。这种封装方式使得确认对话框可以在多处复用。

输入对话框

收集用户输入是对话框的常见用途。

void_showRenameDialog(Note note){finalcontroller=TextEditingController(text:note.title);showDialog(context:context,builder:(context)=>AlertDialog(title:Text('重命名'),content:TextField(controller:controller,autofocus:true,decoration:InputDecoration(hintText:'请输入新名称',border:OutlineInputBorder(),),),actions:[TextButton(onPressed:()=>Navigator.pop(context),child:Text('取消'),),ElevatedButton(onPressed:(){if(controller.text.isNotEmpty){Navigator.pop(context);_renameNote(note,controller.text);}},child:Text('保存'),),],),);}

输入对话框在content中放置TextField组件。TextEditingController的初始值设置为当前名称，方便用户在原有基础上修改。autofocus设置为true使输入框自动获取焦点，用户可以直接开始输入。保存按钮的点击处理中先验证输入不为空，然后关闭对话框并执行重命名操作。这种交互流程简洁高效，用户可以快速完成重命名操作。

OpenHarmony对话框实现

OpenHarmony通过AlertDialog和CustomDialog实现对话框功能。

AlertDialog.show({title:'删除确认',message:'确定要删除这条笔记吗？',primaryButton:{value:'取消',action:()=>{console.log('取消删除')}},secondaryButton:{value:'删除',fontColor:'#FF0000',action:()=>{this.deleteNote()}}})

OpenHarmony的AlertDialog.show是一个静态方法，直接调用即可显示对话框。title设置标题，message设置内容信息。primaryButton和secondaryButton分别定义两个操作按钮，value是按钮文字，action是点击回调。fontColor可以自定义按钮文字颜色，红色用于强调删除等危险操作。这种API设计简洁直观，适合快速实现简单的确认对话框。

@CustomDialog struct InputDialog{controller:CustomDialogController @State inputText:string=''title:string=''placeholder:string=''onConfirm:(text:string)=>void=()=>{}build(){Column(){Text(this.title).fontSize(18).fontWeight(FontWeight.Bold).margin({bottom:15})TextInput({placeholder:this.placeholder,text:this.inputText}).width('100%').height(40).onChange((value:string)=>{this.inputText=value})Row(){Button('取消').backgroundColor('#F0F0F0').fontColor('#333333').onClick(()=>{this.controller.close()})Button('确定').backgroundColor('#1890FF').fontColor('#FFFFFF').onClick(()=>{if(this.inputText.length>0){this.onConfirm(this.inputText)this.controller.close()}})}.width('100%').justifyContent(FlexAlign.SpaceAround).margin({top:20})}.padding(20).width(300)}}

CustomDialog装饰器用于创建自定义对话框组件。通过属性接收标题、占位文本和确认回调，使组件具有良好的复用性。TextInput收集用户输入，onChange实时更新inputText状态。确认按钮的点击处理中验证输入不为空后调用onConfirm回调并关闭对话框。这种自定义对话框可以满足各种复杂的输入需求。

底部弹出面板

底部弹出面板是另一种常见的弹窗形式。

void_showOptionsSheet(){showModalBottomSheet(context:context,shape:RoundedRectangleBorder(borderRadius:BorderRadius.vertical(top:Radius.circular(16)),),builder:(context)=>Container(padding:EdgeInsets.all(20),child:Column(mainAxisSize:MainAxisSize.min,children:[ListTile(leading:Icon(Icons.edit),title:Text('编辑'),onTap:(){Navigator.pop(context);_editNote();},),ListTile(leading:Icon(Icons.share),title:Text('分享'),onTap:(){Navigator.pop(context);_shareNote();},),ListTile(leading:Icon(Icons.delete,color:Colors.red),title:Text('删除',style:TextStyle(color:Colors.red)),onTap:(){Navigator.pop(context);_showDeleteConfirmDialog();},),],),),);}

showModalBottomSheet显示从底部弹出的面板，这种形式在移动设备上非常常见。shape属性设置面板的形状，圆角顶部使外观更加柔和。mainAxisSize设置为min使面板高度自适应内容。ListTile提供了标准的列表项样式，包含图标和文字。删除选项使用红色强调危险性。底部面板适合展示操作菜单，不会遮挡太多内容，用户可以快速选择操作。

OpenHarmony底部面板

@Component struct ActionSheet{@Link isVisible:booleanactions:ActionItem[]=[]build(){if(this.isVisible){Column(){ForEach(this.actions,(item:ActionItem)=>{Row(){Image(item.icon).width(24).height(24)Text(item.title).fontSize(16).margin({left:12})}.width('100%').height(50).padding({left:20,right:20}).onClick(()=>{item.action()this.isVisible=false})})Divider().margin({top:10,bottom:10})Text('取消').fontSize(16).fontColor('#999999').height(50).onClick(()=>{this.isVisible=false})}.width('100%').backgroundColor('#FFFFFF').borderRadius({topLeft:16,topRight:16})}}}

OpenHarmony的底部面板可以通过自定义组件实现。@Link装饰器使isVisible与父组件双向绑定，可以从外部控制面板的显示和隐藏。ForEach遍历actions数组生成操作项列表，每个操作项包含图标、标题和点击回调。取消按钮放在底部，用灰色文字区分于其他操作项。borderRadius只设置顶部圆角，形成底部弹出的视觉效果。

Toast提示

轻量级的提示信息使用Toast显示。

void_showToast(String message){ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:Text(message),duration:Duration(seconds:2),behavior:SnackBarBehavior.floating,margin:EdgeInsets.all(16),),);}

Flutter使用SnackBar实现Toast效果。ScaffoldMessenger.of(context).showSnackBar显示SnackBar，content设置提示内容，duration设置显示时长。behavior设置为floating使SnackBar悬浮显示，margin设置与屏幕边缘的距离。SnackBar适合显示操作结果反馈，如"保存成功"、"删除完成"等简短提示，不需要用户手动关闭。