首次进入Flutter图片画廊页面时应用无响应问题求助

问题原因分析 #

首次进入Gallery页面时应用冻结的核心原因：

• GalleryModel构造函数直接调用loadImagesFromDirectory()，虽方法标记为async，但构造函数同步执行，不会等待异步任务完成。
• 方法内使用directory.listSync()同步遍历设备文件，当目录下图片数量较多时，该操作会阻塞Flutter主线程（UI线程），导致界面无法响应，出现短暂冻结。

异步加载实现方案 #

方案1：改造GalleryModel，添加加载状态管理 #

通过给GalleryModel增加加载状态，配合异步文件遍历，彻底避免主线程阻塞：

修改gallery_model.dart

import 'dart:io';
import 'dart:typed_data';

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

class GalleryModel extends ChangeNotifier {
  List<File> _imageFiles = [];
  List<File> get imageFiles => _imageFiles;

  bool _isLoading = true;
  bool get isLoading => _isLoading;

  GalleryModel() {
    loadImagesFromDirectory();
  }

  Future<void> loadImagesFromDirectory() async {
    try {
      Directory directory = await getApplicationDocumentsDirectory();
      // 用异步遍历list()替代同步listSync()，避免阻塞主线程
      List<FileSystemEntity> files = await directory.list().toList();
      _imageFiles = files
          .where((file) {
            return file is File && file.path.endsWith('.jpg');
          })
          .map((file) => File(file.path))
          .toList();
    } finally {
      _isLoading = false;
      notifyListeners();
    }
  }

  Future<void> addImage(Uint8List imageData) async {
    final directory = await getApplicationDocumentsDirectory();
    final imageFile = File('${directory.path}/${DateTime.now().microsecondsSinceEpoch.toString()}.jpg');
    await imageFile.writeAsBytes(imageData);

    _imageFiles.add(imageFile);
    notifyListeners();
  }

  Future<void> deleteImage(File imageFile) async {
    await imageFile.delete();
    _imageFiles.remove(imageFile);
    notifyListeners();
  }
}

修改gallery.dart

在UI层根据加载状态显示加载指示器，避免空白或冻结：

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

import '../widgets/image_container.dart';
import '../models/gallery_model.dart';

class Gallery extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;

    return Padding(
      padding: EdgeInsets.all(12),
      child: Consumer<GalleryModel>(
        builder: (context, galleryModel, _) {
          // 加载中显示进度指示器
          if (galleryModel.isLoading) {
            return const Center(child: CircularProgressIndicator());
          }
          // 加载完成显示画廊
          return GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
              crossAxisCount: (width / 150).round(),
            ),
            itemCount: galleryModel.imageFiles.length,
            itemBuilder: (context, index) {
              final imageFile = galleryModel.imageFiles[index];
              return ImageContainer(
                imageSource: imageFile,
                borderRadius: 5,
              );
            },
          );
        },
      ),
    );
  }
}

方案2：使用FutureBuilder（可选） #

如果不想修改Model，也可以在UI层通过FutureBuilder监听加载任务：

// 在Gallery widget中
@override
Widget build(BuildContext context) {
  double width = MediaQuery.of(context).size.width;
  final galleryModel = Provider.of<GalleryModel>(context, listen: false);

  return Padding(
    padding: EdgeInsets.all(12),
    child: FutureBuilder(
      future: galleryModel.loadImagesFromDirectory(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        return Consumer<GalleryModel>(
          builder: (context, model, _) {
            return GridView.builder(...); // 原GridView代码
          },
        );
      },
    ),
  );
}

注意：此方案需要确保loadImagesFromDirectory()不会被重复调用，可通过Model的状态判断避免重复执行。

额外性能优化方案 #

1. 图片缩略图加载：加载图片时使用ResizeImage生成缩略图，减少内存占用和加载时间：

// 在ImageContainer中修改Image加载逻辑
Image.file(
  imageSource,
  width: 150,
  height: 150,
  fit: BoxFit.cover,
  cacheWidth: 300, // 缓存缩略图宽度
  cacheHeight: 300,
)

2. 分页加载：当图片数量较多时，实现滚动分页，每次只加载部分图片，避免一次性加载大量文件。

3. Isolate处理文件操作：对于超大量文件的场景，将文件筛选、缩略图生成等耗时操作放到Isolate中执行，完全隔离主线程。

4. 本地缓存：首次加载时生成图片缩略图并缓存到本地，后续打开画廊直接读取缓存的缩略图，大幅提升加载速度。

内容的提问来源于stack exchange，提问作者KlonAnon