美文网首页
listView卡顿的大坑

listView卡顿的大坑

作者: 晓函 | 来源:发表于2022-03-15 16:56 被阅读0次

之前用listView,items超过50个就非常卡,感觉就20fps。按照flutter标称大性能,不该如此呀,看代码:


    Widget listView = ListView.builder(
      itemCount: listItem.length,
      itemBuilder: (BuildContext context, int index){
        return Container(color: Colors.blue,height: index.isEven?200:250);
      },
      physics: const NeverScrollableScrollPhysics(),//本身不滚动,让外面的singlescrollview来滚动
      shrinkWrap:true,//收缩,让外面的singlescrollview来滚动
    );
//EasyRefresh里面包含一个SingleScrollview
var easyRefresh =  EasyRefresh(
      child: listView,
      header:App.theme.refreshHeader,
      footer: App.theme.refreshFooter,
      onRefresh: () async{
        pageNo = 1;
        requestData();
      },
      onLoad: () async{
        pageNo++;
        requestData();
      },
    );

return Expanded(child:easyRefresh);

经过查阅资料,listview是懒加载机制,只绘制屏幕范围内的item,屏幕外的item全部销毁,这样哪怕items再多也不会卡,因为它只加载屏幕内的几个items。
我这里会卡,就是因为设置shrinkWrap:true后,listview就不再是懒加载,而是会加载上所有items,绘制出一个超长列表,以便外层singlescrollview可以进行滚动,这样就会很卡。

解决:

既然找出问题了,那我们就解决,去掉shrinkWrap:true和physics: const NeverScrollableScrollPhysics()就行了,但是去掉之后就会和外层singlescrollview冲突,我们又需要EasyRefresh的刷新和上拉加载更多,我只好自己实现了。
刷新用RefreshIndicator,加载更多用scrollController.addListener,我们可以自己包装一下ListView

自定义的RefreshLoad类

class RefreshLoad{

  static Widget buildListView(BuildContext context,{required int itemCount,required Widget Function(BuildContext, int) itemBuilder,Future<void> Function()? onRefresh,Future<void> Function()? onLoadMore}){  
    ScrollController scrollController = ScrollController();
    if(onLoadMore!=null){
      scrollController.addListener(() {
        //print('pixels=${scrollController.position.pixels}');
        if (scrollController.position.pixels == scrollController.position.maxScrollExtent) {
          print('load more');
          onLoadMore();
          Future.delayed(Duration(seconds: 5),(){   // 延迟5s完成刷新        
          });

        }
      });
    }
    Widget listView = ListView.builder(
      itemCount: onLoadMore==null?itemCount:itemCount+1,
      itemBuilder: (BuildContext context,int index){
        //加载更多
        if(onLoadMore!=null && index == itemCount){
          return Container(child: Text('加载更多'),alignment: Alignment.center,height: 40.w,);
        }else{
          return itemBuilder(context,index);
        }
      },
      controller: scrollController,
    );
    listView = MediaQuery.removePadding(child:listView,context:context,removeTop: true,removeBottom: true);
    return 
    onRefresh==null?listView:
    RefreshIndicator(
        onRefresh: onRefresh,//下拉刷新回调
        displacement: 10.w,    //指示器显示时距顶部位置
        color: Colors.white,   //指示器颜色,默认ThemeData.accentColor
        backgroundColor: Colors.grey[300],//指示器背景颜色,默认ThemeData.canvasColor
        //notificationPredicate: defaultScrollNotificationPredicate, //是否应处理滚动通知的检查(是否通知下拉刷新动作)
        child: listView
    );
  }

}


调用

    Widget listView = RefreshLoad.buildListView(
      context,
      itemCount: listItem.length,
      itemBuilder: (BuildContext context, int index){
        return Container(color: Colors.blue,height: index.isEven?200:250);
      },
      onRefresh: () async{
        pageNo = 1;
        requestData();
      },
      onLoadMore: () async{
        pageNo++;
        requestData();
      }
    );

相关文章

  • listView卡顿的大坑

    之前用listView,items超过50个就非常卡,感觉就20fps。按照flutter标称大性能,不该如此呀,...

  • 项目问题总结

    一、scrollview嵌套recyclerview卡顿问题及解决方法二、Listview嵌套gridview单行...

  • 滑动List类型View卡顿问题总结

    快速滑动List类型View卡顿问题总结 ListView,GridView,RecycleView等在滑动时会不...

  • ListView性能优化

    ListView实在是使用的太频繁了,记录下ListView怎么在项目中去优化卡顿现象。首先想到的就是,这些是最基...

  • ListView优化(2),卡顿问题

    前面一节我们了解和解决了ListView列表错乱问题,本节我们来进行另外一个ListView的优化,也就是滑动卡顿...

  • UI卡顿

    UI卡顿原理 60fps->16ms程序的大部分操作要在16ms内完成,listview 的item层叠了太多,有...

  • 面试分享

    直接上问题了。 1.动画有几种? 2.如果加载高清大图 不能压缩。 3.listview快速滑动,卡顿怎么解决? ...

  • 2020-05-09-Android的ListView和Recy

    滑动列表是最常见的UI界面,也常见卡顿问题。今天看下两种列表的使用上面有什么区别。 ListView ListVi...

  • (五)卡顿!卡顿!!卡顿!!!

    今天把3个Fragment的所有英雄头像加载之后,发现居然卡顿!而且还相当严重!!血崩。。。 原因排查: 图片放在...

  • 08-性能优化-列表

    列表是个大坑!! 当时使用之后,列表长度超出 50+ 之后,卡顿极其明显,基本不可用。主要原因是 FlatList...

网友评论

      本文标题:listView卡顿的大坑

      本文链接:https://www.haomeiwen.com/subject/nhyydrtx.html