Flutter Dialog弹窗组件

已于 2022-07-12 10:41:58 修改
阅读量8.2k 收藏 20
点赞数 7
分类专栏： Flutter 文章标签： Flutter 弹窗
于 2021-11-18 12:00:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14876133/article/details/121396088
版权

文章目录

弹窗系列组件

概述

弹窗的基本内容分布区域：

  • 标题title区域
  • 内容content区域
  • 按钮actions区域

常用方法：

  • showDialog方法是Material组件库提供的，用于弹出Materail风格弹窗的方法。

  • showCupertinoDialog方法是弹出苹果风格的弹窗。

  • showGeneralDialog方法是自定义显示的弹窗内容，可以结合动画组件。

  • showBottomSheet方法是底部弹出Material风格的弹窗。

  • showModalBottomSheet方法是底部弹出一个Modal Material Design风格的对话框。

  • showCupertinoModalPopup方法是用来快速构建弹出iOS风格的底部弹框。

showDialog

在这里插入图片描述

/// showDialog
showDialogFunction(context) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
            return AlertDialog(
                title: const Text("提示"),
                content: const Text("确定删除吗？"),
                actions: [
                    TextButton(
                        onPressed: () {
                            Navigator.of(context).pop();
                        },
                        child: const Text("取消"),
                    ),
                    TextButton(onPressed: () {}, child: const Text("确定")),
                ],
            );
        },
    );
}

showCupertinoDialog

在这里插入图片描述


/// showCupertinoDialog
showCupertinoDialogFunction(context) {
    showCupertinoDialog(
        context: context,
        builder: (BuildContext context) {
            return AlertDialog(
                title: const Text("提示"),
                content: const Text("确定删除吗？"),
                actions: [
                    TextButton(
                        onPressed: () {
                            Navigator.of(context).pop();
                        },
                        child: const Text("取消"),
                    ),
                    TextButton(onPressed: () {}, child: const Text("确定")),
                ],
            );
        },
    );
}

showGeneralDialog

在这里插入图片描述

/// showGeneralDialog
showGeneralDialogFunction(context) {
    showGeneralDialog(
        context: context,
        pageBuilder:
        (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
            return AlertDialog(
                title: const Text("提示"),
                content: const Text("确定删除吗？"),
                actions: [
                    TextButton(
                        onPressed: () {
                            Navigator.of(context).pop();
                        },
                        child: const Text("取消"),
                    ),
                    TextButton(onPressed: () {}, child: const Text("确定")),
                ],
            );
        },
        transitionDuration: const Duration(seconds: 1),
        transitionBuilder: (BuildContext context, Animation<double> animation,
                            Animation<double> secondaryAnimation, Widget child) {
            return FractionalTranslation(
                //从左向右滑出
                // translation: Offset(animation.value - 1, 0),
                //从右向左滑出
                // translation: Offset(1 - animation.value, 0),
                //从顶部滑出
                // translation: Offset(0, animation.value - 1),
                //从底部滑出
                translation: Offset(0, 1 - animation.value),
                child: child,
            );
        },
    );
}

在这里插入图片描述

/// showGeneralDialog：缩放动画
showGeneralDialogFunction2(context) {
  showGeneralDialog(
    context: context,
    pageBuilder:
        (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
      return AlertDialog(
        title: const Text("提示"),
        content: const Text("确定删除吗？"),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: const Text("取消"),
          ),
          TextButton(onPressed: () {}, child: const Text("确定")),
        ],
      );
    },
    transitionBuilder: (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation, Widget child) {
      return ScaleTransition(
        alignment: Alignment.center,
        scale: animation,
        child: child,
      );
    },
  );
}

showBottomSheet

在这里插入图片描述

