标题滚动到列表视图中的图像网格视图每次在颤动中滚动时都会重新加载图像列表

Question

测试用例一：：当我们滚动视图时，带有标题的Image Grid画廊总是重新加载或重新出现。

将视图滚动至底部，然后再次滚动至顶部后，已查看的图像将再次重新加载。 （从素材资源加载的图片文件大约100-150kb）

import 'package:flutter/material.dart';

class ImageGridGallaryInsideList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      color: Colors.grey,
      child: ListView.builder(
        itemCount: 5,
        itemBuilder: (BuildContext context, int index) {
          if (index % 2 != 1) {
            return Container(
              padding: EdgeInsets.all(10),
              color: Colors.red,
              child: Center(child: Text("Header Index: " + index.toString())),
            );
          } else {
            return GridView.builder(
              shrinkWrap: true,
              itemCount: 20,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2, childAspectRatio: .7),
              physics: NeverScrollableScrollPhysics(),
              itemBuilder: (context, index) {
                String asset = "assets/images/templates/model_" +
                    (index + 1).toString() +
                    ".jpg";
                return Center(
                  child: Container(
                    margin: EdgeInsets.all(2),
                    color: Colors.blueAccent.withOpacity(0.2),
                    // child: Image.asset(asset),
                    child: FadeInImage(
                      fadeInDuration: Duration(milliseconds: 100),
                      image: Image.asset(asset).image,
                      fit: BoxFit.fill,
                      placeholder: Image.asset(
                              "assets/images/templates/place_holder.png")
                          .image,
                    ),
                  ),
                );
              },
            );
          }
        },
      ),
    ));
  }
}

测试案例二：仅包含图像的网格

注意： 当我们仅使用不带标题的GridView时，也会出现问题 。

    @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      color: Colors.grey,
      child: testGridWithImageOnly(),
    ));
  }

  Widget testGridWithImageOnly() {
    return Container(
      child: GridView.builder(
        shrinkWrap: true,
        physics: ScrollPhysics(), // to disable GridView's scrolling
        itemCount: listTitle.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: .7,
        ),
        itemBuilder: (contxt, indx) {
          String asset =
              "assets/images/templates/model_" + (indx + 1).toString() + ".jpg";

          return Card(
            margin: EdgeInsets.all(4.0),
            color: Colors.purpleAccent,
            child: Padding(
              padding: const EdgeInsets.only(left: 12.0, top: 6.0, bottom: 2.0),
              child: Center(
                child: FadeInImage(
                  fadeInDuration: Duration(milliseconds: 100),
                  image: Image.asset(asset).image,
                  fit: BoxFit.fill,
                  placeholder:
                      Image.asset("assets/images/templates/place_holder.png")
                          .image,
                ),
              ),
            ),
          );
        },
      ),
    );
  }