基本属性介绍

几个自带的dialog用法和属性基本一致，只是部分参数不同

const AlertDialog({Key? key,this.title, //对话框标题组件this.titlePadding, // 标题填充this.titleTextStyle, //标题文本样式this.content, // 对话框内容组件this.contentPadding = const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0), //内容的填充this.contentTextStyle,// 内容文本样式this.actions, // 对话框操作按钮组this.backgroundColor, // 对话框背景色this.elevation,// 对话框的阴影this.semanticLabel, //对话框语义化标签(用于读屏软件)this.shape, // 对话框外形
})

显示dialog：
showDialog:

Future<T?> showDialog<T>({required BuildContext context,required WidgetBuilder builder,//需要显示的弹窗bool barrierDismissible = true,//点击背后蒙层是否关闭弹框，默认为 trueColor? barrierColor = Colors.black54,//背后蒙层颜色String? barrierLabel,bool useSafeArea = true,//是否使用安全区域，默认为 truebool useRootNavigator = true,//是否使用根导航，默认为 trueRouteSettings? routeSettings,//路由设置
})

showCupertinoDialog 也是控制 Dialog 弹出的 api。其实与 showDialog
一样，两者都可以调用各种弹框，但是 showCupertinoDialog 默认是不可以点击空白区域隐藏的。

Future<T?> showCupertinoDialog<T>({required BuildContext context,required WidgetBuilder builder,//需要显示的弹窗String? barrierLabel,bool useRootNavigator = true,//是否使用根导航，默认为 truebool barrierDismissible = false,//点击背后蒙层是否关闭弹框，默认为 falseRouteSettings? routeSettings,//路由设置
})

