Flutter 简易 dialog 封装
这么大个程序员摸鱼社区,竟然完全没有Flutter相关的技术内容,那么我就先随便发点东西打破0发帖吧!
这是个简易的dialog封装,使用方便,代码挺基础的。
使用方式
IWPZDialog.show( context, title: '提示', height: 300, cancelToDismiss: true, onCancelTap: () { print('点击了取消'); }, onOKTap: () async { print('点击了确定'); }, contentWidget: Container( child: Text('我是正文内容'), ), );
iwpz_dialog.dart
import './navigator_util.dart'; import 'package:flutter/material.dart'; class IWPZDialog { static void show( BuildContext context, { String title = '', //标题 String content = '', //正文,如果有contentWidget,则无视 Widget? contentWidget, //正文widget bool showCancel = true, //是否显示取消 bool tapToDismiss = true, //点击空白处关闭 bool cancelToDismiss = true, //点击取消是否关闭 double height = 220, //宽度 double width = 400, //高度 Function? onOKTap, //onOK Function? onCancelTap, //onCancel }) { showDialog( context: context, barrierDismissible: tapToDismiss, builder: (context) { return GestureDetector( onTap: () { if (tapToDismiss) { NavigatorUtil.pop(context); } }, child: Material( color: Colors.transparent, child: GestureDetector( onTap: () {}, child: Center( child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(20), color: Color(0xB3242A37), ), padding: EdgeInsets.only(top: 32, left: 30, right: 30), height: height, width: width, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ title.isEmpty ? Container() : Container( margin: EdgeInsets.only(bottom: 20), child: Text( title, style: TextStyle( fontSize: 22, fontWeight: FontWeight.w400, color: Colors.white, ), ), ), contentWidget != null ? Container( child: contentWidget, ) : content.isEmpty ? Container() : Container( child: Text( content, style: TextStyle( fontSize: 19, color: Colors.white, ), ), ), Expanded( child: Container(), ), Container( height: 72, child: Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ showCancel ? Expanded( flex: 1, child: GestureDetector( onTap: () { if (onCancelTap != null) { onCancelTap(); } if (cancelToDismiss) { NavigatorUtil.pop(context); } }, child: Container( alignment: Alignment.center, child: Text( '取消', style: TextStyle( fontSize: 19, color: Colors.white, ), ), ), ), ) : Container(), showCancel ? Container( width: 1, height: 30, color: Color(0x4DFFFFFF), ) : Container(), Expanded( flex: 1, child: GestureDetector( onTap: () { if (onOKTap != null) { onOKTap(); NavigatorUtil.pop(context); } }, child: Container( alignment: Alignment.center, child: Text( '确定', style: TextStyle( fontSize: 19, color: Color(0xFF0C66FF), ), ), ), ), ) ], ), ), ], ), ), ), ), ), ); }); } }
navigator_util.dart
import 'package:flutter/material.dart'; class NavigatorUtil { static pop(BuildContext context) { Navigator.pop(context); } static popUntil(BuildContext context, String routeName) { Navigator.popUntil(context, (route) { if (route.settings.name == routeName) { return true; } return false; }); } static push( BuildContext context, { required Widget page, String routeName = '', bool isModal = false, Function(dynamic)? then, }) { Navigator.of(context) .push(MaterialPageRoute( fullscreenDialog: isModal, settings: RouteSettings( name: routeName.isEmpty ? page.toString().toLowerCase() : routeName, // 如无指定routeName,则使用类名作为routeName,便于popUntil。 ), builder: (context) { return page; })) .then((value) { if (then != null) { then(value); } }); } static pushAndRemove( BuildContext context, { required Widget page, String routeName = '', String until = '', }) { Navigator.of(context).pushAndRemoveUntil( MaterialPageRoute( settings: RouteSettings(name: routeName.isEmpty ? page.toString().toLowerCase() : routeName), builder: (context) { return page; }, ), (route) { if (until.isEmpty) { // 如果pop无until限定,则无条件pop到结束。 return false; } else {// 如果pop存在until限定,则pop到until就停止。 if (until == route.settings.name) { return true; } else { return false; } } }); } }
-
Flutter
大佬
正在學習~向大佬看齊。
P.S. 這是摸魚社區