Flutter---Scrollable

概念

Scrollable是Flutter中处理滚动的抽象类

abstract class Scrollable extends StatefulWidget { final AxisDirection axisDirection; final ScrollController? controller; final ScrollPhysics? physics; final ViewportBuilder viewportBuilder; }

层次结构

Scrollable ├── Viewport │ ├── SliverList │ ├── SliverGrid │ └── SliverToBoxAdapter └── Scrollbar (可选)

基本使用

Scrollable( axisDirection: AxisDirection.down, //滚动方向 controller: ScrollController(), //控制滚动位置和行为 physics: BouncingScrollPhysics(), //定义滚动物理效果，iOS风格，滚动到边界时有回弹效果 viewportBuilder: (context, offset) { //视口构建器 return Viewport( offset: offset, slivers: [/* 你的Sliver列表 */], ); }, )

ScrollPhysics滚动物理效果

// 1. BouncingScrollPhysics - iOS风格弹性效果 physics: BouncingScrollPhysics() // 2. ClampingScrollPhysics - Android风格阻尼效果 physics: ClampingScrollPhysics() // 3. FixedExtentScrollPhysics - 固定高度滚动 physics: FixedExtentScrollPhysics() // 4. PageScrollPhysics - 页面滚动效果 physics: PageScrollPhysics() // 5. NeverScrollableScrollPhysics - 禁止滚动 physics: NeverScrollableScrollPhysics() // 6. AlwaysScrollableScrollPhysics - 始终可滚动 physics: AlwaysScrollableScrollPhysics() // 组合使用 physics: BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics())

Sliver家族

// 布局类 SliverList SliverGrid SliverFixedExtentList SliverAnimatedList // 装饰类 SliverPadding SliverAppBar SliverPersistentHeader SliverToBoxAdapter // 特殊类 SliverFillRemaining SliverFillViewport SliverOpacity SliverAnimatedOpacity

自定义Scrollbar

Scrollbar( controller: _controller, thumbVisibility: true, // 始终显示 trackVisibility: true, // 显示轨道 thickness: 8.0, // 宽度 radius: Radius.circular(4), // 圆角 interactive: true, // 可交互 notificationPredicate: (notification) { // 过滤通知 return notification.depth == 0; }, child: ListView.builder( controller: _controller, itemCount: 100, itemBuilder: (context, index) => Text('Item $index'), ), )