scope 如何成為 riverpod 的供應商？

Question

我開始使用riverpod ，我正在嘗試遷移使用provider的現有代碼。

使用provider ， Provider被限定在小部件樹中。 只有Provider小部件的子級才能訪問其 model。

它在riverpod的文檔中說：

允許在多個位置輕松訪問 state。 Providers 是 Singletons、Service Locators、Dependency Injection 或 InheritedWidgets 等模式的完全替代品。

* 這里的“ Provider”是指package riverpod的Provider riverpod 。

provider package 是圍繞InheritedWidget的簡化/包裝器/API，所以我想provider可以實現的功能riverpod也可以實現。

但我無法設法找出如何去做。

---

這是我嘗試遷移的一個小例子。

class Counter extends ValueNotifier<int> {
  Counter(): super(0);
}


class MyWidget extends StatelessWidget {
  const MyWidget();
  
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<Counter>(
      create: (_) => Counter();
      child: Builder(
        builder: (context) {
          return Row(
            children: [
              IconButton(
                onPressed: () {
                  context.read<Counter>().value++;
                }, 
                icon: Icon(Icons.add),
              ),
              Text('Count: ${context.watch<Counter>().value}'),
            ],
          );
        },
      ),
    );
  }
}

只要有MyWidget小部件，子小部件就可以訪問唯一/范圍 model Counter 。

Answer 1

范圍提供者是通過ProviderScope完成的

你可以做：

final provider = ChangeNotifierProvider<Counter>((ref) => throw UnimplementedError());


// in some widget:

return ProviderScope(
  overrides: [
    provider.overrideWithProvider(
      ChangeNotifierProvider((ref) => Counter());
    ),
  ],
)

盡管如果可以避免范圍界定，請這樣做。 通常不推薦范圍提供者，應該避免使用，因為這是相當高級的。

如果您使用范圍提供程序，以便在用戶離開頁面時銷毀 state，則更簡單的解決方案是使用autoDispose ：

final provider = ChangeNotifierProvider.autoDispose<Counter>((ref) => Counter());

// No longer needed to scope the provider

Answer 2

ProviderScope 內部是一個 InheritedWidget，因此您可以像 Provider 一樣使用多個 ProviderScope。 請在此票證鏈接中查看 Remi 的代碼。

或者您可以使用 .family 和 .autoDispose 來達到您的目的。