如何用useScrollController()管理多ScrollView并避免偏移量重置？

首先得先澄清Flutter官方文档那句话的核心含义：

Scroll控制器通常作为State对象的成员变量存储，并在每次State.build中复用。单个滚动控制器可用于控制多个可滚动组件，但某些操作（如读取滚动偏移量）要求控制器仅与单个可滚动组件配合使用。

这里的限制是针对同时活跃在Widget树上的可滚动组件——如果你的两个ListView分别在不同页面，不会同时挂载，理论上可以共用控制器，但你遇到的偏移重置问题，根源是：切换页面时，前一个页面的ListView会被从Widget树移除并dispose，此时ScrollController会失去关联的滚动组件，内部偏移值会被重置为0；当你返回原页面时，ListView重新挂载并关联控制器，自然会回到顶部。

下面给你几个可行的解决方案，按推荐程度排序：

方案1：每个页面用独立ScrollController + 保存偏移量（最稳妥） #

这是最符合官方建议的方式，能避免共用控制器带来的状态冲突，逻辑也最清晰：

1. 在父组件或全局状态中，为每个页面单独保存滚动偏移量（可以用Provider、Riverpod，或者简单的父组件State）
2. 每个页面创建自己的ScrollController，初始化时传入对应的保存偏移量
3. 给控制器添加监听，实时更新保存的偏移值

示例代码：

class ParentPage extends StatefulWidget {
  @override
  State<ParentPage> createState() => _ParentPageState();
}

class _ParentPageState extends State<ParentPage> {
  double _page1Offset = 0.0;
  double _page2Offset = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Parent Page')),
      body: Page1(
        initialOffset: _page1Offset,
        onOffsetChange: (offset) => setState(() => _page1Offset = offset),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.navigate_next),
        onPressed: () => Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => Page2(
              initialOffset: _page2Offset,
              onOffsetChange: (offset) => setState(() => _page2Offset = offset),
            ),
          ),
        ),
      ),
    );
  }
}

class Page1 extends StatefulWidget {
  final double initialOffset;
  final Function(double) onOffsetChange;

  const Page1({required this.initialOffset, required this.onOffsetChange});

  @override
  State<Page1> createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  late final ScrollController _controller;

  @override
  void initState() {
    super.initState();
    _controller = ScrollController(initialScrollOffset: widget.initialOffset);
    _controller.addListener(() {
      widget.onOffsetChange(_controller.offset);
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: _controller,
      itemCount: 50,
      itemBuilder: (context, index) => ListTile(title: Text('Page 1 Item $index')),
    );
  }
}

// Page2的代码和Page1完全一致，替换对应的变量即可

方案2：强行共用ScrollController，手动管理偏移的保存与恢复 #

如果你坚持要用同一个控制器，需要在页面切换前后手动保存和恢复偏移：

1. 在父组件中持有一个全局的ScrollController和保存偏移的变量
2. 跳转页面时，先保存当前控制器的偏移
3. 在新页面的initState中，用addPostFrameCallback将控制器跳转到保存的偏移
4. 从新页面返回时，同样恢复原页面的偏移

示例代码：

class ParentPage extends StatefulWidget {
  @override
  State<ParentPage> createState() => _ParentPageState();
}

class _ParentPageState extends State<ParentPage> {
  final _sharedController = ScrollController();
  double _savedOffset = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Shared Controller Demo')),
      body: ListView.builder(
        controller: _sharedController,
        itemCount: 50,
        itemBuilder: (context, index) => ListTile(title: Text('Page 1 Item $index')),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.navigate_next),
        onPressed: () {
          // 跳转前保存当前偏移
          _savedOffset = _sharedController.offset;
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => Page2(controller: _sharedController, savedOffset: _savedOffset),
            ),
          ).then((_) {
            // 返回后恢复页面1的偏移
            WidgetsBinding.instance.addPostFrameCallback((_) {
              _sharedController.jumpTo(_savedOffset);
            });
          });
        },
      ),
    );
  }
}

class Page2 extends StatefulWidget {
  final ScrollController controller;
  final double savedOffset;

  const Page2({required this.controller, required this.savedOffset});

  @override
  State<Page2> createState() => _Page2State();
}

class _Page2State extends State<Page2> {
  @override
  void initState() {
    super.initState();
    // 页面挂载后，跳转到保存的偏移
    WidgetsBinding.instance.addPostFrameCallback((_) {
      widget.controller.jumpTo(widget.savedOffset);
      // 监听页面2的滚动，更新保存的偏移（返回时用）
      widget.controller.addListener(() {
        (context.findAncestorStateOfType<_ParentPageState>())?._savedOffset = widget.controller.offset;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page 2')),
      body: ListView.builder(
        controller: widget.controller,
        itemCount: 50,
        itemBuilder: (context, index) => ListTile(title: Text('Page 2 Item $index')),
      ),
    );
  }
}

方案3：用flutter_hooks简化状态管理 #

如果你想用flutter_hooks，可以用useState保存偏移量，用useScrollController创建控制器，自动处理监听的添加和移除，大幅减少样板代码：

class ParentPage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final page1Offset = useState(0.0);
    final page2Offset = useState(0.0);

    return Scaffold(
      appBar: AppBar(title: const Text('Hooks Demo')),
      body: Page1(offsetState: page1Offset),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.navigate_next),
        onPressed: () => Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => Page2(offsetState: page2Offset)),
        ),
      ),
    );
  }
}

class Page1 extends HookWidget {
  final State<double> offsetState;

  const Page1({required this.offsetState});

  @override
  Widget build(BuildContext context) {
    final controller = useScrollController(initialScrollOffset: offsetState.value);

    // 自动添加/移除监听
    useEffect(() {
      void listener() => offsetState.value = controller.offset;
      controller.addListener(listener);
      return () => controller.removeListener(listener);
    }, [controller]);

    return ListView.builder(
      controller: controller,
      itemCount: 50,
      itemBuilder: (context, index) => ListTile(title: Text('Page 1 Item $index')),
    );
  }
}

// Page2的代码和Page1一致，替换offsetState即可

总结 #

• 官方文档的限制是针对同时活跃的多个可滚动组件，不同页面的组件不同时活跃，理论上可以共用控制器，但需要手动处理偏移重置问题
• 最推荐的是方案1，每个页面用独立控制器+保存偏移，逻辑清晰，避免潜在的状态冲突
• 如果你用flutter_hooks，方案3能大幅简化代码，减少样板代码

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