在 Flutter 中显示图像时的 GridView 性能问题

问：

我做了一个简单的 Flutter 项目，并在上面展示了 29 张图片。但这些图像在罗马占据了很大的空间。

在此处输入图像描述

我的代码：

import 'package:cached_network_image/cached_network_image.dart';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:test_gridview/explore_model.dart';

const String token =
    "eyJhbGciOiJBMTI4S1ciLCJlbmMiOiJBMTI4Q0JDLUhTMjU2IiwidHlwIjoiSldUIiwiY3R5IjoiSldUIn0.KJDFxDL8HfahpZClpvhL-KK1bYJ3_h_nLmwYrTbQLdtbFhcf26X2Gg.ryceE7L174TQw3Gm-VjyOw.DDUQOMgcj3A5I-HDAnqgFnmz3tRo8P53tsxLEmezyDMi1aOMjT2hpfqewwykiJqcNEPtpDDq1qEhbDeTtcD3pGSyGXqG4TSaWu6520f0UA0IpipD2IXBfXdQ__eUXd8Hj3znx04M19Q1aYVCin30KLi91ReWrNzRxvey9xwYNtFEcWQV-hKfOZnAHcoFTUcPu1-WOhyLo9T7LSqNYMHILkDDGdIT6VP_RFwtCbFYefcJ8HRl7yo_jjXfcmsVKumREv4bn1BM7NOlQ-S95Mtt8IQuyuQ906-p7woCByn2bkgRw5281Yxrvj9p4vzeHICKLgQh24PygnlwS5CbHGUr8L6H4jRgnMTd3p9g2fvdfLkwCCKbzvPJDQHuyYwMEap6q4Ufeh41GKFDhyBgsdayheIJhUWR-ZFUIU7lJRqP-8saZdXxi1re66iUtlSwCNoUmQU25tJB0ihguvwoR94ou8KlDfA0sIpcIH-JFp_rTWTqWmEHmaXuTQALd173jZRxTKajHwt-9oYxP6TdQhlXQCkvLGCNTxAS4wqrF3Yup_mNeqKb3xVk9jWNc9uDrxiLNAplpm5ZcWgAwmScaKrhbGVrDjDp_9_54V_QXtPwOXU.Bb-KiFrUuZJ2kd-iJvPUCQ";

void main() {
  runApp(const MainApp());
}

Future<ExploreModel> getExplore() async {
  Dio dio = Dio(
    BaseOptions(
      baseUrl: 'https://dorsa-app.ir/api/',
    ),
  );
  var res = await dio.get(
    "Products/Explore/29",
    options: Options(
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer $token',
      },
    ),
  );

  if (res.statusCode == 200) {
    ExploreModel data = ExploreModel.fromJson(res.data);
    return data;
  } else {
    return ExploreModel(
        isSuccess: false,
        statusCode: 500,
        message: "خطای اتصال به سرور",
        data: null);
  }
}

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

  @override
  Widget build(BuildContext context) {
    late Future<ExploreModel> data = getExplore();

   double screenH = MediaQuery.of(context).size.height;
    double screenW = MediaQuery.of(context).size.width;

    return MaterialApp(
      home: Scaffold(
        body: FutureBuilder(
          future: data,
          initialData: ExploreModel(
              isSuccess: false, message: 'Loading', statusCode: -1, data: null),
          builder: (context, snapshot) {
            if (snapshot.data!.statusCode == -1) {
              return const Center(child: CircularProgressIndicator());
            }
            if (snapshot.data!.statusCode == 200) {
    
              return Padding(
                padding: const EdgeInsets.only(left: 10, right: 10, top: 10),
                child: SizedBox(
                  height: screenH,
                  child: MasonryGridView.count(
                    addAutomaticKeepAlives: true,
                    crossAxisCount: 2,
                    mainAxisSpacing: 10,
                    crossAxisSpacing: 10,
                    cacheExtent: 8,
                    itemCount: snapshot.data!.data!.products!.length + 1,
                    itemBuilder: (context, index) {
                      if (index != snapshot.data!.data!.products!.length + 1) {
                        return InkWell(
                          borderRadius:
                              const BorderRadius.all(Radius.circular(15)),
                          onTap: () {},
                          child: Column(
                            children: [
                              ClipRRect(
                                borderRadius:
                                    const BorderRadius.all(Radius.circular(15)),
                                child: Image.network(
                                  
                                      'https://dorsa-app.ir/images/product-min/${snapshot.data!.data!.products![index].image!}',
                                  
                                  fit: BoxFit.cover,
                                  width: screenW /2,
                                  height: snapshot.data!.data!.products![index].height! / 20,
                                  
                                ),
                              ),
                              const SizedBox(
                                height: 5,
                              ),
                              const Row(
                                children: [
                                  SizedBox(
                                    width: 10,
                                  ),
                                  Icon(
                                    Icons.remove_red_eye_outlined,
                                    size: 16,
                                    color: Color.fromARGB(255, 160, 119, 248),
                                  ),
                                  SizedBox(
                                    width: 5,
                                  ),
                                  Text(
                                    '4’455',
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                      color: Color(0xFF575757),
                                      fontSize: 10,
                                      fontFamily: 'Anjoman',
                                      fontWeight: FontWeight.w400,
                                      height: 0,
                                    ),
                                  ),
                                  Spacer(),
                                  Icon(
                                    Icons.more_horiz_outlined,
                                    size: 18,
                                    color: Color.fromARGB(255, 160, 119, 248),
                                  ),
                                  SizedBox(
                                    width: 10,
                                  ),
                                ],
                              ),
                            ],
                          ),
                        );
                      } else {
                        return LayoutBuilder(
                          builder: (context, constraints) {
                            return Container();
                          },
                        );
                      }
                    },
                  ),
                ),
              );
            }
            return Container();
          },
        ),
      ),
    );
  }
}

请注意，这里只有 29 张照片，所有照片的大小加起来为 3 MB，占用 2 GB 的 RAM。

使用的软件包：flutter_staggered_grid_view: ^0.7.0 dio: ^5.3.3 cached_network_image: ^3.3.0

这个页面应该是应用程序资源管理器，我尝试了删除一堆包之类的东西，但没有区别。