美文网首页
Flutter 自定义弹窗组件

Flutter 自定义弹窗组件

作者: 重庆妹子在霾都 | 来源:发表于2021-04-01 18:47 被阅读0次

弹窗组件的封装思路

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

ww_dialog.dart

弹窗主要调用类,主要包含:WWDialog.showTopDialogWWDialog.showMiddleDialogWWDialog.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

相关文章

网友评论

      本文标题:Flutter 自定义弹窗组件

      本文链接:https://www.haomeiwen.com/subject/tamtkltx.html