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

flutter-24(自定义 Dialog、定时器)

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

简介## 一、Flutter 自定义 Dialog 自定义 `Dialog` 对象，需要继承 `Dialog` 类，尽管 `Dialog` 提供了 `child` 参数可以用来写视图界面，但是往往会达不到我们想要的效果，因为默认的 `Dialog` 背景框是满屏的。如果我们想完全定义界面，就需要重写 `build` 函数。 ![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200321232811.png) > MyDi

## 一、Flutter  自定义 Dialog

自定义 `Dialog` 对象，需要继承 `Dialog` 类，尽管 `Dialog` 提供了 `child` 参数可以用来写视图界面，
但是往往会达不到我们想要的效果，因为默认的 `Dialog` 背景框是满屏的。如果我们想完全定
义界面，就需要重写 `build` 函数。

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

> MyDialog.dart

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

class MyDialog extends Dialog {
  String title;
  String content;

MyDialog({this.title="",this.content=""});

@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Material(
      type: MaterialType.transparency,
      child: Center(
        child: Container(
          height: 300,
          width: 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),
              )
            ],
          ),
         
      )),
    );
  }
}

```

> 调用

```
RaisedButton(
  child: Text('t自定义dialog'),
  onPressed: (){
    // MyDialog();
    showDialog(
      context: context,
      builder: (context){
        return MyDialog(
          title:"关于我们",
          content:"关于我们"
        );
      }
    );
  },
),
```

## 二、Flutter 定时器

```
import 'dart:async';

_showTimer(context) {
  var timer;
  timer = Timer.periodic(Duration(milliseconds: 1500), (t) {
    print('执行');
    Navigator.pop(context);
    t.cancel();
  });
}
```

## 三、Flutter  定时器结合 Dialog

```
import 'dart:async';

import 'package:flutter/material.dart';

class MyDialog extends Dialog {
  String title;
  String content;

MyDialog({this.title="",this.content=""});

_showTimer(context){
    var timer;
    timer = Timer.periodic(
      Duration(milliseconds: 3000), (t) {

print('关闭');
        Navigator.pop(context);
        t.cancel();   //取消定时器   timer.cancel();
    });
  }

@override
  Widget build(BuildContext context) {

_showTimer(context);

// TODO: implement build
    return Material(
      type: MaterialType.transparency,
      child: Center(
        child: Container(
          height: 300,
          width: 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),
              )
            ],
          ),
         
      )),
    );
  }
}

```

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

Tags：

很赞哦！ (0)

上一篇：flutter-23(dialog 弹出层、 AlertDialog、SimpleDialog、showModalBottomSheet 、showToast)

下一篇：flutter-25(http get请求数据、post提交数据、以及渲染动态数据)