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回事这个样子的

dialog.jpg

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

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

然后就变成了这个样子

Jietu20190701-171215@2x.jpg

这种东西也不能用啊，我们继续看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();
///             },
///           ),
///         ],
///       );
///     },
///   );
/// }

我们试一下官方示例

j3.jpg

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库 ，后续还在添加中。。。。。

https://github.com/Lans/multiple_dialog

简单使用

ultiple_dialog: ^0.1.5

import 'package:multiple_dialog/multiple_dialog.dart';

欢迎start

如果这个文章对你有用，请点个赞哦