flutter滚动视图之ScrollDirection、ViewportOffset源码解析(一)

perl 复制代码
/// 滚动的方向,相对于由 [AxisDirection] 和 [GrowthDirection] 定义的
/// 正向滚动偏移轴。
///
/// 它和 [GrowthDirection] 类似,但不同的是它多了一个第三个值 [idle],
/// 表示当前没有滚动的状态。
///
/// 例如,在 [RenderSliverFloatingPersistentHeader] 中,它会用这个枚举
/// 来判断只有当用户滚动方向与检测到的滚动偏移变化方向一致时才会展开。
///
/// {@template flutter.rendering.ScrollDirection.sample}
/// 下面是一个示例:
/// 一个带有 [CustomScrollView] 的页面,
/// 在 [AppBar.bottom] 中用 [Radio] 按钮改变 [AxisDirection],
/// 以演示不同的配置。
/// 同时通过 [NotificationListener] 监听 [UserScrollNotification],
/// 当 [ScrollDirection] 发生变化或停止时,会触发通知。
/// {@endtemplate}
///
/// 相关内容:
///
///  * [AxisDirection]:方向性更强的枚举(值是 left/right/up/down)
///  * [GrowthDirection]:表示 Sliver 内容的增长顺序
///  * [UserScrollNotification]:当 [ScrollDirection] 变化时会发通知
enum ScrollDirection {
  /// 没有滚动(静止状态)
  idle,

  /// 向"负滚动偏移"方向滚动。
  ///
  /// 举例:对于一个垂直方向向下 [AxisDirection.down]、
  /// 且 [GrowthDirection.forward] 的列表(Flutter 默认情况),
  /// 这个方向意味着内容向下移动,显示出**更早的内容**(靠近 0 位置)。
  ///
  /// 可以记成:forward(前进)是"朝向"零位置。
  forward,

  /// 向"正滚动偏移"方向滚动。
  ///
  /// 举例:同样对于一个垂直方向向下 [AxisDirection.down]、
  /// 且 [GrowthDirection.forward] 的列表,
  /// 这个方向意味着内容向上移动,显示出**更晚的内容**(离 0 位置更远)。
  ///
  /// 可以记成:reverse(后退)是"远离"零位置。
  reverse,
}

原理解释

ScrollDirection 是一个非常小但核心的枚举,作用是抽象化"滚动的方向":

  • 它不是简单的 up/down 或 left/right,而是基于"滚动偏移轴"的正负方向来判断。

  • 依赖的两个关键概念

    • AxisDirection:轴的物理方向(上/下/左/右)
    • GrowthDirection:内容在这个轴上排列的增长方向(forward/backward)
  • Flutter 的滚动体系中,实际滚动时偏移量是关键指标。

    • 偏移量增大 → ScrollDirection.reverse
    • 偏移量减小 → ScrollDirection.forward
    • 偏移量不变 → ScrollDirection.idle
  • 它是逻辑方向,不是物理方向

    物理上可能是"向上滑手指",但逻辑上却可能是 forward 或 reverse,这取决于 AxisDirection 和 GrowthDirection 的组合。

相关推荐
FreeBuf_11 分钟前
加密货币武器化:恶意npm包利用以太坊智能合约实现隐蔽通信
前端·npm·智能合约
java水泥工38 分钟前
基于Echarts+HTML5可视化数据大屏展示-图书馆大屏看板
前端·echarts·html5
半夏陌离41 分钟前
SQL 实战指南:电商订单数据分析(订单 / 用户 / 商品表关联 + 统计需求)
java·大数据·前端
子兮曰43 分钟前
🚀Vue3异步组件:90%开发者不知道的性能陷阱与2025最佳实践
前端·vue.js·vite
牛十二1 小时前
mac-intel操作系统go-stock项目(股票分析工具)安装与配置指南
开发语言·前端·javascript
whysqwhw1 小时前
Kuikly 扩展原生 API 的完整流程
前端
whysqwhw1 小时前
Hippy 跨平台框架扩展原生自定义组件
前端
OEC小胖胖1 小时前
页面间的导航:`<Link>` 组件和 `useRouter`
前端·前端框架·web·next.js
faimi2 小时前
🚀程序员必收藏!最全Git命令手册:解决90%团队协作难题
前端·gitlab
coooliang2 小时前
【鸿蒙 NEXT】V1迁移V2状态管理
java·前端·harmonyos