/// showBottomSheet：底部弹窗
showBottomSheetFunction(context) {
    showBottomSheet(
        context: context,
        builder: (BuildContext context) {
            return Container(
                padding: const EdgeInsets.all(10),
                color: Colors.white,
                height: 240,
                width: double.infinity,
                child: Column(
                    children: [
                        Container(
                            alignment: Alignment.center,
                            height: 55,
                            child: const Text(
                                "提示",
                                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                            ),
                        ),
                        const Expanded(
                            child: Text(
                                "这是一些信息这是一些信息这是一些信息这是一些信息这是一些信息这是一些信息",
                                style: TextStyle(fontSize: 14),
                            ),
                        ),
                        SizedBox(
                            height: 65,
                            child: Row(
                                children: [
                                    Expanded(
                                        child: TextButton(
                                            child: const Text("取消"),
                                            onPressed: () {
                                                Navigator.of(context).pop();
                                            },
                                        ),
                                    ),
                                    Expanded(
                                        child: TextButton(
                                            child: const Text("确定"),
                                            onPressed: () {
                                                Navigator.of(context).pop();
                                            },
                                        ),
                                    ),
                                ],
                            ),
                        ),
                    ],
                ),
            );
        },
    );
}

showModalBottomSheet

在这里插入图片描述

/// showModalBottomSheet：Material风格的底部弹窗
showModalBottomSheetFunction(context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
            return Container(
                padding: const EdgeInsets.all(10),
                color: Colors.white,
                height: 240,
                width: double.infinity,
                child: Column(
                    children: [
                        Container(
                            alignment: Alignment.center,
                            height: 55,
                            child: const Text(
                                "提示",
                                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                            ),
                        ),
                        const Expanded(
                            child: Text(
                                "这是一些信息这是一些信息这是一些信息这是一些信息这是一些信息这是一些信息",
                                style: TextStyle(fontSize: 14),
                            ),
                        ),
                        SizedBox(
                            height: 65,
                            child: Row(
                                children: [
                                    Expanded(
                                        child: TextButton(
                                            child: const Text("再考虑下"),
                                            onPressed: () {
                                                Navigator.of(context).pop();
                                            },
                                        ),
                                    ),
                                    Expanded(
                                        child: TextButton(
                                            child: const Text("考虑好了"),
                                            onPressed: () {
                                                Navigator.of(context).pop();
                                            },
                                        ),
                                    ),
                                ],
                            ),
                        ),
                    ],
                ),
            );
        },
    );
}

showCupertinoModalPopup

在这里插入图片描述

/// showCupertinoModalPopup：iOS风格的底部弹窗
showCupertinoModalPopupFunction(context) {
    showCupertinoModalPopup(
        context: context,
        builder: (BuildContext context) {
            return Container(
                padding: const EdgeInsets.all(10),
                color: Colors.white,
                height: 240,
                width: double.infinity,
                child: Column(
                    children: [
                        Container(
                            alignment: Alignment.center,
                            height: 55,
                            child: const Text(
                                "提示",
                                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                            ),
                        ),
                        const Expanded(
                            child: Text(
                                "这是一些信息这是一些信息这是一些信息这是一些信息这是一些信息这是一些信息",
                                style: TextStyle(fontSize: 14),
                            ),
                        ),
                        SizedBox(
                            height: 65,
                            child: Row(
                                children: [
                                    Expanded(
                                        child: TextButton(
                                            child: const Text("再考虑下"),
                                            onPressed: () {
                                                Navigator.of(context).pop();
                                            },
                                        ),
                                    ),
                                    Expanded(
                                        child: TextButton(
                                            child: const Text("考虑好了"),
                                            onPressed: () {
                                                Navigator.of(context).pop();
                                            },
                                        ),
                                    ),
                                ],
                            ),
                        ),
                    ],
                ),
            );
        },
    );
}

AlertDialog 自定义样式

在这里插入图片描述

showDialog(
    context: context,
    builder: (BuildContext context) {
        return AlertDialog(
            title: Center(child: Text("提示")),
            titleTextStyle: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.black,
                fontSize: 30,
            ),
            content: Center(heightFactor: 1, child: Text("确定删除吗？")),
            backgroundColor: Colors.yellowAccent,
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
            actionsAlignment: MainAxisAlignment.center,
            actions: [
                FlatButton(
                    onPressed: () {
                        Navigator.of(context).pop("no");
                    },
                    child: Text("取消"),
                ),
                FlatButton(
                    onPressed: () {
                        Navigator.of(context).pop("yes");
                    },
                    child: Text("确定"),
                ),
            ],
        );
    },
);

CupertinoAlertDialog IOS风格

在这里插入图片描述

