Flutter 组件之AlertDialog、SimpleDialog、showModalBottomSheet、showToast、自定义Dialog

悠悠 2023-05-28 06:53 5阅读 0赞

#### AlertDialog dialog弹框 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center]

> 在 `showDialog`中 定义 `AlertDialog`

_alertDialog () async { 
        var result =  showDialog<void>(
          context: context,
          barrierDismissible: true,
          // false = user must tap button, true = tap outside dialog
          builder: (BuildContext dialogContext) { 
            return AlertDialog(//定义AlertDialog
              title: Text('标题'),
              content: Text('dialog内容'),
              actions: <Widget>[
                FlatButton(
                  child: Text('取消'),
                  onPressed: () { 
                    Navigator.of(dialogContext).pop(); // 就像前面的抽屉一样来关闭弹框
                  },
                ),FlatButton(
                  child: Text('确认'),
                  onPressed: () { 
                    Navigator.of(dialogContext).pop(); // Dismiss alert dialog
                  },
                ),
              ],
            );
          },
        );
      }

##### SimpleDialog 下拉选框 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center 1]

_simpleDialog() async{ 
        showDialog<void>(
          context: context,
          barrierDismissible: true,
          // false = user must tap button, true = tap outside dialog
          builder: (BuildContext dialogContext) { 
            return SimpleDialog(//定义SimpleDialog
              title:Text("选择内容"),
              children: <Widget>[
                SimpleDialogOption(//选框子元素
                  child: Text("option A"),
                  onPressed: (){ 
                    Navigator.of(dialogContext).pop();
                    print("option A");
                  },
                ),
                Divider(),//分割线
                SimpleDialogOption(
                  child: Text("option b"),
                  onPressed: (){ 
                    Navigator.of(dialogContext).pop();
                    print("option b");
                  },
                ),
                Divider(),//分割线
                SimpleDialogOption(
                  child: Text("option c"),
                  onPressed: (){ 
                    Navigator.of(dialogContext).pop();
                    print("option c");
                  },
                ),
              ],
            );
          },
        );
      }

##### showModalBottomSheet #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center 2]

_showModalBottomSheet() async{ 
        showModalBottomSheet(
            context: context,
            builder:(context) { 
              return Container(
                height: 200,
               child: Column(
                 children: <Widget>[
                   ListTile(
                     title: Text("分享 A"),
                     onTap: (){ 
                       print("分享 A");
                       Navigator.of(context).pop();
                     },
                   ),
                   Divider(),
                   ListTile(
                     title: Text("分享 b"),
                     onTap: (){ 
                       print("分享 b");
                       Navigator.of(context).pop();
                     },
                   ),
                   Divider(),
                   ListTile(
                     title: Text("分享 c"),
                     onTap: (){ 
                       print("分享 c");
                       Navigator.of(context).pop();
                     },
                   ),
    
                 ],
               ),
              );
            }
        );
      }

##### fluttertoast 第三方库 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center 3]

import 'package:fluttertoast/fluttertoast.dart';
    
      _showToast() { 
        Fluttertoast.showToast(
            msg: "吐司内容",
            toastLength: Toast.LENGTH_LONG,
            gravity: ToastGravity.BOTTOM,//显示位置
            timeInSecForIosWeb: 1,//显示时长苹果
            backgroundColor: Colors.black,//背景颜色
            textColor: Colors.white,//文字颜色
            fontSize: 16.0//文字大小
        );
      }

Column(
          children: <Widget>[
             RaisedButton(
               child: Text("alert弹出框-AlertDialog"),
               onPressed: _alertDialog,
             ),
             RaisedButton(
               child: Text("弹出框-SimpleDialog"),
               onPressed: _simpleDialog,
             ),
             RaisedButton(
               child: Text("底部弹出框-showModalBottomSheet"),
               onPressed: _showModalBottomSheet,
             ),
             RaisedButton(
               child: Text("吐司-showToast"),
               onPressed: _showToast,
             ),
             RaisedButton(
                  child: Text("自定义Dialog"),
                  onPressed: () { 
                    showDialog(
                        context: context,
                        builder: (context) { 
                          return MyDialog();//必须先引入你的组件
                        });
                  },
                ),
         ]
     )

##### 自定义Dialog #####

> 创建 MyDialog组件

import 'package:flutter/material.dart';
    
    /* * Dialog Template * 自定义dialog */
    class MyDialog extends Dialog { 
      @override
      Widget build(BuildContext context) { 
        return Material(//定义全局大小的元素
          type: MaterialType.transparency, //设置整个元素是透明的
          child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,//居中显示
            children: <Widget>[
              Padding(//边距组件
                padding: EdgeInsets.all(10),//设置内边距
                child: Container(//这里就可以实现一些自定义功能
                  height: 200,
                  width: 200,
                  color: Colors.white,
                  child: RaisedButton(child: Text("关闭自定义Dialog"),onPressed: (){ 
                    Navigator.of(context).pop();
                  },),
                ),
              ),
            ],
          )),
        );
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/62b2206331ec4e85bb0c52c83e95ab8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230528/adcf0db3ea8141ea8e4d53073df509a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230528/d9d9eee41dd74d9db9552d9729337d2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQzOTIz_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20230528/be615f1b02f0449d9c8ff32089312771.png