AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Flutter笔记：Widgets Easier组件库（9）使用弹窗

2024-08-12 91
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Flutter笔记：Widgets Easier组件库（9）使用弹窗

1. 概述

1.1 关于Widgets Easier

本库是一个 Flutter 组件库，旨在提供用于Flutter开发的组件，使得开发者能够更简单地构建出更丰富地界面效果。项目地址为：

1.2 模块安装

在你的Flutter项目中，运行下面的命令：

flutter pub add widgets_easier

即可安装最新版本的 Widgets Easier 库。

2. 消息型弹窗

2.1 弹窗构成

消息弹窗（InfoDialog）通常用于在移动应用中显示重要信息，需要用户明确地关闭弹窗以确保信息被看到。以下是InfoDialog的主要构成元素：

  • 图标（可选）
  • 标题（Title）
  • 内容（Content）
  • 关闭按钮（Close Button）

## 2.2 使用语义

InfoDialogs是一种消息式的弹窗，这种弹窗只有一个按钮。你可以为InfoDialogs指定一个type属性，这将拥有语义性色彩。它的弹窗体看起来是这样的：

例如：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    SemanticButton(
      text: 'primary弹窗',
      type: SemanticEnum.primary,
      isOutlined: true,
      onTap: () => InfoDialogs.show(
        context,
        title: "你好啊！",
        message: "这是一个primary消息弹窗",
        buttonText: "我知道了",
        onTapDismiss: () {
          Navigator.of(context).pop();
        },
        type: SemanticEnum.primary,
      ),
    ),
    const Gap(10),
    SemanticButton(
      text: 'secondary弹窗',
      type: SemanticEnum.secondary,
      isOutlined: true,
      onTap: () => InfoDialogs.show(
        context,
        title: "你好啊！",
        message: "这是一个secondary消息弹窗",
        buttonText: "我知道了",
        onTapDismiss: () {
          Navigator.of(context).pop();
        },
        type: SemanticEnum.secondary,
      ),
    ),
    const Gap(10),
    SemanticButton(
      text: 'info弹窗',
      type: SemanticEnum.info,
      isOutlined: true,
      onTap: () => InfoDialogs.show(
        context,
        title: "你好啊！",
        message: "这是一个info消息弹窗",
        buttonText: "我知道了",
        onTapDismiss: () {
          Navigator.of(context).pop();
        },
        type: SemanticEnum.info,
      ),
    ),
    const Gap(10),
    SemanticButton(
      text: 'success弹窗',
      type: SemanticEnum.success,
      isOutlined: true,
      onTap: () => InfoDialogs.show(
        context,
        title: "你好啊！",
        message: "这是一个success消息弹窗",
        buttonText: "我知道了",
        onTapDismiss: () {
          Navigator.of(context).pop();
        },
        type: SemanticEnum.success,
      ),
    ),
    const Gap(10),
    SemanticButton(
      text: 'warning弹窗',
      type: SemanticEnum.warning,
      isOutlined: true,
      onTap: () => InfoDialogs.show(
        context,
        title: "你好啊！",
        message: "这是一个warning消息弹窗",
        buttonText: "我知道了",
        onTapDismiss: () {
          Navigator.of(context).pop();
        },
        type: SemanticEnum.warning,
      ),
    ),
    const Gap(10),
    SemanticButton(
      text: 'danger弹窗',
      type: SemanticEnum.danger,
      isOutlined: true,
      onTap: () => InfoDialogs.show(
        context,
        title: "你好啊！",
        message: "这是一个danger消息弹窗",
        buttonText: "我知道了",
        onTapDismiss: () {
          Navigator.of(context).pop();
        },
        type: SemanticEnum.danger,
      ),
    ),
    const Gap(10),
    SemanticButton(
      text: 'fatal弹窗',
      type: SemanticEnum.fatal,
      isOutlined: true,
      onTap: () => InfoDialogs.show(
        context,
        title: "你好啊！",
        message: "这是一个fatal消息弹窗",
        buttonText: "我知道了",
        onTapDismiss: () {
          Navigator.of(context).pop();
        },
        type: SemanticEnum.fatal,
      ),
    ),
  ],
)

## 2.3 zoomIn动画

InfoDialogs.show是没有动画效果的。你可以直接使用InfoDialogs.zoomIn方法，这将有一个缩放效果的弹窗动画。InfoDialogs.zoomIn方法和InfoDialogs.show具体完全一样的参数。例如：

SemanticButton(
  text: 'zoomIn动画',
  shrink: true,
  onTap: () => InfoDialogs.zoomIn(
    context,
    title: "你好啊！",
    message: "这是一个fatal消息弹窗",
    buttonText: "我知道了",
    onTapDismiss: () {
      Navigator.of(context).pop();
    },
  ),
)

其效果如下：

## 2.4 自定义动画

