Flutter模块 - provider

,

Provider 模块

添加依赖

1
2
dependencies:
	provider: ^4.3.2+4

MultiProvider

对多个 Provider 整理

name description
Provider 最基础的 provider 组成，接收一个值并暴露它， 无论值是什么。
ListenableProvider 供可监听对象使用的特殊 provider，ListenableProvider 会监听对象，并在监听器被调用时更新依赖此对象的 widgets。
ChangeNotifierProvider 为 ChangeNotifier 提供的 ListenableProvider 规范，会在需要时自动调用ChangeNotifier.dispose。
ValueListenableProvider 监听 ValueListenable，并且只暴露出ValueListenable.value。
StreamProvider 监听流，并暴露出当前的最新值。
FutureProvider 接收一个Future，并在其进入 complete 状态时更新依赖它的组件。

Provider

最基础的 provider 组成，接收一个值并暴露它， 无论值是什么。但是不是会 ui 上刷新

生成 model

1
2
3
4
5
6
7
8
9
10
class CountModel {
  // 全局状态
  int count = 0;
  // 状态指定方法
  add() {
    this.count++;
    print(this.count);
  }
}

main.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import 'package:FlutterProvider/model/CountModel.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

main() {
  runApp(
    // 使用Provider管理
    Provider<CountModel>(
      create: (_) {
        return CountModel(0);
      },
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Provider",
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 获取Provider管理的model
    CountModel count = Provider.of<CountModel>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Provider"),
      ),
      body: Center(
        child: Text("当前的值：${count.count.toString()}"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 调用model中的方法，会在control中输出，但是不会在ui上更新
          count.add();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

ChangeNotifierProvider(常用)

为 ChangeNotifier 提供的 ListenableProvider 规范，会在需要时自动调用ChangeNotifier.dispose。

CountModel.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import 'package:flutter/foundation.dart';

class CountModel with ChangeNotifier {
  // 全局状态
  int count;
  // 初始构造函数
  CountModel(this.count);
  // 状态指定方法
  add() {
    this.count++;
    print(this.count);
    // 通知所有ui刷新
    notifyListeners();
  }
}

MultiProvide

当在大型应用中注入较多状态时， Provider 很容易变得高度耦合

嵌套写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
main() {
  runApp(
    // 使用Provider管理
    ChangeNotifierProvider<FristModel>(
      create: (BuildContext context) {
        return FristModel("Rm");
      },
      child: ChangeNotifierProvider<CountModel>(
        create: (_) {
          return CountModel(0);
        },
        child: MyApp(),
      ),
    ),
  );
}

MultiProvider

1
2
3
4
5
6
7
8
9
main() {
  runApp(MultiProvider(
    providers: [
      ChangeNotifierProvider<CountModel>(create: (_) => CountModel(0)),
      ChangeNotifierProvider<FristModel>(create: (_) => FristModel("Rm")),
    ],
    child: MyApp(),
  ));
}