• 售前

  • 售后

热门帖子
入门百科

Flutter 项目实战 实现分页加载图片的列表 十

[复制链接]
您脱风云错 显示全部楼层 发表于 2022-1-12 12:09:43 |阅读模式 打印 上一主题 下一主题
 /  列表加载性能分析  /



           作为一名Flutter开发者,我们不仅仅是完成应用功能的开发,而且需要的对应用的性能有一个指标 . 应用 性能常见指标 如下 性能指标 :  
  
         应用性能指标     
  使用Android Studio 测试Flutter应用界面的性能 为什么启用Profile模式测试应用性能
         Android Studio Profile 模式启动应用     
  查看每一帧渲染时间 ,  内存使用详情 
         每帧渲染时间、内存使用情况   
  手机上也可以查看  性能图层
               手机上查看UI渲染情况   
  快速滑动列表时 每帧渲染时间变长 , 内存也增加加速
         列表快速滑动 , 每帧渲染时间和内存使用情况   

/  GridView.builder /



   
GridView可以构建一个二维网格列表
GridView.count 快速的创建横轴固定数量子元素的GridView
GridView.extent快速的创建纵轴子元素为固定最大长度的GridView
GridView.builder适用于子widget数量比较多时创建网格列表

  
  . 列表下拉刷新 , 使用下拉刷新指示器 RefreshIndicator 
  
  
  . 上拉加载更多 , 刷新指示器监听滚动距离来来加载更多 (ScrollNotification)
  滚动距离 (pixels)、滚动到顶部( minScrollExtent )、滚动到底部(maxScrollExtent)、滚动方向 (axisDirection) . 
  滚动到底部 ( notification.metrics.pixels==notification.metrics.maxScrollExtent )
   
  . GlobalKey 实现局部刷新 , 当获取到数据源(从网络获取数据后) 刷新网格列表 .
  1. GlobalKey<GridViewGuilderState> _gvGsKey = GlobalKey();
复制代码
  1. _gvGsKey.currentState!.changeGvData(isLoaMor, _data);
复制代码

   
  . 亲自测试加载10000条数据 (每次加载20条 ) , 每秒钟应用绘制的帧数 , 内存使用情况 通过Android Studio 可以运行在 Profile 模式下查看 . 如果要查看,具体是哪些组件在频繁的绘制 , 需要在 Debug 模式下查看 .
  
  
  运行 Profile 模式
  
  
   
  运行 Debug 模式
  滑动列表可以查看哪些组件在数据加载的过程中被频繁渲染到列表里 :
  图片加载  Image.network
  图片加载最外层容器  Container 
        为了减小每帧渲染到时间 , 可以减小被频繁渲染布局的视图嵌套层数 ( 删除不必要的布局 )
  官方建议使用 RepaintBoundary 用来减少需要重绘的次数 .
  . 当列表每一项不被 RepaintBoundary包裹时 , 列表每次加载更多 Container被重复绘制 .
         
   
  . 当列表每一项被 RepaintBoundary 包裹 , 列表每次加载更多 Container 不会重复绘制 .
  
   
  
  
    下载案例

来源:https://blog.caogenba.net/u013491829/article/details/122370591
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作