我有一个Flutter应用程序,我在GridView中显示一个图像库。GalleryModel类负责使用loadImagesFromDirectory()方法从设备的存储中加载图像。然而,当我第一次导航到画廊屏幕时,应用程序冻结了一小会儿,变得没有React。我怀疑这种冻结是由GalleryModel的构造函数中所有图像的同步加载引起的。
为了解决这个问题并改善用户体验,我正在寻找关于如何处理图像的异步加载而不冻结应用程序的建议。我考虑过使用FutureBuilder或StreamBuilder小部件,但我不确定如何在此上下文中实现它们。此外,我会很感激任何关于这个问题的潜在原因和替代解决方案,以提高我的画廊的性能的见解。
gallery.dart:
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, _) {
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,
);
},
);
},
),
);
}
}
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;
GalleryModel() {
loadImagesFromDirectory();
}
Future<void> loadImagesFromDirectory() async {
Directory directory = await getApplicationDocumentsDirectory();
List<FileSystemEntity> files = directory.listSync();
_imageFiles = files
.where((file) {
return file is File && file.path.endsWith('.jpg');
})
.map((file) => File(file.path))
.toList();
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();
}
}
提前感谢您的帮助!
1条答案
按热度按时间vlju58qv1#
你可以尝试让所有的图像异步,并开始加载时loadimages调用和隐藏加载时,图像加载完成。
在视图中可以检查