滚动组件

滚动组件提供了对可滚动内容的精细控制，包括滚动位置、滚动行为和嵌套滚动等。

提示：合理使用滚动组件可以创建流畅的用户体验和复杂的滚动效果。
📱 渲染效果预览
项目 0 - 当前位置: 0.0
项目 1 - 当前位置: 56.0
项目 2 - 当前位置: 112.0
项目 3 - 当前位置: 168.0
项目 4 - 当前位置: 224.0
项目 5 - 当前位置: 280.0
项目 6 - 当前位置: 336.0
📱 渲染效果预览
项目 0
项目 1
项目 2
项目 3
项目 4
项目 5
项目 6
项目 7
项目 8
项目 9

ScrollController

ScrollController 用于控制可滚动组件的滚动位置。

final _controller = ScrollController();

@override
void initState() {
  super.initState();
  _controller.addListener(() {
    print(_controller.offset);
  });
}

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

ListView(
  controller: _controller,
  children: [...],
)
📱 渲染效果预览
↓
BouncingScrollPhysics
(iOS 弹性)
↓
ClampingScrollPhysics
(Android 无弹性)

Scrollbar

Scrollbar 为可滚动组件添加滚动条指示器。

Scrollbar(
  child: ListView.builder(
    itemCount: 100,
    itemBuilder: (context, index) {
      return ListTile(title: Text('项目 $index'));
    },
  ),
)
📱 渲染效果预览
📢 开始滚动
✓ 滚动中...
🛑 结束滚动

ScrollPhysics

ScrollPhysics 控制滚动的物理行为，如弹性、阻尼等。

ListView(
  physics: BouncingScrollPhysics(), // iOS 风格弹性滚动
  children: [...],
)

ListView(
  physics: ClampingScrollPhysics(), // Android 风格无弹性滚动
  children: [...],
)
📱 渲染效果预览
📱 Flutter 教程
滚动查看更多内容
项目 0
项目 1
项目 2

ScrollNotification

ScrollNotification 用于监听滚动事件。

NotificationListener(
  onNotification: (notification) {
    if (notification is ScrollStartNotification) {
      print('开始滚动');
    } else if (notification is ScrollEndNotification) {
      print('结束滚动');
    }
    return false;
  },
  child: ListView(
    children: [...],
  ),
)
📱 渲染效果预览
项目 1
项目 2
项目 3
项目 4
项目 5

SliverAppBar

SliverAppBar 是一个可以与滚动内容交互的应用栏。

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 200,
      floating: false,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('标题'),
        background: Image.network('url', fit: BoxFit.cover),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('项目 $index')),
        childCount: 50,
      ),
    ),
  ],
)
📱 渲染效果预览
标题
项目 0
项目 1
项目 2
项目 3
项目 4

SliverList

SliverList 是一个可以用于 CustomScrollView 的列表组件。

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildListDelegate([
        ListTile(title: Text('项目 1')),
        ListTile(title: Text('项目 2')),
        ListTile(title: Text('项目 3')),
      ]),
    ),
  ],
)
📱 渲染效果预览
标题
项目 0
项目 1
项目 2
项目 3
项目 4

NestedScrollView

NestedScrollView 用于创建嵌套的滚动视图。

NestedScrollView(
  headerSliverBuilder: (context, innerBoxIsScrolled) {
    return [
      SliverAppBar(
        title: Text('标题'),
        pinned: true,
      ),
    ];
  },
  body: ListView.builder(
    itemCount: 100,
    itemBuilder: (context, index) {
      return ListTile(title: Text('项目 $index'));
    },
  ),
)
← 数据展示组件 性能优化组件 →