您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

flutter-23(dialog 弹出层、 AlertDialog、SimpleDialog、showModalBottomSheet 、showToast)

2020-04-30【Flutter】3830人已围观

简介>在调用 `showDialog` 加上下面参数 `barrierDismissible:false` 表示点击灰色背景的时候是否消失弹出框，建议弹出框的时候加上此属性 ## 一、AlertDialog ![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200320231418.png) ``` _alertDialog() async{ var result= await showDialog( b

>在调用 `showDialog` 加上下面参数 `barrierDismissible:false` 表示点击灰色背景的时候是否消失弹出框，建议弹出框的时候加上此属性

## 一、AlertDialog

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200320231418.png)

```
_alertDialog() async{
  var result= await showDialog(
      barrierDismissible:true,   //表示点击灰色背景的时候是否消失弹出框
      context:context,
      builder: (context){
        return AlertDialog(
          title: Text("提示信息!"),
          content:Text("您确定要删除吗?") ,
          actions: <Widget>[
            FlatButton(
              child: Text("取消"),
              onPressed: (){
                 print("取消");
                Navigator.pop(context,'Cancle');
              },
            ),
            FlatButton(
              child: Text("确定"),
              onPressed: (){
                print("确定");
                Navigator.pop(context,"Ok");
              },
            )
          ],

);
      }
   );
   print(result);
}
```

## SimpleDialog

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200320231540.png)

```
_simpleDialog() async{
   
  var result=await showDialog(
     barrierDismissible:false,   //表示点击灰色背景的时候是否消失弹出框
     context:context,
     builder: (context){
       return SimpleDialog(
         title:Text("选择内容"),
         children: <Widget>[
           SimpleDialogOption(
             child: Text("Option A"),
             onPressed: (){
               print("Option A");
               Navigator.pop(context,"A");
             },
           ),
           Divider(),
            SimpleDialogOption(
             child: Text("Option B"),
             onPressed: (){
               print("Option B");
               Navigator.pop(context,"B");
             },
           ),
           Divider(),
           SimpleDialogOption(
             child: Text("Option C"),
             onPressed: (){
               print("Option C");
               Navigator.pop(context,"C");
             },
           ),
           Divider(),
         ],
       );
     }
   );
  print(result);
} 
```

## 三、showModalBottomSheet

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200320231600.png)

```
modelBottomSheet() async{
    var result=await showModalBottomSheet(
      context:context,
      builder: (context){
          return Container(
            height: 220,
            child: Column(
              children: <Widget>[
                ListTile(
                  title: Text("分享 A"),
                  onTap: (){
                    Navigator.pop(context,"分享 A");
                  },
                ),
                Divider(),
                 ListTile(
                  title: Text("分享 B"),
                  onTap: (){
                     Navigator.pop(context,"分享 B");
                  },
                ),
                Divider(),
                 ListTile(
                  title: Text("分享 C"),
                  onTap: (){
                    Navigator.pop(context,"分享 C");
                  },
                )                
              ],
            ),
          );
      }
    );
    print(result);
}
```

## 四、showToast

[文档地址：https://pub.dev/packages/fluttertoast](https://pub.dev/packages/fluttertoast)

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200320231613.png)

```
_toast(){
  Fluttertoast.showToast(
      msg: "提示信息",
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.BOTTOM,
      timeInSecForIos: 1,
      backgroundColor: Colors.black,
      textColor: Colors.white,
      fontSize: 16.0
  );
}
```

**完整代码**

> Dialog.dart

```
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class DialogPage extends StatefulWidget {
  DialogPage({Key key}) : super(key: key);

_DialogPageState createState() => _DialogPageState();
}

class _DialogPageState extends State<DialogPage> {

_alertDialog() async{
     
    var result= await showDialog(
        barrierDismissible:false,   //表示点击灰色背景的时候是否消失弹出框
        context:context,
        builder: (context){
          return AlertDialog(
            title: Text("提示信息!"),
            content:Text("您确定要删除吗?") ,
            actions: <Widget>[
              FlatButton(
                child: Text("取消"),
                onPressed: (){
                   print("取消");
                  Navigator.pop(context,'Cancle');
                },
              ),
              FlatButton(
                child: Text("确定"),
                onPressed: (){
                  print("确定");
                  Navigator.pop(context,"Ok");
                },
              )
            ],

);
        }
     );

print(result);

}
  _simpleDialog() async{
     
    var result=await showDialog(
       barrierDismissible:false,   //表示点击灰色背景的时候是否消失弹出框
       context:context,
       builder: (context){
         return SimpleDialog(
           title:Text("选择内容"),
           children: <Widget>[
             SimpleDialogOption(
               child: Text("Option A"),
               onPressed: (){
                 print("Option A");
                 Navigator.pop(context,"A");
               },
             ),
             Divider(),
              SimpleDialogOption(
               child: Text("Option B"),
               onPressed: (){
                 print("Option B");
                 Navigator.pop(context,"B");
               },
             ),
             Divider(),
             SimpleDialogOption(
               child: Text("Option C"),
               onPressed: (){
                 print("Option C");
                 Navigator.pop(context,"C");
               },
             ),
             Divider(),
             
           ],

);
       }
     );

print(result);
  }

_modelBottomSheet() async{

var result=await showModalBottomSheet(
        context:context,
        builder: (context){
            return Container(
              height: 220,
              child: Column(
                children: <Widget>[

ListTile(
                    title: Text("分享 A"),
                    onTap: (){
                      Navigator.pop(context,"分享 A");
                    },
                  ),
                  Divider(),
                   ListTile(
                    title: Text("分享 B"),
                    onTap: (){
                       Navigator.pop(context,"分享 B");
                    },
                  ),
                  Divider(),
                   ListTile(
                    title: Text("分享 C"),
                    onTap: (){
                      Navigator.pop(context,"分享 C");
                    },
                  )                
                ],
              ),
            );
        }
      );
  
      print(result);
  }
  _toast(){
   
    Fluttertoast.showToast(
        msg: "提示信息",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.BOTTOM,
        timeInSecForIos: 1,
        backgroundColor: Colors.black,
        textColor: Colors.white,
        fontSize: 16.0
    );
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Dialog"),
        ),
        body: Center(
          child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
              RaisedButton(
                child: Text('alert弹出框-AlertDialog '),
                onPressed: _alertDialog,
              ),
              SizedBox(height: 20),
              RaisedButton(
                child: Text('select弹出框-SimpleDialog'),
                onPressed: _simpleDialog,
              ),
              SizedBox(height: 20),
              RaisedButton(
                child: Text('ActionSheet底部弹出框-showModalBottomSheet'),
                onPressed: _modelBottomSheet,
              ),
              SizedBox(height: 20),
               RaisedButton(
                child: Text('toast-fluttertoast第三方库'),
                onPressed: _toast,
              ),
              // fluttertoast
          ],
        ),
      )
    );
  }
}
```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-22(轮播图 flutter_swiper 、AspectRatio 横纵比组件)

下一篇：flutter-24(自定义 Dialog、定时器)