AI 助理
备案控制台
开发者社区 云原生 文章 正文

Flutter 60: 图解基本 Dialog 对话框小结

2019-09-09 2764
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 0 基础学习 Flutter，第六十步：学习一下 Flutter 基础对话框！

      Dialog 在日常开发中应用广泛，大家也对此很熟悉；小菜以前也整理过关于自定义 Dialog 的小博客，今天小菜系统的学习一下最基本的 Dialog；

      Dialog 一般不直接使用，Flutter 提供了便利的 AlertDialog / SimpleDialog / AboutDialog / CupertinoDialog / CupertinoAlertDialog 等多种对话框样式，小菜重点尝试前三种 Android Type Dialog；但对于自定义对话框可继承 Dialog 进行处理；

AlertDialog

源码分析

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,     // 对话框形状
})

      分析源码，AlertDialog 各个属性都比较清楚，灵活性较高；小菜由简易难逐渐尝试；

案例尝试

  1. 小菜尝试日常最常见的 Dialog；
showDialog(context: context,
    builder: (context) {
      return AlertDialog(title: Text('AlertDialog', style: TextStyle(color: Colors.blueAccent)),
          content: Text('我是 AlertDialog 对话框!'),
          actions: <Widget>[
            FlatButton(child: Text("确定"), onPressed: () => Navigator.of(context).pop()),
            FlatButton(child: Text("取消"), onPressed: () => Navigator.of(context).pop())
          ]);
    });

  1. 小菜尝试对上述 Dialog 添加一些个性化；
  2. titleTextStyle 和 contentTextStyle 不能改变标题和内容中已设置过的样式；
  3. shape 为对话框样式，如果设置为 CircleBorder 圆形背景效果时以宽高较小的尺寸为直径；
  4. actions 按钮个数最多可设置三个；
showDialog(context: context,
    builder: (context) {
      return AlertDialog(
          title: Text('AlertDialog', style: TextStyle(color: Colors.blueAccent)),
          titlePadding: EdgeInsets.all(20.0),
          titleTextStyle: TextStyle(color: Colors.pinkAccent, fontSize: 18.0, fontWeight: FontWeight.w600),
          content: Text('我是 AlertDialog 对话框!'),
          contentPadding: EdgeInsets.all(30.0),
          contentTextStyle: TextStyle(color: Colors.pinkAccent, fontSize: 16.0, fontWeight: FontWeight.w400),
          backgroundColor: Colors.greenAccent.withOpacity(0.7),
          elevation: 10.0,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20.0))),
          actions: <Widget>[
            FlatButton(child: Text("确定"), onPressed: () => Navigator.of(context).pop()),
            FlatButton(child: Text("取消"), onPressed: () => Navigator.of(context).pop())
          ]);
    });

  1. 小菜尝试 List AlertDialog；
  2. Dialog 默认宽度是固定的，高度也有最大限度，若元素大小超过最大宽高则会溢出；
  3. AlertDialog 可以自由设置点击事件，并非只有 actions 设置；
showDialog(context: context,
    builder: (context) {
      return AlertDialog(
          title: Row(children: <Widget>[
            Image.asset('images/ic_launcher.png', scale: 2.0),
            Padding(child: Text('Alert List'), padding: EdgeInsets.only(left: 12.0)) ]),
          content: ListView.builder(itemCount: 30,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(title: Text('当前 index = $index'), onTap: () => Navigator.of(context).pop(index));
              }),
          elevation: 10.0,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(14.0))));
    });

  1. 小菜尝试自定义选择对话框；