showCupertinoDialog(
    //点击空白处取消
    barrierDismissible: true,
    context: context,
    builder: (context) {
        return CupertinoAlertDialog(
            title: Text("提示"),
            content: Text("确认删除吗？"),
            actions: [
                CupertinoDialogAction(
                    child: Text("取消"),
                    onPressed: () {
                        Navigator.of(context).pop();
                    },
                ),
                CupertinoDialogAction(
                    child: Text("确定"),
                    onPressed: () {},
                ),
            ],
        );
    },
);

SimpleDialog

在这里插入图片描述

showDialog(
    context: context,
    builder: (BuildContext context) {
        return SimpleDialog(
            title: Text("提示"),
            children: [
                Container(
                    height: 80,
                    alignment: Alignment.center,
                    child: Text("确定删除吗？"),
                ),
                Divider(height: 1),
                TextButton(
                    onPressed: () {
                        Navigator.of(context).pop();
                    },
                    child: Text("取消"),
                ),
                Divider(height: 1),
                TextButton(
                    onPressed: () {},
                    child: Text("确定"),
                ),
            ],
        );
    },
);

自定义Dialog

在这里插入图片描述

showDialog(
    context: context,
    builder: (BuildContext context) {
        return Dialog(
            child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                    "hello world",
                    textAlign: TextAlign.center,
                ),
            ),
        );
    },
);
xiangxiongfly915
关注
专栏目录
Flutter之自定义Dialog实现版本更新弹窗功能的实现
08-18
主要介绍了Flutter之自定义Dialog实现版本更新弹窗功能的实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Flutter dialog (1) - showDialog的讲解
热门推荐
SimpleCoder's Blog
03-27 3万+
在应用开发中,或多或少都会遇到需要弹框的问题, 比如:需要用户确认,需要输入一些信息等等的问题,这就要用到 dialog 相关的概念了 而在 flutter 中,所有可以看见的都是 Widget,dialog 也不例外 不过和 android 或 iOS 中不同的一点是,Flutter 中 dialog 不是一个单独的类,而是一个可以由你自定义的 Widget 写在前面 首先为了方便,我定义了一个...
Flutter 初识：对话框和弹出层
最新发布
yang_6799的博客
08-16 1640
Dialog 是一个 Flutter 小部件，用于显示对话框。
【Flutter入门到进阶】Flutter基础篇---弹窗Dialog
Yvan
03-06 5794
通过继承Dialog实现自定义的弹窗所谓toast框其实就是在图层的最上面一层插入一个显示图层，在Flutter中利用OverLayEntry构建图层，然后通过Overlay进行插入。
Flutter Widgets 之 CupertinoActionSheet
老孟Flutter
03-03 5971
注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 CupertinoActionSheet组件是Cupertino（ios）风格底部弹出的提示框，一般情况下点击按钮弹出： RaisedButton( child: Text('点我'), onPressed: () { ...
flutter showDialog弹窗
weixin_44911775的博客
07-14 2547
使用 弹窗内容
flutter Dialog对话框看这一篇就够了
智玲君
12-28 3488
loading_dialog.dart: 继承自系统Dialog（系统dialog继承自StatelessWidget） import 'package:flutter/material.dart'; class LoadingDialog extends Dialog { final String text; LoadingDialog({Key key, @required this.text}) : super(key: key); @override Widget build(B
Flutter 内嵌原生组件 for android
06-22
Flutter 内嵌原生组件 for android Flutter 内嵌原生组件 for android 文档地址 https://blog.csdn.net/nicepainkiller/article/details/125403744 文档地址 ...
Flutter组件化开发方案
01-27
【Flutter组件化开发方案】 组件化开发是一种将大型应用程序拆分为独立、可重用的模块化组件的方法，有助于提升代码的可维护性、可扩展性和团队协作效率。在Flutter中，随着业务需求的增长，单纯地将Flutter作为...
Flutter 自定义dialog工具类
01-07
自定义一个Loading等待Dialog工具类 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; /* * 自定义Loading等待弹框 * @params text 提示内容 */ class LoadingDialog extends...
Flutter Dialog 之 ：CupertinoAlertDialog
一只奋斗的猪
07-04 8662
目录1. 先看一个简单的例子2. showCupertinoDialog 参数说明：3. 使用 `conent` 参数4. 调节标题与内容部分间距5. 使用一个或多个 actions6. `CupertinoDialogAction` 参数说明 Flutter 的文档现在虽然是很健全了，但是不知道为什么对于 IOS 风格组件的文档还是那么的欠缺，当打开 CupertionAlertDialog 的官方文档 后竟然没有 demo 代码，但是 AlertDialog 的文档 就有简单的示例，这就非常的尴尬，估计
Flutter 的 showDialog 和 showCupertinoDialog 有什么区别？
Becomin' Charles
04-17 954
弹出二次确认框的时候，到底应该用 showDialog 和 showCupertinoDialog？
【Flutter】【弹窗】弹窗的快速上手使用和自定义Dialog
自动人生博客
10-24 7295
给用户提示，让用户做出选择，或者是实现部分内容Dialog 可以完全的自己定义一个弹出框，然后可以自己定义整个弹出框的内容，比如加入图片等等// 使用dialog 来自己真正的定义一个对话框 Widget myDialog() {
Flutter中自定义Dialog
程序员吗？
03-19 1016
Dialog在不同的平台，都是一种重要的交互方式，在Flutter中，Dialog也是有很多种，但大多数场景的交互，都需要根据项目的主题或一些特定的交互去实现自定义的Dialog。
Flutter之Dialog
一花一世界 一叶一菩提
03-12 1万+
1、AlertDialog _alertDialog() async { var alertDialogs = await showDialog( context: context, builder: (context) { return AlertDialog( title: Text("提示"), ...
Flutter中showCupertinoModalPopup中能指定弹出窗口的位置是在点击按钮的下面吗？
weixin_42601547的博客
01-31 443
不能。showCupertinoModalPopup默认弹出窗口在屏幕中央，不支持指定位置。你可以使用其他方法实现在点击按钮下面弹出窗口的效果。
Flutter:Dialog对话框及自定义Dialog
weixin_46136019的博客
03-29 2011
自定义 Dialog 对象，需要继承 Dialog 类，尽管 Dialog 提供了 child 参数可以用来写视图界面，但是往往会达不到我们想要的效果，因为默认的 Dialog 背景框是满屏的。如果我们想完全定义界面，就需要重写 build 函数。//定时器,自动关闭Diolog _showTimer(context) {var timer;timer = Timer . periodic(Duration(milliseconds : 3000) , //3000毫秒就是三秒(t) {
【Flutter】Dialog组件&PageView组件
一以贯之的努力 不得懈怠的人生
05-27 552
介绍了Flutter中的Dialog组件和PageView组件的使用。
flutter底部抽屉
qq_36926045的博客
09-09 547
安卓：showModalBottomSheet IOS：showCupertinoModalPopup 效果图 完整代码 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; ///@作者: Q.L ///@创建日期: 2021-09-09 10:55 ///@描述: {底部抽屉} class ActionSheetPage extends StatefulWidget { const Act
flutter getx 弹窗
01-04
以下是使用Flutter GetX实现弹窗的示例代码： 1. 首先，确保你已经导入了所需的依赖包和文件。 ```dart import 'package:flutter/material.dart'; import 'package:get/get.dart'; ``` 2. 在应用程序顶层，将`GetMaterialApp`作为顶层组件，并设置`home`为弹窗示例页面。 ```dart void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return GetMaterialApp( title: "GetX", home: DialogExample(), ); } } ``` 3. 创建一个弹窗示例页面`DialogExample`，并在该页面中调用`BottomSheet`。 ```dart class DialogExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Dialog Example"), ), body: Center( child: ElevatedButton( child: Text("Show Bottom Sheet"), onPressed: () { showBottomSheet(); }, ), ), ); } void showBottomSheet() { Get.bottomSheet( Container( height: 200, color: Colors.white, child: Center( child: Text( "This is a bottom sheet", style: TextStyle(fontSize: 20), ), ), ), ); } } ``` 在上述代码中，我们创建了一个`DialogExample`页面，其中包含一个按钮。当按钮被点击时，调用`showBottomSheet`方法显示底部弹窗。底部弹窗使用`Get.bottomSheet`方法，并传入一个`Container`作为弹窗的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值