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

Question

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

这里是class构造函数正在监控

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: 'Whosebug 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，请查看 Riverpod package，作者与 Provider 相同。它更简单，样板更少：

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

1。创建您的 ChangeNotifierProvider

Provider 只是一个全局变量，存在于我们在 MyApp.

之上定义的 ProviderScope 中

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

2。消耗你的 ChangeNotifierProvider:

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

final counter = useProvider(counterProvider);

3。增加你的 ChangeNotifier Counter

这就像从当前 BuildContext 读取 Provider 并调用方法 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: 'Whosebug 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();
  }
}