showDialog(context: context,
    builder: (context) {
      return AlertDialog(
          title: Row(children: <Widget>[
            Image.asset('images/ic_launcher.png', scale: 2.0),
            Padding(child: Text('Alert 性别选择'), padding: EdgeInsets.only(left: 12.0)) ]),
          titleTextStyle: TextStyle(color: Colors.pinkAccent, fontSize: 18.0, fontWeight: FontWeight.w600),
          content: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
            Row(children: <Widget>[
              Expanded(child: GestureDetector(child: Container(child: Image.asset('images/icon_type_boy.png'), width: 105.0),
                      onTap: () {
                        Navigator.of(context).pop();
                        Toast.show('AlertDialog Boy!', context, duration: Toast.LENGTH_SHORT,gravity: Toast.BOTTOM);
                      })),
              Expanded(child: GestureDetector(child: Container(child: Image.asset('images/icon_type_girl.png'), width: 105.0),
                      onTap: () {
                        Navigator.of(context).pop();
                        Toast.show('AlertDialog Girl!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);
                      })) ]),
            Row(children: <Widget>[
              Expanded(child: Center(child: Text('男生', style: TextStyle(color: Colors.blueAccent, fontSize: 16.0, fontWeight: FontWeight.w300)))),
              Expanded(child: Center(child: Text('女生'))) ])
          ]),
          contentTextStyle: TextStyle(color: Colors.pinkAccent, fontSize: 16.0, fontWeight: FontWeight.w300),
          contentPadding: EdgeInsets.fromLTRB(24.0, 10.0, 24.0, 0.0),
          elevation: 10.0,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(14.0))),
          actions: <Widget>[
            FlatButton(child: Text("确定"), onPressed: () => Navigator.of(context).pop()),
            FlatButton(child: Text("取消"), onPressed: () => Navigator.of(context).pop())
          ]);
    });

SimpleDialog

源码分析

const SimpleDialog({
    Key key,
    this.title,     // 标题内容
    this.titlePadding = const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),  // 标题与周围边距
    this.children,   // 消息内容
    this.contentPadding = const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0),      // 消息内容与周围边距
    this.backgroundColor,  // 对话框背景色
    this.elevation,     // 对话框阴影
    this.semanticLabel,     // 对话框语义化标签
    this.shape,     // 对话框形状
})

      分析源码，SimpleDialog 比 AlertDialog 要简单，只是单独多一个 titlePadding；消息主体默认是 List；基本 SimpleDialog 可实现的效果 AlertDialog 均可实现；

案例尝试

  1. 小菜尝试最常见的选择对话框；小菜采用了 SimpleDialogOption 选项 Widget，默认是占满一行；
showDialog(context: context,
    builder: (context) {
      return SimpleDialog(
          title: Text('SimpleDialog', style: TextStyle(color: Colors.blueAccent)),
          children: <Widget>[
            Padding(child: Text('我是 SimpleDialog 对话框？'), padding: EdgeInsets.all(20.0)),
            SimpleDialogOption(child: Text('Yes'), onPressed: () => Navigator.pop(context)),
            SimpleDialogOption(child: Text('No'), onPressed: () => Navigator.pop(context))
          ]);
    });

  1. 小菜尝试 List SimpleDialog；需注意内容主体为 List 方式，使用 ListView 时要注意冲突；
showDialog(context: context,
    builder: (context) {
      return SimpleDialog(
          title: Row(children: <Widget>[
            Image.asset('images/ic_launcher.png', scale: 2.0),
            Padding(child: Text('Simple List'), padding: EdgeInsets.only(left: 12.0))
          ]),
          children: <Widget>[
            Container(height: 400.0,
                child: ListView.builder(itemCount: 30,
                    itemBuilder: (BuildContext context, int index) {
                      return ListTile(title: Text('当前 index = $index'), onTap: () => Navigator.of(context).pop(index));
                    }))],
          elevation: 10.0,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(14.0))));
    });

  1. 小菜尝试自定义选择对话框；
