如何在Flutter中实现类iOS默认样式的自定义进度对话框？

你现在用的是Material风格的CircularProgressIndicator放在页面中心，这和iOS系统默认的进度对话框样式差得有点远。要实现iOS原生那种弹出式、带半透明背景的进度对话框，咱们得用Flutter专门提供的Cupertino组件库，它就是用来复刻iOS原生UI的。

直接上完整的实现代码，你可以直接复制运行：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'iOS Style Progress Dialog',
      theme: ThemeData(primarySwatch: Colors.red),
      home: const ProgressBarScreen(),
    );
  }
}

class ProgressBarScreen extends StatelessWidget {
  const ProgressBarScreen({super.key});

  // 显示iOS风格进度对话框的方法
  void _showiOSProgressDialog(BuildContext context) {
    showCupertinoDialog(
      context: context,
      // 禁止点击外部关闭对话框，和iOS原生行为一致
      barrierDismissible: false,
      builder: (BuildContext context) {
        // 使用CupertinoPopupSurface模拟iOS原生对话框的圆角和背景
        return CupertinoPopupSurface(
          isSurfacePainted: true,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 24),
            child: Column(
              // 最小化对话框尺寸，避免占满屏幕
              mainAxisSize: MainAxisSize.min,
              children: [
                // iOS风格的加载指示器
                const CupertinoActivityIndicator(
                  radius: 16, // 调整大小，贴近iOS默认
                  color: CupertinoColors.activeBlue,
                ),
                const SizedBox(height: 16),
                // 可选的提示文字
                const Text(
                  '加载中...',
                  style: TextStyle(
                    fontSize: 16,
                    color: CupertinoColors.secondaryLabel,
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );

    // 模拟加载完成后关闭对话框（实际开发中替换成你的异步任务逻辑）
    Future.delayed(const Duration(seconds: 3), () {
      Navigator.of(context).pop();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: const Color(0xFFB50208),
        title: const Text('Progressbar'),
      ),
      body: Center(
        // 用CupertinoButton保证按钮风格也贴近iOS
        child: CupertinoButton(
          color: const Color(0xFFB50208),
          onPressed: () => _showiOSProgressDialog(context),
          child: const Text('显示进度对话框'),
        ),
      ),
    );
  }
}

关键细节说明： #

• showCupertinoDialog：专门用于触发iOS风格的对话框，替代Material的showDialog，它自带iOS的弹出动画和半透明背景。
• CupertinoActivityIndicator：iOS原生样式的加载指示器，和你原来用的CircularProgressIndicator完全不同，视觉上更贴近iOS系统。
• CupertinoPopupSurface：提供iOS对话框特有的圆角和磨砂质感背景，比直接用CupertinoAlertDialog更贴近原生样式。
• barrierDismissible: false：这是iOS进度对话框的默认行为——用户不能通过点击外部关闭，必须等待任务完成。

如果需要更个性化的调整，比如修改指示器颜色、对话框圆角大小，直接调整对应组件的属性就行。比如给CupertinoPopupSurface设置borderRadius，或者给CupertinoActivityIndicator换color。

内容的提问来源于stack exchange，提问作者Ankit Kumar Saini