如何在 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
    }
...