Flutter 零基础入门（四十六）：高级列表与滚动优化 —— Sliver 与长列表性能实战

LarryLan

发布于 2026-03-30 18:04:49

高级列表与滚动优化 —— Sliver 与长列表性能实战

到目前为止，你已经掌握了：

多页面 App 架构与导航
列表刷新与分页
表单输入与校验
动画、主题与视觉元素

但是在实际项目中，列表数据量可能很大，如果处理不当会出现：

卡顿
滚动不流畅
内存占用过高

本篇我们将学习 Flutter 高级列表与滚动优化技巧。

一、ListView 性能优化

1️⃣ 构建长列表

ListView.builder(
  itemCount: ,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('条目 $index'),
    );
  },
)

📌 说明：

ListView.builder → 按需构建，性能比 ListView + children 高
长列表性能优化必用 builder

2️⃣ 使用 const / Key 优化

ListTile(
  key: ValueKey(index),
  title: Text('条目 $index'),
)

为列表元素添加 Key
避免滚动时 Widget 重建

3️⃣ 分页加载（懒加载）

ScrollController _controller = ScrollController();

_controller.addListener(() {
  if (_controller.position.pixels == _controller.position.maxScrollExtent) {
    // 到底部，加载更多数据
  }
});

📌 技巧：

使用 ScrollController 监听滚动位置
分页加载 → 避免一次性加载过多数据

二、Sliver 基础

Sliver 系列组件是 可滚动区域的可伸缩、可组合布局。

1️⃣ CustomScrollView + SliverList

CustomScrollView(
  slivers: [
    SliverAppBar(
      pinned: true,
      expandedHeight: 200,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Sliver 示例'),
        background: Image.asset(
          'assets/images/flutter_logo.png',
          fit: BoxFit.cover,
        ),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('条目 $index')),
        childCount: 50,
      ),
    ),
  ],
)

📌 功能解析：

SliverAppBar → 可伸缩 AppBar
SliverList → 高性能长列表
Sliver 与 CustomScrollView 结合，可做复杂滚动效果

2️⃣ SliverGrid 网格布局

SliverGrid(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisSpacing: 10,
    crossAxisSpacing: 10,
    childAspectRatio: 1,
  ),
  delegate: SliverChildBuilderDelegate(
    (context, index) => Container(
      color: Colors.blue[100 * ((index % ) + )],
      child: Center(child: Text('Item $index')),
    ),
    childCount: 20,
  ),
)

📌 功能：

高性能网格布局
可组合其他 Sliver 组件

三、滚动监听与滚动位置管理

ScrollController _scrollController = ScrollController();

_scrollController.addListener(() {
  print('当前滚动位置: ${_scrollController.position.pixels}');
});

四、常见滚动优化技巧

使用 ListView.builder / SliverChildBuilderDelegate → 按需构建
使用 const / Key 避免重复重建
分页加载 + 占位 / Loading → 避免一次性加载全部数据
避免在 itemBuilder 中做复杂计算 → 提前处理数据
使用缓存网络图片 → cached_network_image

五、完整示例：Sliver + 分页列表

class SliverListPage extends StatefulWidget {
  @override
  _SliverListPageState createState() => _SliverListPageState();
}

class _SliverListPageState extends State<SliverListPage> {
  final ScrollController _controller = ScrollController();
  List<int> _items = List.generate(20, (index) => index);

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      if (_controller.position.pixels == _controller.position.maxScrollExtent) {
        // 加载更多
        setState(() {
          _items.addAll(List.generate(, (index) => _items.length + index));
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        controller: _controller,
        slivers: [
          SliverAppBar(
            pinned: true,
            expandedHeight: 150,
            flexibleSpace: FlexibleSpaceBar(title: Text('Sliver分页列表')),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return ListTile(title: Text('条目 ${_items[index]}'));
              },
              childCount: _items.length,
            ),
          ),
        ],
      ),
    );
  }
}

📌 功能总结：