如何在 Flutter 中实现加载对话框

今天又是一篇日常水文，如何在 Flutter 中实现加载对话框

作者：坚果

公众号："大前端之旅"

华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,鸿蒙，小程序,安卓，VUE，JavaScript。

本文将向您展示如何在 Flutter 中从头开始创建加载对话框。

概述

有很多场景需要你执行异步计算（future），比如发出 HTTP 请求、处理文件、从本地数据库获取数据等。因为 future 不能立即提供结果，所以用户必须等待一段时间. 在这种情况下，我们可以显示一个加载对话框，让他或她知道发生了什么。加载对话框的另一个好处是它可以防止用户在未来尚未完成时与应用程序交互（编辑文本字段、点击按钮或类似的东西）。

在 Flutter 中，当用户点击对话框之外的某个位置时，可以手动关闭普通对话框。但是，加载对话框不应该这样关闭。它应该只在未来结束时自动消失。像这样：

// show the loading dialog
showDialog(
        // The user CANNOT close this dialog  by pressing outsite it
        barrierDismissible: false,
        context: context,
        builder: (_) {
          return Dialog(
            /*
            put a CircularProgressIndicator() here
            */
          );
       }
);
​
// the future
await someFuture();
​
// close the dialog automatically
 Navigator.of(context).pop();

为了更清楚，请参阅下面的完整示例。

例子

我们要构建的小应用程序在屏幕中央有一个按钮。按下按钮时，将显示一个加载对话框。3 秒后，加载对话框将自动消失。

代码

// main.dart
import 'package:flutter/material.dart';
​
void main() {
  runApp(const MyApp());
}
​
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // 删除调试banner
        debugShowCheckedModeBanner: false,
        title: '大前端之旅',
        theme: ThemeData(
          primarySwatch: Colors.indigo,
        ),
        home: const HomePage());
  }
}
​
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
​
  void _fetchData(BuildContext context) async {
    // show the loading dialog
    showDialog(
        // 用户无法通过在外部按下此对话框来关闭它
        barrierDismissible: false,
        context: context,
        builder: (_) {
          return Dialog(
            // The background color
            backgroundColor: Colors.white,
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 20),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: const [
                  // The loading indicator
                  CircularProgressIndicator(),
                  SizedBox(
                    height: 15,
                  ),
                  // Some text
                  Text('Loading...')
                ],
              ),
            ),
          );
        });
​
    // 您在这里进行相关操作（从 API 获取数据、处理文件、向数据库插入内容等）
    await Future.delayed(const Duration(seconds: 3));
​
    // 以编程方式关闭对话框
    Navigator.of(context).pop();
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('大前端之旅')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _fetchData(context),
          child: const Text('Load Data'),
        ),
      ),
    );
  }
}
​

结论

您已经学习了如何使用 Flutter 提供的原生组件制作加载对话框。不需要第三方包。