你还可以通过在InfoDialogs.showInfoDialog方法中指定transitionBuilder参数来自定义弹窗动画效果，例如：

SemanticButton(
  text: '自定义动画',
  shrink: true,
  onTap: () => InfoDialogs.showInfoDialog(
    context,
    title: "你好啊！",
    message: "这是一个消息弹窗",
    buttonText: "我知道了",
    transitionBuilder:
        (context, animation, secondaryAnimation, child) {
      return AnimateStyles.backInDown(animation, child);
    },
    onTapDismiss: () {
      Navigator.of(context).pop();
    },
  ),
)

注：这里使用的AnimateStyles.backInDown动画需要单独安装：

flutter pub add flutter_easy_animations

其效果如下：

3. 确认型弹窗

3.1 弹窗构成

确认型弹窗（Confirmation Dialog）用于在执行某些可能具有重大影响的操作前，要求用户确认其决定。这种弹窗通常包含以下元素：

  • 图标（可选）；
  • 标题：简洁明了地描述所需确认的操作;
  • 内容：提供操作的详细信息，帮助用户做出决策;
  • 操作按钮：通常是“确认”和“取消”，有时可能包括其他选项，如“保存”，“不保存”等;

其消息窗体看起来是这样的：

3.2 使用语义

你可以为ConfirmDialogs指定一个type属性，这将拥有语义性色彩。它的弹窗体看起来是这样的：

例如：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    SemanticButton(
      text: 'primary弹窗',
      type: SemanticEnum.primary,
      onTap: () => ConfirmDialogs.show(
        context,
        title: "你确定吗",
        message: "这个是primary确认弹窗",
        confirmButtonText: "确定",
        cancelButtonText: "真的确定",
        onTapCancel: () {
          Navigator.of(context).pop();
        },
        onTapConfirm: () {
          Navigator.of(context).pop();
        },
        type: SemanticEnum.primary,
      ),
    ),
    const Gap(10),
    SemanticButton(
      text: 'secondary弹窗',
      type: SemanticEnum.secondary,
      onTap: () => ConfirmDialogs.show(
        context,
        title: "你确定吗",
        message: "这个是secondary确认弹窗",
        confirmButtonText: "确定",
        cancelButtonText: "真的确定",
        onTapCancel: () {
          Navigator.of(context).pop();
        },
        onTapConfirm: () {
          Navigator.of(context).pop();
        },
        type: SemanticEnum.secondary,
      ),
    ),
    const Gap(10),
    SemanticButton(
      text: 'info弹窗',
      type: SemanticEnum.info,
      onTap: () => ConfirmDialogs.show(
        context,
        title: "你确定吗",
        message: "这个是info确认弹窗",
        confirmButtonText: "确定",
        cancelButtonText: "真的确定",
        onTapCancel: () {
          Navigator.of(context).pop();
        },
        onTapConfirm: () {
          Navigator.of(context).pop();
        },
        type: SemanticEnum.info,
      ),
    ),
    const Gap(10),
    SemanticButton(
      text: 'success弹窗',
      type: SemanticEnum.success,
      onTap: () => ConfirmDialogs.show(
        context,
        title: "你确定吗",
        message: "这个是success确认弹窗",
        confirmButtonText: "确定",
        cancelButtonText: "真的确定",
        onTapCancel: () {
          Navigator.of(context).pop();
        },
        onTapConfirm: () {
          Navigator.of(context).pop();
        },
        type: SemanticEnum.success,
      ),
    ),
    const Gap(10),
    SemanticButton(
      text: 'warning弹窗',
      type: SemanticEnum.warning,
      onTap: () => ConfirmDialogs.show(
        context,
        title: "你确定吗",
        message: "这个是warning确认弹窗",
        confirmButtonText: "确定",
        cancelButtonText: "真的确定",
        onTapCancel: () {
          Navigator.of(context).pop();
        },
        onTapConfirm: () {
          Navigator.of(context).pop();
        },
        type: SemanticEnum.warning,
      ),
    ),
    const Gap(10),
    SemanticButton(
      text: 'danger弹窗',
      type: SemanticEnum.danger,
      onTap: () => ConfirmDialogs.show(
        context,
        title: "你确定吗",
        message: "这个是danger确认弹窗",
        confirmButtonText: "确定",
        cancelButtonText: "真的确定",
        onTapCancel: () {
          Navigator.of(context).pop();
        },
        onTapConfirm: () {
          Navigator.of(context).pop();
        },
        type: SemanticEnum.danger,
      ),
    ),
    const Gap(10),
    SemanticButton(
      text: 'fatal弹窗',
      type: SemanticEnum.fatal,
      onTap: () => ConfirmDialogs.show(
        context,
        title: "你确定吗",
        message: "这个是fatal确认弹窗",
        confirmButtonText: "确定",
        cancelButtonText: "真的确定",
        onTapCancel: () {
          Navigator.of(context).pop();
        },
        onTapConfirm: () {
          Navigator.of(context).pop();
        },
        type: SemanticEnum.fatal,
      ),
    ),
  ],
)

