ListView内嵌Horizontal SingleChildScrollView滚动位置丢失问题咨询

问题根源在于ListView的item回收机制：当横向的SingleChildScrollView被滚出可视区域后，会被ListView销毁回收，再次滚动回顶部时组件会重新初始化，导致之前的滚动位置丢失。以下是几种可行的解决办法：

方法一：手动保存+恢复滚动位置（最可靠） #

通过ScrollController监听横向滚动的位置并保存，在组件重建时自动恢复：

1. 定义控制器并监听滚动偏移：

class _YourPageState extends State<YourPage> {
  final ScrollController _horizontalScrollController = ScrollController();
  double _savedScrollOffset = 0.0;

  @override
  void initState() {
    super.initState();
    // 监听横向滚动，实时保存偏移量
    _horizontalScrollController.addListener(() {
      setState(() {
        _savedScrollOffset = _horizontalScrollController.offset;
      });
    });
  }

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

2. 组件重建后恢复滚动位置：

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  // 确保组件渲染完成后再执行滚动恢复
  WidgetsBinding.instance.addPostFrameCallback((_) {
    if (_horizontalScrollController.hasClients) {
      _horizontalScrollController.jumpTo(_savedScrollOffset);
    }
  });
}

3. 将控制器绑定到SingleChildScrollView：

SingleChildScrollView(
  controller: _horizontalScrollController,
  scrollDirection: Axis.horizontal,
  physics: const ClampingScrollPhysics(),
  primary: false,
  child: Padding(
    padding: const EdgeInsets.only(bottom: 10),
    child: Row(
      children: [
        Container(height: 50, width: 200, color: Colors.red),
        Container(height: 50, width: 200, color: Colors.blue),
        Container(height: 50, width: 200, color: Colors.green),
        // 更多横向列表项
      ],
    ),
  ),
)

方法二：阻止ListView回收该item（简单但需注意性能） #

如果横向列表内容不多，可以让ListView保留该组件的状态：

方式A：使用AutomaticKeepAliveClientMixin #

让包含SingleChildScrollView的Widget混入该Mixin，告诉ListView不要回收它：

class HorizontalScrollItem extends StatefulWidget {
  const HorizontalScrollItem({super.key});

  @override
  State<HorizontalScrollItem> createState() => _HorizontalScrollItemState();
}

class _HorizontalScrollItemState extends State<HorizontalScrollItem> with AutomaticKeepAliveClientMixin {
  final ScrollController _controller = ScrollController();

  @override
  bool get wantKeepAlive => true; // 关键：返回true保持状态

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用super.build
    return SingleChildScrollView(
      controller: _controller,
      scrollDirection: Axis.horizontal,
      physics: const ClampingScrollPhysics(),
      primary: false,
      child: Padding(
        padding: const EdgeInsets.only(bottom: 10),
        child: Row(
          children: [
            // 你的横向列表项
          ],
        ),
      ),
    );
  }
}

之后在ListView中直接使用HorizontalScrollItem即可。

方式B：设置ListView的cacheExtent #

给ListView设置足够大的缓存范围，让横向组件始终处于缓存中：

ListView(
  cacheExtent: 1500, // 根据页面高度调整，确保横向组件不会被滚出缓存区
  children: [
    // 你的横向SingleChildScrollView
    Container(height: 1000),
  ],
)

注意：这种方式会增加内存占用，仅适合内容较少的页面。

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