[移动开发]Flutter ListView vs CustomScrollView

?ListView 中的 image自动重绘？

这几天在重构项目的时候发现有意思的 现象：

页面跳转到下一个页面后返回，ListView 中的 image,会闪现一下。但是对于的 build 还有其他 会导致重绘的 组件 都没有被调用！ 然后自己就重绘了？实属诡异；

后来排查到 不设置 ListView cacheExtent? 上半部分会好一些；但是下拉到中间；跳转完毕返回还是会出现这个情况！

child: ListView(
	padding: EdgeInsets.only(bottom: AppScreen.calc(15)),
	cacheExtent: AppScreen.height * 2,

后来琢磨了半天 应该是 ListView 缓存造成的；

应为我的列表上半部分 五个组件都不 规则（长度高度不一致；不是一种组件）；

实际上是 Column 嵌套 ListView， 而且 没有使用 ListView.build

return Column(
  children: [
	const InputTop(),
	Expanded(
	  child: ListView(
		padding: EdgeInsets.only(bottom: AppScreen.calc(15)),
		cacheExtent: AppScreen.height * 2,
		children: [
		  Container(
			padding:
				EdgeInsets.only(bottom: AppScreen.calc(30)),
			child: Column(
			  children: [
				if ((snapshot.data['topBanner']
						as List<dynamic>)
					.isNotEmpty)
				  AppBanner(datum: snapshot.data['topBanner']),
			  ],
			),
		  ),
		  Tabs(),
		  if ((snapshot.data['categoryRecommendResps']
				  as List<dynamic>)
			  .isNotEmpty)
			HotCategory(
				datum: snapshot.data['categoryRecommendResps']),
		  if ((snapshot.data['hotProducts'] as List<dynamic>)
			  .isNotEmpty)
			HotProduct(datum: snapshot.data['hotProducts']),
		  if ((snapshot.data['clearance'] as List<dynamic>)
				  .isNotEmpty ||
			  (snapshot.data['newArrivals'] as List<dynamic>)
				  .isNotEmpty)
			ArrivaleClearance(
				datumClearance: snapshot.data['clearance'],
				datumArrivals: snapshot.data['newArrivals']),
		  if ((snapshot.data['justForYou'] as List<dynamic>)
			  .isNotEmpty)
            ///GridView.builder 实现
            ///GridView.builder 实现
			JustForYou(datum: snapshot.data['justForYou']),
		],
	  ),
	)
  ],
);

CustomScrollView 来实现 ：

CustomScrollView 的思路： 实际上就是把 组件分为两类；一类不规则；还有一类 长的页面是一个 规则的页面，使用? SliverGrid 组件进行优化，完了之后发现 不光性能好了，而且也不会出现，进入新的页面之后返回 出现 image 重绘的现象；

return Column(
  children: [
    InputTop(),
    Expanded(
      child: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: Column(
              children: [
                Container(
                  padding: EdgeInsets.only(
                      bottom: AppScreen.calc(30)),
                  child: Column(
                    children: [
                      if ((snapshot.data['topBanner']
                              as List<dynamic>)
                          .isNotEmpty)
                        AppBanner(
                            datum: snapshot.data['topBanner']),
                    ],
                  ),
                ),
                Tabs(),
                if ((snapshot.data['categoryRecommendResps']
                        as List<dynamic>)
                    .isNotEmpty)
                  HotCategory(
                      datum: snapshot
                          .data['categoryRecommendResps']),
                if ((snapshot.data['hotProducts']
                        as List<dynamic>)
                    .isNotEmpty)
                  HotProduct(
                      datum: snapshot.data['hotProducts']),
                if ((snapshot.data['clearance']
                            as List<dynamic>)
                        .isNotEmpty ||
                    (snapshot.data['newArrivals']
                            as List<dynamic>)
                        .isNotEmpty)
                  ArrivaleClearance(
                      datumClearance:
                          snapshot.data['clearance'],
                      datumArrivals:
                          snapshot.data['newArrivals']),
              ],
            ),
          ),
          if ((snapshot.data['justForYou'] as List<dynamic>)
              .isNotEmpty)
            SliverPadding(
              padding: EdgeInsets.all(AppScreen.calc24),
              sliver: SliverGrid(
                gridDelegate:
                    SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: AppScreen.calc(14.5),
                  mainAxisSpacing: AppScreen.calc(14),
                  childAspectRatio: 0.622,
                ),
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return _buildItem(
                        snapshot.data['justForYou'][index]);
                  },
                  childCount: (snapshot.data['justForYou']
                          as List<dynamic>)
                      .length,
                ),
              ),
            )
        ],
      ),
    ),
  ],
);

  _buildItem(dynamic datum) {
    return Container(
      width: AppScreen.calc(330),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(AppScreen.calc(8)),
        border: Border.all(color: AppColor.colorEEEEEE, width: 1),
      ),
      child: Column(
        children: [
          Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(AppScreen.calc(8)),
            ),
            child: ClipRRect(
              // borderRadius: BorderRadius.circular(AppScreen.calc(8)),
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(AppScreen.calc(8)),
                topRight: Radius.circular(AppScreen.calc(8)),
              ),
              child: AppWidget.cachedImage(
                datum['spuPic'],
                width: AppScreen.calc(330),
                height: AppScreen.calc(300),
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.symmetric(
              vertical: AppScreen.calc(24),
              horizontal: AppScreen.calc(12),
            ),
            child: Text(
              datum['spuEnglishName'],
              style: AppTextStyle.textStyle_26_333333,
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
            ),
          ),
          Container(
            padding: EdgeInsets.symmetric(
              vertical: AppScreen.calc(24),
              horizontal: AppScreen.calc(12),
            ),
            child: Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text(
                    "${AppCache().countryState!.currencySymbol}${AppCache().currencyState!.priceToLocal(datum['maxSalePrice'])}",
                    style: AppTextStyle.textStyle_28_e76c1e_500,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                  Text(
                    "/ Piece",
                    style: AppTextStyle.textStyle_28_e76c1e_500,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }