Flutter中自定义提示框

1. 弹出提示框

定义模态框组件，代码如下：

代码语言：javascript复制

import 'package:flutter/material.dart';
class MyDialog extends Dialog{

    final String title;
    final String content;

    // 构造函数赋值
    MyDialog({this.title="",this.content=""});

    @override
    Widget build(BuildContext context) {

        return Material(
            type:MaterialType.transparency,
            child:Center(
                child:Container(
                    width:300,
                    height:300,
                    color:Colors.white,
                    child:Column(
                        children: <Widget>[
                            Padding(
                                padding: EdgeInsets.all(10),
                                child: Stack(
                                    children: <Widget>[
                                        Align(
                                            alignment: Alignment.center,
                                            child:Text("${this.title}")
                                        ),
                                        Align(
                                            alignment: Alignment.centerRight,
                                            child: InkWell(
                                                child:Icon(Icons.close),
                                                onTap: (){
                                                    Navigator.pop(context);
                                                },
                                            ),
                                        )
                                    ],
                                ),
                            ),
                            Divider(),
                            Container(
                                padding:EdgeInsets.all(10),
                                width: double.infinity,
                                child:Text(
                                    "${this.content}",
                                    textAlign: TextAlign.left,
                                )
                            )
                        ],
                    )
                )
            )
        );
    }
}

调用自定义模态框组件。

代码语言：javascript复制

// 引入上面定义的模态框组件，注意路径
import '../components/Dialog.dart';

// 在类中调用自定义模态框
// context为类中的上下文
showDialog(
    context:context,
    builder:(context){
        return MyDialog(
            title:"友情提示",
            content:"已加载完毕"
        );
    }
);

2. 定时器

代码语言：javascript复制

import "dart:async";

// 添加定时器自动关闭
_showTimer(context){
    var timer;
    // 定时器
    timer = Timer.periodic(
        // 持续时间
        Duration(milliseconds: 2000),(event){
            Navigator.pop(context);

            // 以下两种方式都可以关闭
            // event.cancel(); 
            timer.cancel();
        }
    );
}

3. 结合定时器自动关闭提示框

代码语言：javascript复制

// 定时器必须引入这个
import "dart:async";
import 'package:flutter/material.dart';
class MyDialog extends Dialog{

    final String title;
    final String content;

    // 构造函数赋值
    MyDialog({this.title="",this.content=""});

    // 添加定时器自动关闭
    _showTimer(context){
        var timer;
        // 定时器
        timer = Timer.periodic(
            Duration(milliseconds: 2000),(event){
                Navigator.pop(context);
                // event.cancel(); 
                timer.cancel();
            }
        );
    }

    @override
    Widget build(BuildContext context) {
        // 调用方法
        _showTimer(context);
        
        return Material(
            type:MaterialType.transparency,
            child:Center(
                child:Container(
                    width:300,
                    height:300,
                    color:Colors.white,
                    child:Column(
                        children: <Widget>[
                            Padding(
                                padding: EdgeInsets.all(10),
                                child: Stack(
                                    children: <Widget>[
                                        Align(
                                            alignment: Alignment.center,
                                            child:Text("${this.title}")
                                        ),
                                        Align(
                                            alignment: Alignment.centerRight,
                                            child: InkWell(
                                                child:Icon(Icons.close),
                                                onTap: (){
                                                    Navigator.pop(context);
                                                },
                                            ),
                                        )
                                    ],
                                ),
                            ),
                            Divider(),
                            Container(
                                padding:EdgeInsets.all(10),
                                width: double.infinity,
                                child:Text(
                                    "${this.content}",
                                    textAlign: TextAlign.left,
                                )
                            )
                        ],
                    )
                )
            )
        );
    }
}

效果图如下：

定时器

0 人点赞