升级Flutter 3.32.3后pull_to_refresh下拉刷新阻尼过小振荡过大

修复方法自定义调整回弹属性springDescription

dart 复制代码
RefreshConfiguration(
      footerTriggerDistance: 15,
      dragSpeedRatio: 0.9,
      springDescription: const SpringDescription(
        mass: 1.0, //质量越大,惯性越大,运动越慢
        stiffness: 150, //刚度 - 值越大,弹簧越硬,回弹力越强
        damping: 16.0,//值越大,运动越快停止,减少振荡
      ),
      headerBuilder: () => const ClassicHeader(),
      // 配置默认头部指示器,假如你每个页面的头部指示器都一样的话,你需要设置这个
      footerBuilder: () => const ClassicFooter(),
      // 配置默认底部指示器
      enableLoadingWhenNoData: false,
      enableRefreshVibrate: false,
      //下拉刷新振动
      enableLoadMoreVibrate: false,
      //上拉加载振动
      hideFooterWhenNotFull: false,
      // Viewport不满一屏时,禁用上拉加载更多功能
      enableBallisticLoad: true,
      // 可以通过惯性滑动触发加载更多
      shouldFooterFollowWhenNotFull: (state) {
        // If you want load more with noMoreData state ,may be you should return false
        return false;
      },
      child: child!,
    );

我来解释一下 SpringDescription 中这三个属性的含义:

  1. mass (质量):
  • 值设置为 1.0
  • 这个值模拟了物理弹簧系统中物体的质量
  • 质量越大,惯性越大,运动越慢
  • 质量越小,运动越快,响应更灵敏
  1. stiffness (刚度):
  • 值设置为 150
  • 表示弹簧的硬度或弹性系数
  • 值越大,弹簧越硬,回弹力越强
  • 值越小,弹簧越软,回弹力越弱
  1. damping (阻尼):
  • 值设置为 16.0
  • 控制弹簧运动的阻力
  • 值越大,运动越快停止,减少振荡
  • 值越小,运动持续时间更长,振荡更明显

这三个参数共同决定了下拉刷新时的动画效果:

  • 当前配置(mass: 1.0, stiffness: 150, damping: 16.0)会产生一个相对平滑、有适当弹性的下拉刷新效果
  • 下拉时会有一定的弹性感,但不会过度振荡
  • 松手后会有一个自然的回弹动画

这些参数可以根据需要调整来获得不同的动画效果:

  • 想要更快的响应:可以减小 mass 或增加 stiffness
  • 想要更柔和的动画:可以减小 stiffness 或增加 damping
  • 想要更明显的弹性效果:可以减小 damping
相关推荐
小白郭莫搞科技2 小时前
鸿蒙跨端框架Flutter学习:CustomTween自定义Tween详解
学习·flutter·harmonyos
mocoding2 小时前
使用鸿蒙化flutter_fluttertoast替换Flutter原有的SnackBar提示弹窗
flutter·华为·harmonyos
2501_948120153 小时前
基于Flutter的跨平台社交APP开发
flutter
向哆哆4 小时前
构建健康档案管理系统:Flutter × OpenHarmony 跨端实现就医记录展示
flutter·开源·鸿蒙·openharmony·开源鸿蒙
2601_949868365 小时前
Flutter for OpenHarmony 电子合同签署App实战 - 主入口实现
开发语言·javascript·flutter
向哆哆5 小时前
画栈 · 跨端画师接稿平台:基于 Flutter × OpenHarmony 的整体设计与数据结构解析
数据结构·flutter·开源·鸿蒙·openharmony·开源鸿蒙
2601_949833397 小时前
flutter_for_openharmony口腔护理app实战+我的成就实现
flutter
2601_949613027 小时前
flutter_for_openharmony家庭药箱管理app实战+用药知识详情实现
android·javascript·flutter
一起养小猫7 小时前
Flutter for OpenHarmony 实战 表单处理与验证完整指南
android·开发语言·前端·javascript·flutter·harmonyos
2601_949975087 小时前
flutter_for_openharmony城市井盖地图app实战+附近井盖实现
android·flutter