3.2 zoomIn动画

ConfirmDialogs.show是没有动画效果的。你可以直接使用ConfirmDialogs.zoomIn方法，这将有一个缩放效果的弹窗动画。ConfirmDialogs.zoomIn方法和ConfirmDialogs.show具体完全一样的参数。例如：

SemanticButton(
  text: 'zoomIn动画',
  shrink: true,
  onTap: () => ConfirmDialogs.zoomIn(
    context,
    title: "你确定吗",
    message: "这个是确认弹窗",
    confirmButtonText: "确定",
    cancelButtonText: "真的确定",
    onTapCancel: () {
      Navigator.of(context).pop();
    },
    onTapConfirm: () {
      Navigator.of(context).pop();
    },
  ),
)


其效果如下：

3.3 自定义动画

你还可以通过在ConfirmDialogs.showInfoDialog方法中指定transitionBuilder参数来自定义弹窗动画效果，例如：

SemanticButton(
  text: 'flipInX动画',
  shrink: true,
  onTap: () => ConfirmDialogs.showConfirmDialog(
    context,
    transitionBuilder:
        (context, animation, secondaryAnimation, child) {
      return AnimateStyles.flipInX(animation, child);
    },
    title: "你确定吗",
    message: "这个是确认弹窗",
    confirmButtonText: "确定",
    cancelButtonText: "真的确定",
    onTapCancel: () {
      Navigator.of(context).pop();
    },
    onTapConfirm: () {
      Navigator.of(context).pop();
    },
  ),
)

注：这里使用的AnimateStyles.flipInX动画需要单独安装：

flutter pub add flutter_easy_animations

其效果如下：

4. Windows风格弹窗

4.1 基本用法

WinDialogs是一种模仿Windows风格的弹窗。下面的示例展示了调用一个Windoiws风格的弹窗:

SemanticButton(
  text: '显示Windows风格弹窗',
  isOutlined: true,
  shrink: true,
  radius: 2,
  color: Colors.black,
  onTap: () => WinDialogs.show(
    context,
    title: 'title',
    icon: const Icon(Icons.run_circle_outlined),
    text: '在这个世界上，我们每个人都应该深刻理解，生活中，若能够不断地反思和自省，那么我们就能更好地理解生活的真谛。',
    contents: Row(
      children: [
        const Text('打开(O):'),
        const Gap(10),
        Expanded(
          child: Container(
            height: 25,
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.grey,
                width: 1,
              ),
              borderRadius: BorderRadius.circular(2),
            ),
          ),
        ),
      ],
    ),
    actions: [
      SemanticButton(
        text: '确定',
        width: 90,
        isOutlined: true,
        radius: 2,
        color: Colors.black,
        onTap: () {},
      ),
      const Gap(10),
      SemanticButton(
        text: '取消',
        width: 90,
        isOutlined: true,
        radius: 2,
        color: Colors.black,
        onTap: () {},
      ),
      const Gap(10),
      SemanticButton(
        text: '浏览',
        width: 90,
        isOutlined: true,
        radius: 2,
        color: Colors.black,
        onTap: () {},
      ),
    ],
  ),
),

效果如图所示：

4.2 zoomIn动画

与之前的弹窗一样，你可以使用zoomIn方法来设置一个从小到大的弹窗动画效果，该方法用于与show方法一样的参数：

4.3 自定义动画

如果你打算自定义弹窗动画，这也是和之前的弹窗一样的。你可以使用showWinDialog，并通过transitionBuilder参数指定一个动画。例如：

SemanticButton(
  text: '使用bounceIn动画',
  isOutlined: true,
  shrink: true,
  radius: 2,
  color: Colors.black,
  onTap: () => WinDialogs.showWinDialog(
    context,
    transitionBuilder:
        (context, animation, secondaryAnimation, child) {
      return AnimateStyles.bounceIn(animation, child);
    },
    title: 'title',
    icon: const Icon(Icons.run_circle_outlined),
    text: '在这个世界上，我们每个人都应该深刻理解，生活中，若能够不断地反思和自省，那么我们就能更好地理解生活的真谛。',
    contents: Row(
      children: [
        const Text('打开(O):'),
        const Gap(10),
        Expanded(
          child: Container(
            height: 25,
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.grey,
                width: 1,
              ),
              borderRadius: BorderRadius.circular(2),
            ),
          ),
        ),
      ],
    ),
    actions: [
      SemanticButton(
        text: '确定',
        width: 90,
        isOutlined: true,
        radius: 2,
        color: Colors.black,
        onTap: () {},
      ),
      const Gap(10),
      SemanticButton(
        text: '取消',
        width: 90,
        isOutlined: true,
        radius: 2,
        color: Colors.black,
        onTap: () {},
      ),
      const Gap(10),
      SemanticButton(
        text: '浏览',
        width: 90,
        isOutlined: true,
        radius: 2,
        color: Colors.black,
        onTap: () {},
      ),
    ],

