Flutter：点击P1按钮显示CircularProgressBar，PDF加载完成后跳转至P2并隐藏

核心思路 #

• 在P1页面维护进度条显示状态，点击按钮后立即触发进度条展示
• 异步执行设备PDF文件扫描逻辑，完成后携带扫描结果导航至P2，同时隐藏进度条
• P2直接使用传入的PDF列表数据，避免重复执行加载操作

代码实现 #

P1 页面代码

import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';

class P1Page extends StatefulWidget {
  const P1Page({super.key});

  @override
  State<P1Page> createState() => _P1PageState();
}

class _P1PageState extends State<P1Page> {
  bool _isLoading = false;
  List<File> _pdfFiles = [];

  // 异步扫描设备中的PDF文件
  Future<void> _scanPdfFiles() async {
    setState(() {
      _isLoading = true;
    });

    try {
      // 示例为扫描外部存储，实际需根据平台配置权限
      final directory = await getExternalStorageDirectory();
      if (directory != null) {
        _pdfFiles = directory.listSync(recursive: true)
            .where((item) => item is File && item.path.endsWith('.pdf'))
            .cast<File>()
            .toList();
      }
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('PDF扫描失败: $e')),
        );
      }
    } finally {
      if (mounted) {
        setState(() {
          _isLoading = false;
        });
        // 导航至P2并传入扫描结果
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => P2Page(pdfFiles: _pdfFiles),
          ),
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('P1 页面')),
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            ElevatedButton(
              onPressed: _isLoading ? null : _scanPdfFiles,
              child: const Text('查看PDF列表'),
            ),
            // 加载状态下显示半透明背景+圆形进度条
            if (_isLoading)
              Container(
                width: double.infinity,
                height: double.infinity,
                color: Colors.black54,
                child: const CircularProgressIndicator(color: Colors.white),
              ),
          ],
        ),
      ),
    );
  }
}

P2 页面代码

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

class P2Page extends StatelessWidget {
  final List<File> pdfFiles;

  const P2Page({super.key, required this.pdfFiles});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('PDF 文件列表')),
      body: pdfFiles.isEmpty
          ? const Center(child: Text('未找到PDF文件'))
          : ListView.builder(
              itemCount: pdfFiles.length,
              itemBuilder: (context, index) {
                final file = pdfFiles[index];
                return ListTile(
                  title: Text(file.path.split('/').last),
                  subtitle: Text(file.path),
                );
              },
            ),
    );
  }
}

关键细节说明 #

• 状态控制：通过_isLoading变量精准控制进度条的显示/隐藏，确保点击按钮后立即给予用户加载反馈
• 异步处理：将PDF扫描逻辑封装在异步方法中，避免阻塞UI线程；通过try-catch-finally处理异常场景，保证进度条最终会被隐藏
• 数据传递：扫描完成后直接将PDF列表传递给P2，避免P2重复执行扫描操作，提升页面切换效率
• 权限提示：实际开发中需添加存储权限申请逻辑（如使用permission_handler包），否则无法正常访问设备存储文件

内容的提问来源于stack exchange，提问作者Faizan Abbas Bangash