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

如果這個文章對你有用，請點個贊哦