flutter 弹出框方法组件AlertDialog、选择弹出框方法组件SimpleDialog、底部选择弹出框方法组件showModalBottomSheet、悬浮框组件

水深无声 2021-07-25 02:21 1255阅读 0赞

在方法中设置,弹出框组件都是Future类型即promise对象
    
    弹出框方法组件:
    
    	showDialog( 
          context: context,
          builder: (context){
          
            return AlertDialog(
              title: Text('标题'),
              content:Text('内容'),
              actions: <Widget>[
    				底部确认等信息组件
    				在组件回调中,关闭弹出框并传递参数
    					Navigator.pop(context,参数); 
              ],
            );
          }
        ).then((value){
       		参数是Navigator.pop(context,参数)传递的参数
        });
        
    
    选择弹出框方法组件
    	 
    	 showDialog(
          context:context,
          builder: (context){
          
            return SimpleDialog(
              title:Text('标题'),
              children: <Widget>[
              
                SimpleDialogOption(   选项内容
                  child: 内容组件,
                  onPressed: (){
                  	关闭弹出框并传递参数
                  		Navigator.pop(context,参数); 
                  },
                ),
                ...
                可以设置多个SimpleDialogOption选项内容和其他组件
              ],
    
            );
          }
        ).then((value){
        	参数是Navigator.pop(context,参数)传递的参数
        });
        
    
    底部选择弹出框方法组件
    	
    	showModalBottomSheet(
          context: context,
          builder: (context){
          
            return Container(
            	弹出内容组件
    	     );
    	  }
        
        ).then((value){
          参数是Navigator.pop(context,参数)传递的参数
        });
        
    悬浮框组件
    	1、dart库搜索fluttertoast,并按文档配置
    	2、在方法中设置
    	
    	    Fluttertoast.showToast(
    	        msg: "",   提示内容
    	        toastLength: Toast.LENGTH_SHORT,  长度
    	        gravity: ToastGravity.CENTER,   悬浮位置
    	        timeInSecForIosWeb: 1,   显示时间(仅ios)
    	        backgroundColor: Colors.red,   背景色
    	        textColor: Colors.white,   文字颜色
    	        fontSize: 16.0
    	    );

如果安装配置后报错下面错误,就重启flutter

Unhandled Exception: MissingPluginException(No implementation found for method showToast on channel PonnamKarthik/fluttertoast)

代码示例:

import 'package:flutter/material.dart';
    import 'package:date_format/date_format.dart';
    import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';
    import 'package:flutter_swiper/flutter_swiper.dart';
    import 'package:fluttertoast/fluttertoast.dart';
    
    
    class Home4 extends StatefulWidget { 
      Home4({ Key key}) : super(key: key);
    
      @override
      _Home2State createState() => _Home2State();
    }
    
    class _Home2State extends State<Home4> { 
    
      @override
      void initState() {  
        super.initState();
      }
    
      show()
      { 
        //Future类型,then或者await获取
        showDialog( 
          context: context,
          builder: (context){ 
            return AlertDialog(
              title: Text('提示'),
              content:Text('啊哈哈哈哈'),
    
              actions: <Widget>[
                RaisedButton(
                  child: Text('取消'),
                  onPressed: (){ 
                    Navigator.pop(context,'ahh');
                  },
                ),
                RaisedButton(
                  child: Text('确认'),
                  onPressed: (){ 
                    Navigator.pop(context,'wakk');
                  },
                ),
              ],
            );
          }
        ).then((value){ 
          print("$value");
        });
      }
    
      show2()
      { 
        showDialog(
          context:context,
          builder: (context){ 
            return SimpleDialog(
              title:Text('选择弹出框'),
              children: <Widget>[
                SimpleDialogOption(
                  child: Text('A'),
                  onPressed: (){ 
                    print('a');
                  },
                ),
                
                SimpleDialogOption(
                  child: Text('A'),
                  onPressed: (){ 
                    print('a');
                    Navigator.pop(context,'aaa');
                  },
                ),
    
                SimpleDialogOption(
                  child: Text('A'),
                  onPressed: (){ 
                    print('a');
                  },
                )
              ],
    
            );
          }
        ).then((value){ 
          print(value);
        });
      }
    
      show3()
      { 
        showModalBottomSheet(
          context: context,
          builder: (context){ 
            return Container(
              height: 300,
              child: Column(children: <Widget>[
                ListTile(
                  title: Text('A'),
                  subtitle: Text('aaaa'),
                  onTap: (){ 
                    Navigator.pop(context,'aaaaaa');
                  },
                ),
                ListTile(
                  title: Text('B'),
                  subtitle: Text('bbbb'),
                  onTap: (){ 
                    
                  },
                ),
                ListTile(
                  title: Text('C'),
                  subtitle: Text('cccc'),
                  onTap: (){ 
                    
                  },
                )
              ],),
            );
          }
        
        ).then((value){ 
          print(value);
        });
      }
    
      show4()
      { 
        Fluttertoast.showToast(
            msg: "This is Center Short Toast", //提示内容
            toastLength: Toast.LENGTH_SHORT, //长度
            gravity: ToastGravity.CENTER,  //悬浮位置
            timeInSecForIosWeb: 1,  //显示时间
            backgroundColor: Colors.red,  //背景色
            textColor: Colors.white,  //文字颜色
            fontSize: 16.0
        );
      }
    
    
      @override
      Widget build(BuildContext context) { 
        return Container(
           child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
             children: <Widget>[
               
              RaisedButton(
                child: Text('普通弹出框'),
                color: Theme.of(context).accentColor,
                onPressed: (){ 
                  show();
                },
              ),
          
               
              RaisedButton(
                child: Text('选择弹出框'),
                color: Theme.of(context).accentColor,
                onPressed: (){ 
                  show2();
                },
              ),
    
              RaisedButton(
                child: Text('底部选择弹出框'),
                color: Theme.of(context).accentColor,
                onPressed: (){ 
                  show3();
                },
              ),
    
              RaisedButton(
                child: Text('悬浮弹出框'),
                color: Theme.of(context).accentColor,
                onPressed: (){ 
                  show4();
                },
              )
    
           ]),
        );
      }
    }
    
    // 因为表单组件需要改变状态,所以要使用有状态组件
    
    /* 轮播图必须外包一层有高度的父容器或者使用子元素宽高比组件AspectRatio */