Home

深色模式

Flutter ScrollPhysics 介绍 ​

Flutter中各种滚动物理效果的详细说明。

主要类型 ​

BouncingScrollPhysics ​

  • 特点: iOS风格的弹性滚动
  • 效果:
    • 滚动到边界时可以继续拖拽
    • 松手后会弹性回弹到边界位置
    • 有阻尼效果，越拖越难拖动
  • 使用场景: iOS风格的用户体验

ClampingScrollPhysics ​

  • 特点: Android风格的固定滚动
  • 效果:
    • 滚动到边界时立即停止，无法继续拖拽
    • 边界处有发光效果（glow effect）
    • 滚动感觉更"硬"
  • 使用场景: Android原生体验，默认的滚动行为

AlwaysScrollableScrollPhysics ​

  • 特点: 强制可滚动
  • 效果:
    • 即使内容不足以填满容器也可以滚动
    • 通常与其他physics组合使用
  • 使用场景: 下拉刷新，或需要强制滚动能力

NeverScrollableScrollPhysics ​

  • 特点: 完全禁用滚动
  • 效果:
    • 无法通过手势滚动
    • 可以通过代码控制滚动
  • 使用场景: 嵌套滚动中的内层，或禁用用户滚动

FixedExtentScrollPhysics ​

  • 特点: 固定间距滚动
  • 效果:
    • 滚动会自动对齐到固定位置
    • 类似分页效果
  • 使用场景: 列表项需要对齐，picker选择器

PageScrollPhysics ​

  • 特点: 分页滚动
  • 效果:
    • 每次滚动一页
    • 自动对齐到页面边界
  • 使用场景: PageView，轮播图

RangeMaintainingScrollPhysics ​

  • 特点: 保持滚动范围
  • 效果:
    • 当内容变化时尽量保持当前滚动位置
  • 使用场景: 动态内容列表

组合使用 ​

通过parent参数组合多种physics：

dart
// 弹性 + 强制可滚动
BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics())

// 固定 + 强制可滚动  
ClampingScrollPhysics(parent: AlwaysScrollableScrollPhysics())

平台默认行为 ​

dart
// iOS默认
physics: const BouncingScrollPhysics()

// Android默认
physics: const ClampingScrollPhysics()

// 跨平台自适应
physics: const ScrollPhysics() // 会根据平台自动选择

实际应用示例 ​

NestedScrollView组合 ​

dart
NestedScrollView(
  physics: const BouncingScrollPhysics(), // 整体弹性滚动
  body: SingleChildScrollView(
    physics: const NeverScrollableScrollPhysics(), // 内容不独立滚动
  )
)

效果 ​

  • ✅ 外层有iOS风格的弹性效果
  • ✅ 内层不会产生滚动冲突
  • ✅ 统一的滚动体验