1.AlertDialog确认对话框

  _alertDialog() async{var result= await showDialog(barrierDismissible:false,   //表示点击灰色背景的时候是否消失弹出框context:context,builder: (context){return AlertDialog(title: Text("提示信息!"),content:Text("您确定要删除吗?") ,actions: <Widget>[TextButton(child: Text("取消"),onPressed: (){print("取消");Navigator.pop(context,'Cancle');//点击之后使这个页面消失},),TextButton(child: Text("确定"),onPressed: (){print("确定");Navigator.pop(context,"Ok");},)],);});print(result);}

2.SimpleDialog选择对话框

  _simpleDialog() async{var result=await showDialog(barrierDismissible:false,   //表示点击灰色背景的时候是否消失弹出框context:context,builder: (context){return SimpleDialog(title:Text("选择内容"),children: <Widget>[SimpleDialogOption(child: Text("Option A"),onPressed: (){print("Option A");Navigator.pop(context,"A");},),Divider(),SimpleDialogOption(child: Text("Option B"),onPressed: (){print("Option B");Navigator.pop(context,"B");},),Divider(),SimpleDialogOption(child: Text("Option C"),onPressed: (){print("Option C");Navigator.pop(context,"C");},),Divider(),],);});print(result);}

3.showModalBottomSheet底部弹出的对话框

  _modelBottomSheet() async{var result=await showModalBottomSheet(context:context,builder: (context){return Container(height: 220,child: Column(children: <Widget>[ListTile(title: Text("分享 A"),onTap: (){Navigator.pop(context,"分享 A");},),Divider(),ListTile(title: Text("分享 B"),onTap: (){Navigator.pop(context,"分享 B");},),Divider(),ListTile(title: Text("分享 C"),onTap: (){Navigator.pop(context,"分享 C");},)],),);});print(result);}

4.showToast提示信息框

这是一个第三方组件，需要我们手动导入：https://pub.dev/packages/fluttertoast

其实直接在控制台运行以下命令即可：

flutter pub add fluttertoast

    Fluttertoast.showToast(msg: "提示信息",toastLength: Toast.LENGTH_LONG,  //长度gravity: ToastGravity.BOTTOM,  //配置方位timeInSecForIosWeb: 1,  //显示时间,这个配置只在IOS上有效backgroundColor: Colors.black,textColor: Colors.white,fontSize: 16.0);

5.自定义Dialog

自定义 Dialog 对象，需要继承 Dialog 类，尽管 Dialog 提供了 child 参数可以用来写视图界面，但是往往会达不到我们想要的效果，因为默认的 Dialog 背景框是满屏的。如果我们想完全定义界面，就需要重写 build 函数。

这是一个结合定时器的自定义Dialog：

import 'dart:async';import 'package:flutter/material.dart';class MyDialog extends Dialog{String title;String content;MyDialog(this.title,this.content);//定时器,自动关闭Diolog_showTimer(context){var timer;timer = Timer.periodic(Duration(milliseconds: 3000),//3000毫秒就是三秒(t){Navigator.pop(context);t.cancel();  //取消定时器    timer.cancel();});}@overrideWidget build(BuildContext context) {_showTimer(context);// TODO: implement buildreturn Material(type: MaterialType.transparency,child: Center(child: Container(width: 300,height: 300,color: Colors.white,child: Column(crossAxisAlignment: CrossAxisAlignment.center,children: [Padding(padding: EdgeInsets.all(10),child: Stack(children: [Align(child: Text('${this.title}'),alignment: Alignment.center,),Align(alignment: Alignment.centerRight,child: InkWell(child: Icon(Icons.close),onTap: () {Navigator.pop(context);},),),],)),Divider(),Container(padding: EdgeInsets.all(10),width: double.infinity,child: Text('${this.content}',textAlign: TextAlign.left,),)],),),),);}
}

Flutter:Dialog对话框及自定义Dialog相关推荐

android 中Dialog对话框及自定义Dialog的方法
// 重写方法,让他返回Dialog.// 以下是优化代码的替换,只创建一次,每次点击使用showDialog()的方法,不用每次都创建新的,可以减少内存使用@Overrideprotected Di ...
android 自定义dialog样式,Android 自定义dialog类
首先定制style样式 styles.xml 加入自定义样式 @null true true true @color/transparent @color/transparent true 0.6 在 ...
qt android 对话框,Qt自定义Dialog
默认对话框 Qt默认的对话框是系统自带的样式,不同版本的windows也有些许不同,如果希望风格统一的话,这时候就需要自定义一个属于自己的对话框了系统自带自定义样式新建Qt设计师类虽然是自定义 ...
android 自定义对话框 demo,自定义dialog对话框获取EditText数据demo
效果: java代码 package com.example.dialogdemo; import android.app.Activity; import android.app.AlertDial ...
android自定义退出对话框,Android自定义Dialog(仿QQ同步助手退出对话框)
继承Dialog类就可以了,写写布局文件,写写style,就OK了.下面开始. 先上布局文件: xmlns:android="http://schemas.android.com/apk/r ...
android自定义dialog 全屏,自定义dialog全屏显示
默认的Dialog是不能全屏的.也就是怎么设置Dialog的Layout都没用的. 下面给出实现Dialog实现全屏的两种方式: 1.代码实现.这中方法相对比较简单首先继承Dialig,然后再构造函 ...
android常用窗口动画,android 自定义dialog,窗口动画，
自定义dialog窗口,根据坐标可随意设置dialog显示位置,实现了窗口弹出动画 Java代码: package com.sunxu.org.IndividualityDialog; import ...
android dialog 消失动画,android 自定义dialog弹出和消失缩放动画
本文转自:android 自定义dialog,窗口动画 Java代码: package com.sunxu.org.IndividualityDialog; import Android.app.Ac ...
android dialog 动画代码,android 自定义dialog弹出和消失动画
自定义dialog窗口,根据坐标可随意设置dialog显示位置,实现了窗口弹出动画 Java代码: package com.sunxu.org.IndividualityDialog; import ...

Flutter:Dialog对话框及自定义Dialog