Flutter ListView释放鼠标/手指后自动回滚至顶部问题求助

问题根源 #

• FutureBuilder重复重建：如果future在build方法里每次都重新创建，会导致FutureBuilder频繁触发重建，ListView的滚动状态直接丢失，回到顶部
• Wrap的动态布局特性：Wrap会根据子组件大小自动调整自身尺寸，嵌套ListView时，滚动过程中可能触发Wrap重新布局，迫使ListView复位
• ListView无固定高度：父组件没有给ListView明确的高度约束，滚动时布局尺寸变化，引发滚动位置重置

可行解决方案 #

1. 固定Future实例，避免FutureBuilder重复重建 #

不要在build方法里直接创建future，而是在initState里初始化一次，确保FutureBuilder只在数据加载完成时更新：

late Future<List<int>> _futureData;

@override
void initState() {
  super.initState();
  // 只初始化一次future，避免每次build都重新发起请求/重建
  _futureData = Future.delayed(const Duration(seconds: 1), () => List.generate(200, (i) => i));
}

@override
Widget build(BuildContext context) {
  return FutureBuilder(
    future: _futureData,
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        return Wrap(
          children: [
            // 后续的ListView代码
          ],
        );
      }
      return const CircularProgressIndicator();
    },
  );
}

2. 给ListView绑定ScrollController，手动维护滚动位置 #

通过ScrollController保存滚动偏移，即使组件重建也能恢复位置：

final ScrollController _scrollController = ScrollController();

// 在ListView中绑定
ListView.builder(
  controller: _scrollController,
  itemCount: 200,
  itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
)

可以在dispose方法里销毁控制器，避免内存泄漏。

3. 给ListView设置固定高度 #

Wrap本身没有固定尺寸，给ListView套一层带固定高度的容器，避免布局动态变化：

Wrap(
  children: [
    SizedBox(
      // 比如取屏幕高度的80%，或固定数值
      height: MediaQuery.of(context).size.height * 0.8,
      child: ListView.builder(
        itemCount: 200,
        itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
      ),
    ),
  ],
)

4. 用AutomaticKeepAlive保持ListView状态 #

如果ListView是独立的StatefulWidget，混入AutomaticKeepAliveClientMixin，防止组件被销毁：

class FixedListView extends StatefulWidget {
  @override
  _FixedListViewState createState() => _FixedListViewState();
}

class _FixedListViewState extends State<FixedListView> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用这行
    return ListView.builder(
      itemCount: 200,
      itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
    );
  }
}

然后在Wrap里直接使用这个FixedListView即可。

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