如何在initState中使用Riverpod Provider？滚动控制器异常解决

问题场景 #

在Web应用中使用Riverpod做状态管理，想要实现一个能触发ListView自动滚动到指定位置的AppBar。最初的实现是创建一个存储ScrollController的StateProvider：

final scrollControllerProvider = StateProvider<ScrollController?>((ref) => ScrollController());

然后在AppBar的操作中调用控制器的animateTo方法：

ref.read(scrollControllerProvider)!.animateTo(
  0,
  duration: const Duration(milliseconds: 500),
  curve: Curves.easeInOut,
);

滚动功能可以正常工作，但会抛出异常：

The provided ScrollController is currently attached to more than one ScrollPosition.

异常原因 #

StateProvider创建的ScrollController是作用域内共享的实例，当多个可滚动组件（如多个ListView）复用该Provider，或者组件重建时重复绑定控制器，就会导致同一个ScrollController被关联到多个ScrollPosition，触发上述异常。而ScrollController的设计初衷是和单个可滚动组件一一绑定。

解决方案：结合ConsumerStatefulWidget与指令式Provider #

不需要把ScrollController放到Provider中，而是让Widget的State持有控制器，通过Riverpod传递滚动指令来实现跨组件通信，具体步骤如下：

1. 创建滚动指令Provider #

定义一个用于传递滚动目标位置的NotifierProvider，用来触发滚动操作：

final scrollCommandProvider = NotifierProvider<ScrollCommandNotifier, double?>(ScrollCommandNotifier.new);

class ScrollCommandNotifier extends Notifier<double?> {
  @override
  double? build() => null;

  // 发送滚动指令，传入目标位置
  void scrollTo(double position) {
    state = position;
    // 触发后重置状态，避免重复执行
    Future.microtask(() => state = null);
  }
}

2. 使用ConsumerStatefulWidget管理ScrollController #

在State类中初始化并持有ScrollController，同时监听滚动指令Provider，收到指令时执行滚动：

class ScrollablePage extends ConsumerStatefulWidget {
  const ScrollablePage({super.key});

  @override
  ConsumerState<ScrollablePage> createState() => _ScrollablePageState();
}

class _ScrollablePageState extends ConsumerState<ScrollablePage> {
  late final ScrollController _scrollController;

  @override
  void initState() {
    super.initState();
    // 在initState中初始化控制器，确保生命周期和Widget绑定
    _scrollController = ScrollController();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 监听滚动指令，收到指令时执行滚动
    ref.listen<double?>(scrollCommandProvider, (previous, targetPosition) {
      if (targetPosition != null) {
        _scrollController.animateTo(
          targetPosition,
          duration: const Duration(milliseconds: 500),
          curve: Curves.easeInOut,
        );
      }
    });
  }

  @override
  void dispose() {
    // 及时销毁控制器，避免内存泄漏
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: const Icon(Icons.arrow_upward),
            onPressed: () {
              // 发送滚动到顶部的指令
              ref.read(scrollCommandProvider.notifier).scrollTo(0);
            },
          ),
        ],
      ),
      body: ListView.builder(
        // 绑定控制器到当前ListView
        controller: _scrollController,
        itemCount: 100,
        itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
      ),
    );
  }
}

方案优势 #

• ScrollController由Widget的State持有，生命周期与Widget完全绑定，确保只关联到当前ListView，从根源避免多ScrollPosition异常。
• 通过Riverpod传递滚动指令，实现AppBar与ListView的跨组件通信，既保留了Riverpod的状态管理能力，又符合ScrollController的使用规范。

内容的提问来源于stack exchange，提问作者JAgüero