其效果如下：

注：这里使用的AnimateStyles.rollIn动画需要单独安装：

flutter pub add flutter_easy_animations


F. 报告问题和贡献代码

你可以在这个项目的 GitHub 上提供反馈或报告问题。如果你觉得这个库缺少某个功能，请创建一个功能请求。欢迎提交拉取请求。

文章标签：
Windows
开发者
关键词：
Flutter组件库
Flutter Widgets
Flutter easier组件库弹窗
Flutter笔记widgets easier组件库
Flutter笔记
jcLee95
目录
相关文章
你都不懂
|
10天前
|
API 容器
Flutter UI组件库（JUI）
Flutter UI组件库（JUI）
你都不懂
46 17
jcLee95
|
2月前
|
Dart
Flutter笔记：手动配置VSCode中Dart代码自动格式化
Flutter笔记：手动配置VSCode中Dart代码自动格式化
jcLee95
307 5
jcLee95
|
2月前
|
数据安全/隐私保护 Android开发 开发者
Flutter笔记：Widgets Easier组件库-使用隐私守卫
Flutter笔记：Widgets Easier组件库-使用隐私守卫
jcLee95
43 2
jcLee95
|
2月前
|
UED 开发者
Flutter笔记：Widgets Easier组件库（13）- 使用底部弹窗
Flutter笔记：Widgets Easier组件库（13）- 使用底部弹窗
jcLee95
53 2
jcLee95
|
2月前
|
数据采集 API 调度
Flutter笔记：关于SchedulerBinding
Flutter笔记：关于SchedulerBinding
jcLee95
69 1
jcLee95
|
2月前
|
开发者
Flutter笔记：Widgets Easier组件库（11）- 使用提示吐丝（Tip Toasts）
Flutter笔记：Widgets Easier组件库（11）- 使用提示吐丝（Tip Toasts）
jcLee95
36 1
jcLee95
|
2月前
|
开发者
Flutter笔记：Widgets Easier组件库 - 使用标签（Tag）
Flutter笔记：Widgets Easier组件库 - 使用标签（Tag）
jcLee95
95 0
青年码农
Flutter基础widgets教程-SnackBar篇
Flutter基础widgets教程-SnackBar篇
青年码农
157 0
老孟_
|
Dart 程序员 Android开发
Flutter Widgets 之 SnackBar
注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 基础用法 应用程序有时候需要弹出消息提示用户，比如‘网络连接失败’、‘下载成功’等提示，就像Android等Toast，在Flutter中使用SnackBar组件，用法如下： Scaffold.
老孟_
755 0
游客zi3qmblbcdexu
|
16天前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
游客zi3qmblbcdexu
69 2

热门文章

最新文章

  • 1
    Flutter之禅 内存优化篇
  • 2
    Flutter 61: 图解基本 Button 按钮小结 (一)
  • 3
    打通前后端逻辑，客户端Flutter代码一天上线
  • 4
    Flutter新锐专家之路：混合开发篇
  • 5
    在 Dart（以及 Flutter）中生成随机字符串的 3 种不同方法【Flutter 专题 21】
  • 6
    比较 Flutter 日期选择器库【Flutter 专题 6】
  • 7
    Flutter+Serverless 端到端研发架构实践
  • 8
    [Flutter]足够入门的Dart语言系列之函数：函数定义、调用、5种参数类型和main函数
  • 9
    从零开始，一起学习开发个 Flutter App 吧
  • 10
    Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果
  • 1
    flutter 引用图片资源遇到的问题
    56
  • 2
    移动应用开发的未来：Flutter与Android的深度融合
    66
  • 3
    Flutter 弃用 WillPopScope 使用 PopScope 替代方法
    235
  • 4
    【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
    75
  • 5
    【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
    244
  • 6
    【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
    184
  • 7
    【Flutter前端技术开发专栏】Flutter中的图片加载与缓存优化
    535
  • 8
    【Flutter前端技术开发专栏】Flutter中的线程与并发编程实践
    188
  • 9
    【Flutter前端技术开发专栏】Flutter中的性能分析工具Profiler
    315
  • 10
    【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
    82

    • 相关课程

    更多
  • React 入门教程开发文档

    • 相关电子书

    更多
  • 基于flutter的产品应用实践
  • 《Flutter in action》
  • 闲鱼《Flutter 技术解析与实战》
    • 下一篇
    AI助理直击要害，从繁复中提炼精华——使用CDN加速访问OSS存储的图片