Flutter：封装ActionSheet 操作菜单

演示效果图
在这里插入图片描述

action_sheet_util.dart

import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';
import 'package:demo/common/index.dart';class ActionSheetUtil {/// 底部操作表/// [context] 上下文/// [title] 标题/// [items] 选项列表 [{'id': 1, 'title': '相机', 'type': 'camera'}]/// [onConfirm] 确认回调 返回选中项static void showActionSheet({required BuildContext context,required String title,required List<Map<String, dynamic>> items,required Function(Map<String, dynamic>) onConfirm,}) {showModalBottomSheet(context: context,backgroundColor: Colors.transparent,builder: (context) => Container(decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.only(topLeft: Radius.circular(30.w),topRight: Radius.circular(30.w),),),child: SafeArea(child: Column(mainAxisSize: MainAxisSize.min,children: [// 标题Container(height: 100.w,alignment: Alignment.center,child: TextWidget.body(title,size: 30.sp,weight: FontWeight.w600,),),// 选项列表...items.map((item) => GestureDetector(onTap: () {Navigator.pop(context);onConfirm(item);},child: Container(height: 100.w,alignment: Alignment.center,decoration: BoxDecoration(border: Border(top: BorderSide(color: const Color(0xff999999),width: 1.w,),),),child: TextWidget.body(item['title'],size: 28.sp,color: const Color(0xff333333),),),)).toList(),// 间隔Container(height: 16.w,color: const Color(0xffF4F4F4),),// 取消按钮GestureDetector(onTap: () => Navigator.pop(context),child: Container(height: 100.w,alignment: Alignment.center,child: TextWidget.body('取消',size: 28.sp,color: const Color(0xff333333),),),),],),),),);}
}

调用时需要传入BuildContext context


.onTap(() {controller.showImagePicker(BuildContext context);
}),/ 定义选项列表
final List<Map<String, dynamic>> actions = [{"id": 1, "title": "相机", "type": "camera"},{"id": 2, "title": "相册", "type": "gallery"},
];// 在控制器或页面中使用
void showImagePicker(context) async{ActionSheetUtil.showActionSheet(context: context,title: '请选择',items: actions,onConfirm: (item) async {print('操作类型：${item['type']}');},);
}