如何在 initState 中使用 Riverpod 提供程序

Question

我在我的 web 应用程序中使用 Riverpod 作为 state 管理。 我正在尝试构建一个自动滚动到 ListView 的某些部分的 AppBar。

为此，我创建了一个 ScrollController 作为提供者。

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.

我读过我应该使用 StatefulWidget。 但是，使用 ConsumerStatefulWidget 我无法使用 Riverpod 创建 ScrollController，因为我需要在initState()中启动它并且我无法从它访问提供程序。 有可能将这两个元素放在一起吗？

Answer 1

class MyClass extends ConsumerStatefulWidget {
  const MyClass({Key? key}) : super(key: key);

  @override
  ConsumerState<MyClass> createState() => _MyClassState();
}

class _MyClassState extends ConsumerState<MyClass> {
  
  late ScrollController _scrollController;
  
  @override
    void initState() {
      super.initState();
      _scrollController = ScrollController();
    }
  
  @override
  Widget build(BuildContext context) {
    final status = ref.watch(someProvider);
    return ListView(
      controller: _scrollController,
    );
  }
}

Answer 2

您可以访问位于ConsumerStatefulWidget中的任何 function 中的ref 。 所以，你可以简单地在initState() function 中调用你的提供者，它应该表现正常

...
  class _MyClassState extends ConsumerState<MyClass> {

  late ScrollController _scrollController;
  
  @override
    void initState() {
      super.initState();
      _scrollController = ref.watch(scrollControllerProvider); // Doesn't throw error
    }
...