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

原创已于 2023-05-31 08:47:05 修改 · 1.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android

于 2023-03-07 16:37:43 首次发布

文章详细介绍了如何在Flutter应用中使用keframe插件来实现分帧效果。首先在pubspec.yaml文件中导入keframe插件，然后在需要分帧的页面引入相关组件。通过SizeCacheWidget包裹ListView并用FrameSeparateWidget包装itemView，结合SmartRefresher实现刷新和加载更多功能，同时利用CachedNetworkImage展示网络图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用分帧插件：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, 设置自动收缩包裹为true ListView的复用机制不会生效
            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),
                 ))
}