Flutter 自定义弹窗组件

弹窗组件的封装思路

封装的弹窗必须要灵活，满足实际开发中的大部分弹窗，比如有无标题、有无内容、有无关闭按钮、有无操作按钮以及按钮的排列样式等需要满足多元化～
共有四个文件:ww_dialog.dart、ww_middle_bottom_dialog_widget.dart、ww_top_dialog_widget.dart、ww_top_dialog_item_data.dart

ww_dialog.dart

弹窗主要调用类，主要包含：WWDialog.showTopDialog、WWDialog.showMiddleDialog、WWDialog.showBottomDialog

顶部弹窗调用：WWDialog.showTopDialog

支持自定义配置背景颜色、字体大小、颜色、统一回调、自定义按钮、单独回调、是否带三角标志、任意位置、最大高度、超过可以滑动等～

WWDialog.showTopDialog(
                  context,
                  dialogWidth: 100,
                  triangleType: DiaLogTriangleType.right,
                  bgColor: Color.fromRGBO(0, 0, 0, 0.8),
                  contentColor: Colors.white,
                  contentFontSize: 14,
                  listDatasource: [
                    TopDialogItemData('推荐1', '111'),
                    TopDialogItemData('推荐2', '222'),
                    TopDialogItemData('推荐3', '333'),
                    TopDialogItemData('推荐4', '444'),
                    TopDialogItemData('推荐5', '555'),
                    TopDialogItemData('推荐6', '666'),
                    TopDialogItemData('推荐7', '777')
                  ],
                  onTap: (TopDialogItemData item) {
                    print('点击内容：text:${item.name}, id:${item.id}');
                  }
              );

部分展示效果：

top2.png top3.png

中间弹窗调用： WWDialog.showMiddleDialog

支持配置背景颜色、字体大小、颜色、字重、按钮排列方式、标题、内容、按钮支持完全自定义、点击的回调等～

WWDialog.showMiddleDialog(
                  context,
                  title: '我是弹窗标题',
                  content: '我是自定义弹窗的内容：我有一头小毛驴，我从来也不骑，有一天我心血来潮骑他去赶集...',
                  buttons: ['默认按钮1','默认按钮2','默认按钮3'],
                  arrangeType: buttonArrangeType.column,
                  onTap: (index, context) {
                    print('点击弹窗按钮索引：$index');
                  }
              );

部分展示效果：

middle1.png

底部弹窗调用： WWDialog.showBottomDialog

支持配置背景颜色、字体大小、颜色、字重、按钮排列方式、标题、内容、按钮支持完全自定义、点击的回调等～

WWDialog.showBottomDialog(
                  context,
                  content: '确认删除该条信息吗？',
                  contentColor: colorWithHex9,
                  contentFontSize:13.0,
                  location: DiaLogLocation.bottom,
                  arrangeType: buttonArrangeType.column,
                  buttons: ['默认按钮1','默认按钮2'],
                  otherButtonFontSize: 20.0,
                  otherButtonFontWeight:FontWeight.w400
              );

部分展示效果：

bottom1.png

ww_middle_bottom_dialog_widget.dart

中间、底部弹窗的弹窗widget

ww_top_dialog_widget.dart

顶部弹窗的弹窗widget

ww_top_dialog_item_data.dart

顶部弹窗的数据源数据模型item

github传送门：https://github.com/WangWee/ww_flutter_dialog