Flutter中如何在用户开始滚动时执行方法以优化列表性能？

核心思路 #

• 用状态变量控制组件的收缩/展开状态
• 通过ScrollController监听滚动行为，触发组件收缩
• 收缩状态下为ListView.builder设置固定itemExtent，利用预布局机制大幅提升滚动流畅度

实现步骤 #

1. 初始化状态与滚动控制器 #

在组件的State类中声明状态变量和滚动控制器：

bool _isCollapsed = false;
final ScrollController _scrollController = ScrollController();

2. 监听滚动触发收缩 #

在initState中添加滚动监听，当用户开始滚动时切换到收缩状态：

@override
void initState() {
  super.initState();
  _scrollController.addListener(() {
    // 只要滚动偏移量不为0，就触发收缩（可根据需求调整触发条件，比如仅向下滚动时触发）
    if (!_isCollapsed && _scrollController.offset != 0) {
      setState(() {
        _isCollapsed = true;
      });
    }
  });
}

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

3. 控制子组件的高度与内容 #

子组件根据收缩状态渲染不同内容，固定收缩后的高度：

Widget _buildListItem(BuildContext context, int index) {
  const collapsedHeight = 60.0;
  
  return AnimatedContainer(
    duration: const Duration(milliseconds: 200), // 添加过渡动画优化体验
    height: _isCollapsed ? collapsedHeight : null, // 未收缩时高度自适应
    child: _isCollapsed 
        ? _buildCollapsedItem(index) // 收缩后的简化内容
        : _buildExpandedItem(index), // 原可变高度内容
  );
}

// 收缩后的简化组件示例
Widget _buildCollapsedItem(int index) {
  return ListTile(
    title: Text('条目 $index'),
    dense: true,
  );
}

// 原可变高度组件示例
Widget _buildExpandedItem(int index) {
  return Container(
    padding: const EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('条目 $index', style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
        const SizedBox(height: 8),
        Text('可变高度的详细内容，长度不固定...' * (index % 3 + 1)),
      ],
    ),
  );
}

4. 配置ListView.builder #

根据收缩状态动态设置itemExtent：

@override
Widget build(BuildContext context) {
  const collapsedHeight = 60.0;
  
  return ListView.builder(
    controller: _scrollController,
    itemExtent: _isCollapsed ? collapsedHeight : null, // 收缩时启用固定高度
    itemCount: 50,
    itemBuilder: _buildListItem,
  );
}

可选优化 #

• 调整收缩触发条件：比如仅当向下滚动超过10px时再触发，避免轻微滑动误触
• 添加展开入口：比如顶部悬浮按钮，允许用户手动切换回展开状态
• 优化动画：用AnimatedSwitcher替代AnimatedContainer，实现内容切换的平滑过渡

内容的提问来源于stack exchange，提问作者FMorschel