flutter 自定义弹框

红太狼 2021-07-25 02:12 946阅读 0赞

自定义弹框
    	在Material组件中定义内容,这样能实现弹框出现屏幕透明的效果
    		
    	1、定义组件类来继承Dialog,添加build方法，return 自定义内容
    	2、通过 showDialog方法调用弹出框
    	
    	    showDialog( 
    	      context: context,
    	      builder: (context){
    	        return 类组件名();
    	      }
    	    ).then((value){
    	     	参数为Navigator.pop(context,参数)传递的参数
    	    });
    	    
    	3、关闭弹框并传递参数
    	
    		回调函数中设置
    			Navigator.pop(context,参数)传递的参数;

代码示例:

import 'dart:async';
    
    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';
    import 'package:myflutter/page/me.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 Log();
          }
        ).then((value){ 
          print("$value");
        });
      }
    
    
      @override
      Widget build(BuildContext context) { 
        return Container(
           child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
             children: <Widget>[
               
              RaisedButton(
                child: Text('自定义弹出框'),
                color: Theme.of(context).accentColor,
                onPressed: (){ 
                  show();
                },
              ),
    
    
           ]),
        );
      }
    }
    
    class Log extends Dialog{ 
    
      timer(context)
      { 
        var time=Timer.periodic(
          Duration(milliseconds: 1500),
          (t){ 
            print('执行');
            Navigator.pop(context);
            t.cancel();
          }
        );
      }
    
      @override
      Widget build(BuildContext context) { 
    
         timer(context);
    	
    	//自定义弹框内容
        return Material(
          
          type:MaterialType.transparency,
          child: Center(
            
            child:Container(
              height: 300,
              width: 300,
              color: Colors.white,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.all(20),
                    child: Stack(
                      children: <Widget>[
                        Align(
                          child: Text('提示'),
                          alignment:Alignment.center,
                        ),
                        Align(
                          alignment: Alignment.centerRight,
                          child: InkWell(
                            child: Icon(Icons.confirmation_number),
                            onTap: (){ 
                              Navigator.pop(context,'guanbi');
                            },
                          ),
                        ),
                        
                      ],
                    )
                  ),
                  Divider(),
                  Container(
                    padding: EdgeInsets.all(10),
                    width: double.infinity,
                    child: Text('啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈哈哈哈哈哈',textAlign: TextAlign.left,),
                  )
                ],
              ),
           )
          ),
        );
      }
    }
    
    // 因为表单组件需要改变状态,所以要使用有状态组件
    
    /* 轮播图必须外包一层有高度的父容器或者使用子元素宽高比组件AspectRatio */

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/84b721f7c6b148249d60289a2d1508e8.png