Flutter/provider-使用构造函数初始化状态

Question

我试图了解提供程序在颤振中是如何工作的，但我仍然没有弄清楚如何使用状态的构造函数来初始化状态。有什么提示吗？

这里是构造函数监控的类

class Counter extends ChangeNotifier{
  int _count;
  
  Counter(int initValue){

  _count=initValue;
  }
  
  void increment() {
    ++_count;
    notifyListeners();
    
  }
}

Answer 1

首先，您可以将 ChangeNotifier 简化为：

class Counter extends ChangeNotifier {
  int count;

  Counter(this.count);

  void increment() {
    count++;
    notifyListeners();
  }
}

1.创建您的 ChangeNotifierProvider

现在，将您的 ChangeNotifierProvider 定义为：

ChangeNotifierProvider<Counter>(
  create: (context) => Counter(10),
  child: child,
),

您可以在此处提供 Counter 的初始值。

2.消耗你的ChangeNotifierProvider：

Consumer<Counter>(
  builder: (context, counter, child) => Text(counter.count.toString()),

3.增加您的 ChangeNotifier Counter

Provider.of<Counter>(context, listen: false).increment(),

在此，请记住指明您不想听取提供商的意见。

完整源代码

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider<Counter>(
      create: (context) => Counter(10),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'StackOverflow Answer',
      home: Scaffold(
        body: Center(
          child: Consumer<Counter>(
            builder: (context, counter, child) => Text(
              counter.count.toString(),
              style: TextStyle(fontSize: 96),
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () =>
              Provider.of<Counter>(context, listen: false).increment(),
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

class Counter extends ChangeNotifier {
  int count;

  Counter(this.count);

  void increment() {
    count++;
    notifyListeners();
  }
}

---

Riverpod

注意：如果您正在学习 Provider，请查看与 Provider 相同作者的 Riverpod package。它更简单，更少的样板：

这是使用 Hooks Riverpod 的相同示例。

1.创建您的 ChangeNotifierProvider

Provider 只是一个全局变量，它存在于我们在 ProviderScope 之上定义的 MyApp 中。

final counterProvider = ChangeNotifierProvider<Counter>((ref) => Counter(10));

2.消耗你的ChangeNotifierProvider：

使用 Hooks Riverpos，在构建方法的开头使用 useProvider 使用 Provider：

final counter = useProvider(counterProvider);

3.增加您的 ChangeNotifier Counter

这就像从当前 Provider 读取 BuildContext 并调用方法 increment 一样简单：

context.read(counterProvider).increment(),

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'StackOverflow Answer', home: HomePage());
  }
}

class HomePage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final counter = useProvider(counterProvider);
    return Scaffold(
      body: Center(
        child: Text(
          counter.count.toString(),
          style: TextStyle(fontSize: 96),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read(counterProvider).increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

final counterProvider = ChangeNotifierProvider<Counter>((ref) => Counter(10));

class Counter extends ChangeNotifier {
  int count;

  Counter(this.count);

  void increment() {
    count++;
    notifyListeners();
  }
}