showDialog(context: context, barrierDismissible: false,
    builder: (context) {
      return SimpleDialog(
          title: Row(children: <Widget>[
            Image.asset('images/ic_launcher.png', scale: 2.0),
            Padding(child: Text('Simple 性别选择'), padding: EdgeInsets.only(left: 12.0))
          ]),
          children: <Widget>[
            Row(children: <Widget>[
              Expanded(child: GestureDetector(child: Container(child: Image.asset('images/icon_type_boy.png'), width: 105.0),
                      onTap: () { Toast.show('SimpleDialog Boy!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM); })),
              Expanded(child: GestureDetector(child: Container( child: Image.asset('images/icon_type_girl.png'), width: 105.0),
                      onTap: () { Toast.show('SimpleDialog Girl!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM); })) ]),
            Padding(padding: EdgeInsets.symmetric(vertical: 14.0)),
                child: Row(children: <Widget>[
                  Expanded(child: Center(child: Text('男生', style: TextStyle(color: Colors.blueAccent, fontSize: 16.0, fontWeight: FontWeight.w300)))),
                  Expanded(child: Center(child: Text('女生', style: TextStyle( color: Colors.pinkAccent, fontSize: 16.0, fontWeight: FontWeight.w300))))
                ])],
          elevation: 10.0,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(14.0))));
    });

UnconstrainedBox + SizedBox

      Flutter 的对话框中均未提供更改宽度的属性，高度可以自适应；小菜采用 UnconstrainedBox + SizedBox 可以实现对话框的宽度更改，首先用 UnconstrainedBox 抵消 showDialog 对宽度的限制；之后采用 SizedBox 设置对话框宽度；注意此时设置高度并没有效果依旧自适应；对话框宽度以 SizedBox 设置的 width 为主，child 的宽度无效；

showDialog(context: context, barrierDismissible: false,
    builder: (context) {
      return UnconstrainedBox(
          constrainedAxis: Axis.vertical,
          child: SizedBox(width: 180.0, height: 180.0,
              child: AlertDialog(content: Icon(Icons.ac_unit))));
    });

AboutDialog

      Flutter 提供了特殊的 AboutDialog，适用于应用说明或版本相关；

源码分析

const AboutDialog({
    Key key,
    this.applicationName,       // 应用名称
    this.applicationVersion,    // 版本说明
    this.applicationIcon,       // 应用图标
    this.applicationLegalese,   // 法律声明
    this.children,              // 消息内容
})

      分析源码可知，AboutDialog 继承自 AlertDialog 但对于自定义内容较少，对于 applicationName / applicationVersion / applicationLegalese 仅提供字符串方式，无法调整样式；且默认有版权和取消按钮；

案例尝试

      AboutDialog 类似于系统对话框，整体效果我们无法调整，对于主体内容 children 部分，与 SimpleDialog 类似，无法延迟加载模型组件，对于 ListView 等需明确高度；

showDialog(context: context,
    barrierDismissible: false,
    builder: (context) {
      return AboutDialog(
          applicationIcon: Container(child: Image.asset('images/icon_hzw02.jpg'), width: 80.0),
          applicationName: 'Flutter Dialog',
          applicationLegalese: '所有解释权归本人所有！',
          applicationVersion: 'V1.5.2',
          children: <Widget>[
            Padding(padding: EdgeInsets.only(top: 10.0), child: Text('1. AboutDialog!')),
            Padding(padding: EdgeInsets.only(top: 10.0), child: Text('2. SimpleDialog!')),
            Padding(padding: EdgeInsets.only(top: 10.0), child: Text('3. AlertDialog!'))
          ]);
    });

showAboutDialog

      Flutter 针对 AboutDialog 提供了简易的 showAboutDialog 方法；

源码分析

void showAboutDialog({
  @required BuildContext context,
  String applicationName,       // 应用名称
  String applicationVersion,    // 版本说明
  Widget applicationIcon,       // 应用图标
  String applicationLegalese,   // 法律声明
  List<Widget> children,        // 消息内容
})

      分析源码，showAboutDialog 是简化版的 AboutDialog，参数几乎全部一致；差别在于 showDialog 方式可以设置点击遮罩是否关闭对话框，而 showAboutDialog 不支持；

案例尝试

showAboutDialog(context: context,
    applicationIcon: Container(child: Image.asset('images/icon_hzw02.jpg'), width: 80.0),
    applicationName: 'Flutter Dialog',
    applicationLegalese: '所有解释权归本人所有！',
    applicationVersion: 'V1.5.2',
    children: <Widget>[
      Padding(padding: EdgeInsets.only(top: 10.0), child: Text('1. AboutDialog!')),
      Padding(padding: EdgeInsets.only(top: 10.0), child: Text('2. SimpleDialog!')),
      Padding(padding: EdgeInsets.only(top: 10.0), child: Text('3. AlertDialog!'))
    ]);

showDialog

源码分析

Future<T> showDialog<T>({
  @required BuildContext context,
  bool barrierDismissible = true,   // 遮罩层点击是否关闭对话框
  @Deprecated(
    'Instead of using the "child" argument, return the child from a closure '
    'provided to the "builder" argument. This will ensure that the BuildContext '
    'is appropriate for widgets built in the dialog.'
  ) Widget child,
  WidgetBuilder builder,
})

      分析源码，showDialog 采用 builder 方式取代 child 方式；而实际上 showDialog 是对 showGeneralDialog 的封装，默认的遮罩层颜色和渐进渐出的动画效果；

showGeneralDialog

源码分析

Future<T> showGeneralDialog<T>({
  @required BuildContext context,
  @required RoutePageBuilder pageBuilder,   // 对话框内部绘制
  bool barrierDismissible,      // 遮罩层点击是否关闭对话框
  String barrierLabel,      // 语义化标签
  Color barrierColor,       // 遮罩层颜色
  Duration transitionDuration,      // 动画持续时长
  RouteTransitionsBuilder transitionBuilder,    // 动画过程
})

      分析源码，showGeneralDialog 提供了更丰富的对话框设计；而实际也是对 Navigator.push 的封装；

案例尝试

      小菜重现以前博客中实现的简易对话框：由底部弹出且透明度由 0.0 到 1.0；测试 barrierColor 进入和退出时都是渐变符合动画效果，与采用 Navigator 打开页面动画方式不同；

showGeneralDialog(context: context,
    pageBuilder: (buildContext, _, __) {
      return Center(child: Container(
              height: 200.0, width: 200.0,
              decoration: BoxDecoration(color: Colors.greenAccent, borderRadius: BorderRadius.circular(5.0)),
              child: Icon(Icons.ac_unit, color: Colors.white)));
    },
    barrierDismissible: false,
    barrierColor: Colors.pink.withOpacity(0.2),
    transitionDuration: Duration(milliseconds: 1500),
    transitionBuilder: (context, animation, secondaryAnimation, child) {
      return SlideTransition(
          position: Tween<Offset>(begin: Offset(0.0, 1.0), end: Offset(0.0, 0.0)).animate(CurvedAnimation(parent: animation, curve: Curves.fastOutSlowIn)),
          child: FadeTransition(opacity: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(parent: animation, curve: Curves.linear)),
              child: child));
    });

      虽然我们经常自定义 Dialog，但还是需要对系统基础的 Dialog 有所认知；以上是小菜的测试过程，如有错误请多多指导！

来源： 阿策小和尚

文章标签：
容器
关键词：
Flutter对话框
Flutter dialog
Flutter Dialog 对话框
阿策～
目录
相关文章
lqj_本人
|
1月前
|
Dart 搜索推荐 API
Flutter & 鸿蒙next版本：自定义对话框与表单验证的动态反馈与错误处理
在现代移动应用开发中，用户体验至关重要。本文探讨了如何在 Flutter 与鸿蒙操作系统（HarmonyOS）中创建自定义对话框，并结合表单验证实现动态反馈与错误处理，提升用户体验。通过自定义对话框和表单验证，开发者可以提供更加丰富和友好的交互体验，同时利用鸿蒙next版本拓展应用的受众范围。
lqj_本人
84 1
明弟有理想
|
2月前
|
开发者 UED
flutter:dialog (十一)
本文介绍了 Flutter 中常用的弹窗组件和方法，包括 `AlertDialog`、`SimpleDialog`、`showModalBottomSheet` 和 `toast`。每个组件的使用方法和示例代码都进行了详细说明，帮助开发者快速理解和应用这些弹窗功能。例如，`AlertDialog` 用于显示带有标题、内容和按钮的对话框；`SimpleDialog` 用于显示多个选项供用户选择；`showModalBottomSheet` 用于从屏幕底部弹出模态对话框；而 `toast` 则用于显示短暂的消息提示。文中还提供了如何处理点击事件、取消弹窗等常见操作的代码示例。
明弟有理想
31 1
一笑轮回~
|
5月前
|
UED
Flutter弹窗链-顺序弹出对话框
Flutter弹窗链-顺序弹出对话框
一笑轮回~
56 0
一叶飘舟
|
6月前
Flutter自定义对话框返回相关问题汇总
Flutter自定义对话框返回相关问题汇总
一叶飘舟
33 0
过分的规定
|
7月前
|
开发框架
Flutter自定义对话框返回相关问题汇总
Flutter自定义对话框返回相关问题汇总，详细解释 Flutter是一款流行的移动应用开发框架，它提供了很多内置的对话框，但是有时候我们需要自定义对话框来满足特定需求。在使用自定义对话框时，可能会遇到一些问题，下面是一些常见问题的解答：
过分的规定
76 1
Zhujiang
Flutter自定义Dialog
Flutter自定义Dialog
Zhujiang
177 0
Flutter自定义Dialog
IAM17
【交互 widget】Flutter Dialog
【交互 widget】Flutter Dialog
IAM17
305 0
【交互 widget】Flutter Dialog
我是坚果
|
存储
flutter使用 RfFlutter 来显示对话框
RfFlutter 具有看起来不错的基本警报，并且可以轻松使用。我们将设置一个带有 HomeView 无状态小部件的基本应用程序。我将使用功能性小部件，这样我就不会编写太多代码。您可以通过定义整个类来使用普通的无状态小部件。我们将让我们的应用程序带有一个简单的 HomeView 小部件。我们将在整个教程中使用的中心有一个按钮。
我是坚果
205 0
BennuC
|
Web App开发 Android开发 iOS开发
Flutter入门：自定义dialog
自定义dialog
BennuC
390 0
阿策～
|
网络架构
Flutter 124: 日常问题小结 (三) 自定义 Dialog 二三事
0 基础学习 Flutter，第一百二十四步：继续整理日常遇到的小问题！
阿策～
475 0
Flutter 124: 日常问题小结 (三) 自定义 Dialog 二三事

热门文章

最新文章

  • 1
    Flutter 61: 图解基本 Button 按钮小结 (一)
  • 2
    打通前后端逻辑，客户端Flutter代码一天上线
  • 3
    Flutter新锐专家之路：混合开发篇
  • 4
    Flutter Plugin调用Native APIs
  • 5
    GMTC-闲鱼Flutter实践效果访谈
  • 6
    从零开始，一起学习开发个 Flutter App 吧
  • 7
    Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果
  • 8
    【Flutter】Dart 面向对象 ( get 方法 | set 方法 | 静态方法
  • 9
    flutter外接纹理实现方案
  • 10
    《Flutter 动画系列一》25种动画组件超全总结
  • 1
    flutter 引用图片资源遇到的问题
    91
  • 2
    移动应用开发的未来：Flutter与Android的深度融合
    81
  • 3
    Flutter 弃用 WillPopScope 使用 PopScope 替代方法
    297
  • 4
    【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
    83
  • 5
    【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
    290
  • 6
    【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
    223
  • 7
    【Flutter前端技术开发专栏】Flutter中的图片加载与缓存优化
    649
  • 8
    【Flutter前端技术开发专栏】Flutter中的线程与并发编程实践
    236
  • 9
    【Flutter前端技术开发专栏】Flutter中的性能分析工具Profiler
    349
  • 10
    【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
    105

    • 相关电子书

    更多
  • 基于flutter的产品应用实践
  • 《Flutter in action》
  • 闲鱼《Flutter 技术解析与实战》
    • 下一篇
    阿里云oss存储简介和如何使用