Flutter ListView加载了大量图片导致卡顿或崩溃

使用分帧插件:keframe
1.在pubspec.yaml中导入插件:keframe: ^2.0.6
2.使用:
1)在需要分帧的页面引入

import 'package:keframe/keframe.dart';

2)布局:
ListView用SizeCacheWidget包裹,ListView的itemView用FrameSeparateWidget包裹

RefreshController _refreshController = RefreshController();

_smartView(){
    return SizeCacheWidget(
      child: SmartRefresher(
        controller: _refreshController,
        footer: defaultRefreshFooter(),
        enablePullDown: true,
        enablePullUp: true,
        onRefresh: (){
          getSubDataRefresh();
        },
        onLoading: (){
          getSubDataLoadMore();
        },
        child: ListView.builder(
            itemCount: _list.length,
            shrinkWrap: true,
            itemBuilder: (contextList, index) {
              return FrameSeparateWidget(
                child: _itemView(_list[index], index),
              );
            }),
      ),
    );

  }

_itemView(DataMOdel model, int index){
	return Container(
             decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(20.w)),
               child: ClipRRect(
               	 borderRadius: BorderRadius.circular(20.w),
                 child: CachedNetworkImage(
                 imageUrl: model.itemPic,
                 width: 120.w,
                 height: 120.w,
                 fit: BoxFit.cover),
                 ))
}


版权声明:本文为androidhyf原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。