Flutter学习总结（十六、Flutter中的弹框)

Flutter中的弹框

一起从0开始学习Flutter!

在Flutter中我们也有着丰富的弹出框控件，Flutter给我们准备好了SimpleDialog，AlertDialog，AboutDialog，CupertinoAlertDialog这些弹出框，我们可以依次来认识它们。
在认识它们之前还需要先学习一下如果让这些组件显示在屏幕上，这些组件创建完之后是否直接显示的，我们还需要调用一个show方法，比如showDialog();showAboutDialog();showCupertinoDialog();这样的显示方法。

Show方法

show方法是根据想要显示的对话框的样式不同进行了封装，showDialog可以放下我们想要的所有dialog，只是针对不同的dialog会有时比较繁琐，我们先看下showDialog方法中需要传入哪些参数：

Future<T> showDialog<T>({
  @required BuildContext context, //传入上下文
  bool barrierDismissible = true,  //点击遮罩层是否对话框消失
  @Deprecated(
    'Instead of using the "child" argument, return the child from a closure '
    'provided to the "builder" argument. This will ensure that the BuildContext '
    'is appropriate for widgets built in the dialog. '
    'This feature was deprecated after v0.2.3.'
  )
  Widget child,//过时了，不再使用
  WidgetBuilder builder, //需要构建的对话框
  bool useRootNavigator = true, //是否将dialog放到根的Navigator中，默认是添加的
})

如果我们想要一个AboutDialog那么我们可以直接使用showAboutDialog()方法来直接创建一个AboutDialog。AboutDialog我们一般用来显示应用的基本信息，用的比较少，我们看下showAboutDialog():

void showAboutDialog({
  @required BuildContext context,//传入上下文
  String applicationName,//传入应用的名字
  String applicationVersion,//应用的版本号
  Widget applicationIcon,//应用的图标
  String applicationLegalese,//添加一些应用的文字说明
  List<Widget> children,//添加一些自定义的子控件，根据大家的需要自行补充就行
  bool useRootNavigator = true,//是否将dialog放到根的Navigator中，默认是添加的
})

如果我们想要创建一个iOS风格的dialog，那么我们可以使用showCupertinoDialog();来直接创建，可以看下showCupertinoDialog():

Future<T> showCupertinoDialog<T>({
  @required BuildContext context, //传入上下文
  @required WidgetBuilder builder,//需要构建的对话框
  bool useRootNavigator = true,//是否将dialog放到根的Navigator中，默认是添加的
}) 

可以看到跟showDialog基本上是一致的，我们只需要在builder里传入CupertinoDialog或者CupertinoAlertDialog就可以了。
如果我们想要给弹出框的时候增加一个动画我们可以使用showGeneralDialog，我们可以根据自己需要制定旋转缩放等动画，先看下它的构造：

Future<T> showGeneralDialog<T>({
  @required BuildContext context,//必填
  @required RoutePageBuilder pageBuilder,//必填，如果没有要传入的builder需要传入一个空的，例如 (context, anim1, anim2) {},
  bool barrierDismissible,//控制弹出框是否显示的，如果为True那么barrierLabel必须设置，如果设置为False则弹出框不会显示
  String barrierLabel,//在barrierDismissible为True的时候必须有值，否则弹出框不会显示
  Color barrierColor,//动画的背景
  Duration transitionDuration,//dialog显示和消失的时间，对应这里就是显示的动画时间
  RouteTransitionsBuilder transitionBuilder,//我们可以组件自己的显示动画
  bool useRootNavigator = true,//是否将dialog放到根的Navigator中，默认是添加的
})

我们对上面的show方法举个例子，一个旋转的对话框：

 showGeneralDialog(
              context: context,
              pageBuilder: (context, anim1, anim2) {},
              barrierColor: Colors.grey.withOpacity(.4),
              barrierDismissible: true,
              barrierLabel:"旋转框" ,
              transitionDuration: Duration(milliseconds: 400),
              transitionBuilder: (context, anim1, anim2, child) {
                return Transform.rotate(
                  angle: anim1.value * 360,
                  child: AlertDialog(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(20))),
                    title: Text("Dialog"),
                    content: Text("Hello world"),
                  ),
                );
              },
            );

SimpleDialog

一般我们使用SimpleDialog用于多项条目的选择框，我们可以先看下它的构造方法：

 const SimpleDialog({
    Key key,
    this.title,//弹出框的标题栏
    this.titlePadding = const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),//标题的上下左右间距
    this.children,//这里可以添加选择条目,这里添加的不是普通的组件了，是需要传入SimpleDialogOption
    this.contentPadding = const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0),//内容与边框之间的间距
    this.backgroundColor,//弹出框的背景颜色
    this.elevation,//弹出框的阴影大小
    this.semanticLabel,//辅助功能中的语音提示
    this.shape,//弹出框的形状。比如设置圆角边框
  })

SimpleDialogOption

作为SimpleDialog的children项，我们看下它可以为我们做些什么，先看下它的构造方法：

const SimpleDialogOption({
    Key key,
    this.onPressed,//点击的响应事件
    this.child,//添加的子组件
  })

这里我们就可以把每个条目的点击事件和每个条目要显示的内容来做显示了。例如：

SimpleDialogOption(
       child: Text("条目一"),
       onPressed: (){
            Navigator.of(context).pop();
        },)

这里我们就显示了一个条目并且点击后整个弹出框消失。

AlertDialog

用于展示一些提示信息的dialog，我们可以为dialog添加多个按钮，我们先看下它的构造，和SimpleDialog里面相同的就省略了：

const AlertDialog({
    Key key,
    this.titleTextStyle,//给标题增加字体的样式，样式的设置同Text的样式设置方法
    this.content,//我们用来展示要显示的内容，需要注意的是如果内容过长我们需要使用可滚动的布局列表来展示，否则无法全部显示
    this.contentTextStyle,//给展示的内容添加文字的全局样式
    this.actions,//这里我们可以添加确定和取消等按钮，如果能横向全部展示则会显示全部，如果不能全部显示则全部按钮竖向显示
   	...
  })

AboutDialog

一般用来显示一些应用的基本信息，会默认带着两个按钮，一个ViewLicences跳转到应用的Licences的页面,一个Close用来关闭dialog，我们来看下它的构造：

const AboutDialog({
    Key key,
    this.applicationName,//应用名称
    this.applicationVersion,//应用的版本
    this.applicationIcon,//应用的icon
    this.applicationLegalese,//放一些应用的说明
    this.children,//可以添加自定义控件
  })

CupertinoAlertDialog

用来显示iOS风格的dialog，基本用法与AlertDialog一致，在使用CupertinoAlertDialog时我们需要修改show方法为showCupertinoDialog，我们主要看下差异的部分，先看下它的构造：

 const CupertinoAlertDialog({
    Key key,
    this.scrollController,//给内容的滚动添加一个控制器，我们可以参照前面NestedScrollView所介绍的Controller
    this.actionScrollController,//给action的滚动添加一个控制器，action在传入多个按钮的时候会呈现竖直排列
    this.insetAnimationDuration = const Duration(milliseconds: 100),//显示弹框的动画时间
    this.insetAnimationCurve = Curves.decelerate,//进入动画的曲线，也就是进入的路径
    ...
  }) 

基本上我们常用的弹出框就介绍完了，我们可以结合项目选择合适的对话框来显示，如果需要自定义弹框的可以根据上面的介绍来创建自定义对话框。

接下来我们来一起学习Flutter的网络请求