flutter：教你自定义Dialog

首先信咱们来看一下flutter中有没有实现Dialog，而后Dialog.dart中发现了下面的方法

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.'
  ) Widget child,
  WidgetBuilder builder,
})
复制代码

构造方法中有三个参数

'context' :  这个是必须传递的参数，也是能够显示出视图的关键
'barrierDismissible':这个是安卓中触摸dialog外部自动取消Dialog
'builder':用于建立Widget 
复制代码

咱们举个栗子

RaisedButton(
           child: Text("showDialog"),
           onPressed: () {
                  showDialog(
                      context: context,
                      barrierDismissible: true,
                      builder: (BuildContext context) {
                        return Center(
                          child: Text("data"),
                        );
                      });
                },
              )
复制代码

####而后你会发现显示出来的Dialog回事这个样子的

####你tm在逗我，这是个什么鬼，别慌，咱们改一下

showDialog(
             context: context,
             barrierDismissible: true,
             builder: (BuildContext context) {
                   return Scaffold(
                          body: Center(
                            child: Text("data"),
                          ),
                        );
                      });
复制代码

####而后就变成了这个样子

####这种东西也不能用啊，咱们继续看Dialog.dart文件而后发现了熟悉的AlterDialog，而且上面还有demo

###AlterDialog类

class AlertDialog extends StatelessWidget 
复制代码

###显示AlterDialog的示例代码

/// Future<void> _neverSatisfied() async {
///   return showDialog<void>(
///     context: context,
///     barrierDismissible: false, // user must tap button!
///     builder: (BuildContext context) {
///       return AlertDialog(
///         title: Text('Rewind and remember'),
///         content: SingleChildScrollView(
///           child: ListBody(
///             children: <Widget>[
///               Text('You will never be satisfied.'),
///               Text('You\’re like me. I’m never satisfied.'),
///             ],
///           ),
///         ),
///         actions: <Widget>[
///           FlatButton(
///             child: Text('Regret'),
///             onPressed: () {
///               Navigator.of(context).pop();
///             },
///           ),
///         ],
///       );
///     },
///   );
/// }
复制代码

####咱们试一下官方示例

ojbk官方的dialog已经搞定。如今咱们开始自定义一个Dialog

####1. 先看下AlterDialog构造

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,
  }) : assert(contentPadding != null),
       super(key: key);
复制代码

######咱们看到一些基本属性定义，而后咱们只关心content，而content是一个widget类

/// The (optional) content of the dialog is displayed in the center of the
  /// dialog in a lighter font.
  ///
  /// Typically this is a [SingleChildScrollView] that contains the dialog's /// message. As noted in the [AlertDialog] documentation, it's important
  /// to use a [SingleChildScrollView] if there's any risk that the content /// will not fit. final Widget content; 复制代码

######那正好，咱们直接定义widget传进去就ojbk了 ####2. 咱们定义一个类，好比MyDialog。按照AlterDaialog构造再搞一遍

import "package:flutter/material.dart";

class MyDailog extends StatelessWidget {
  final Widget content;

  final List<Widget> actions;

  final Color backgroundColor;

  final double elevation;

  final String semanticLabel;

  final ShapeBorder shape;

  const MyDailog({
    Key key,
    this.content,
    this.actions,
    this.backgroundColor,
    this.elevation,
    this.semanticLabel,
    this.shape,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      content: content,
      actions: actions,
      backgroundColor: backgroundColor,
      elevation: elevation,
      shape: shape,
    );
  }
}
复制代码

####3.效果和以前显示的同样，只是咱们把标题去掉了。咱们作了简单的封装，就实现了本身的Dialog。 ####4.咱们看到使用showDialog要写很长的代码，若是咱们自定义那岂不是更长，能不能把showDialog简化一下，ojbk，接着搞！

import "package:flutter/material.dart";

void showMyDialog({
  @required Widget content,
  TextStyle contentTextStyle,
  List<Widget> actions,
  Color backgroundColor,
  double elevation,
  String semanticLabel,
  ShapeBorder shape,
  bool barrierDismissible = true,
  @required BuildContext context,
}) {
  assert(context != null);
  assert(content != null);
  showDialog<void>(
    context: context,
    barrierDismissible: barrierDismissible,
    builder: (BuildContext context) {
      return MyDailog(
        content: content,
        backgroundColor: backgroundColor,
        elevation: elevation,
        semanticLabel: semanticLabel,
        shape: shape,
        actions: actions,
      );
    },
  );
}

class MyDailog extends StatelessWidget {
  final Widget content;
  此处省略，参照前........
复制代码

####4.咱们使用一下

RaisedButton(
         child: Text("showDialog"),
         onPressed: () {
                  showMyDialog(
                    content: SingleChildScrollView(
                      child: ListBody(
                        children: <Widget>[
                          Text('You will never be satisfied.'),
                          Text('You\’re like me. I’m never satisfied.'),
                        ],
                      ),
                    ),
                    actions: <Widget>[
                      FlatButton(
                        child: Text('Regret'),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                    ],
                    context: context,
                  );
                },
复制代码

######搞定，和上面的显示如出一辙。 ##以上就是今天自定义的Dialog的所有内容。顺便在这儿推广一下的个人Dialog库 ，后续还在添加中。。。。。

github.com/Lans/multip…

简单使用

ultiple_dialog: ^0.1.5

import 'package:multiple_dialog/multiple_dialog.dart';
复制代码

欢迎start

若是这个文章对你有用，请点个赞哦