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. 這是摸魚社區