Flutter:Dialog对话框及自定义Dialog

如果声音不记得
1,214 阅读3分钟

基本属性介绍

几个自带的dialog用法和属性基本一致，只是部分参数不同

const AlertDialog({
  Key? key,
  this.title, //对话框标题组件
  this.titlePadding, // 标题填充
  this.titleTextStyle, //标题文本样式
  this.content, // 对话框内容组件
  this.contentPadding = const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0), //内容的填充
  this.contentTextStyle,// 内容文本样式
  this.actions, // 对话框操作按钮组
  this.backgroundColor, // 对话框背景色
  this.elevation,// 对话框的阴影
  this.semanticLabel, //对话框语义化标签(用于读屏软件)
  this.shape, // 对话框外形
})

显示dialog：
showDialog:

Future<T?> showDialog<T>({
  required BuildContext context,
  required WidgetBuilder builder,//需要显示的弹窗
  bool barrierDismissible = true,//点击背后蒙层是否关闭弹框，默认为 true
  Color? barrierColor = Colors.black54,//背后蒙层颜色
  String? barrierLabel,
  bool useSafeArea = true,//是否使用安全区域，默认为 true
  bool useRootNavigator = true,//是否使用根导航，默认为 true
  RouteSettings? routeSettings,//路由设置
})

showCupertinoDialog 也是控制 Dialog 弹出的 api。其实与 showDialog
一样，两者都可以调用各种弹框，但是 showCupertinoDialog 默认是不可以点击空白区域隐藏的。

Future<T?> showCupertinoDialog<T>({
  required BuildContext context,
  required WidgetBuilder builder,//需要显示的弹窗
  String? barrierLabel,
  bool useRootNavigator = true,//是否使用根导航，默认为 true
  bool barrierDismissible = false,//点击背后蒙层是否关闭弹框，默认为 false
  RouteSettings? routeSettings,//路由设置
})

1.AlertDialog确认对话框

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

          );
        }
    );

    print(result);

  }

image.png

2.SimpleDialog选择对话框

  _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);
  }

image.png

3.showModalBottomSheet底部弹出的对话框

  _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);
  }

image.png

4.showToast提示信息框

这是一个第三方组件，需要我们手动导入：pub.dev/packages/fl…

其实直接在控制台运行以下命令即可：

flutter pub add fluttertoast


    Fluttertoast.showToast(
        msg: "提示信息",
        toastLength: Toast.LENGTH_LONG,  //长度
        gravity: ToastGravity.BOTTOM,  //配置方位
        timeInSecForIosWeb: 1,  //显示时间,这个配置只在IOS上有效
        backgroundColor: Colors.black,
        textColor: Colors.white,
        fontSize: 16.0
    );

5.自定义Dialog

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

这是一个结合定时器的自定义Dialog：

import 'dart:async';

import 'package:flutter/material.dart';

class MyDialog extends Dialog{
  String title;
  String content;

  MyDialog(this.title,this.content);

  //定时器,自动关闭Diolog
  _showTimer(context){
    var timer;
    timer = Timer.periodic(
      Duration(milliseconds: 3000),//3000毫秒就是三秒
        (t){
        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(
          width: 300,
          height: 300,
          color: Colors.white,
          child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Padding(
              padding: EdgeInsets.all(10),
              child: Stack(
                    children: [
                      Align(
                        child: Text('${this.title}'),
                        alignment: Alignment.center,
                      ),
                      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,),
            )
          ],
        ),
      ),
    ),

    );
  }
}

image.png

关注公众号：Android老皮
解锁  《Android十大板块文档》 ，让学习更贴近未来实战。已形成PDF版

内容如下：

1.Android车载应用开发系统学习指南（附项目实战）
2.Android Framework学习指南，助力成为系统级开发高手
3.2023最新Android中高级面试题汇总+解析，告别零offer
4.企业级Android音视频开发学习路线+项目实战（附源码）
5.Android Jetpack从入门到精通，构建高质量UI界面
6.Flutter技术解析与实战，跨平台首要之选
7.Kotlin从入门到实战，全方面提升架构基础
8.高级Android插件化与组件化（含实战教程和源码）
9.Android 性能优化实战+360°全方面性能调优
10.Android零基础入门到精通，高手进阶之路

敲代码不易，关注一下吧。ღ( ´･ᴗ･` ) 🤔

avatar
文章
阅读
粉丝