【outdated】Flutter状态管理(一)：使用Provider并复用你的Redux思想

Copycopy code to clipboard
1import 'package:flutter/foundation.dart';
2import 'package:flutter/material.dart';
3import 'package:provider/provider.dart';
4
5class Counter with ChangeNotifier, DiagnosticableTreeMixin {
6  int _count = 0;
7  int get count => _count;
8
9  void increment() {
10    _count++;
11    notifyListeners();
12  }
13
14  void decrement() {
15    _count--;
16    notifyListeners();
17  }
18
19  @override
20  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
21    super.debugFillProperties(properties);
22    properties.add(IntProperty('count', count));
23  }
24}

Copycopy code to clipboard
1void main() {
2  runApp(MultiProvider(
3    providers: [
4      ChangeNotifierProvider(create: (_) => Counter()),
5    ],
6    child: StateManagementDemo(),
7  ));
8}
9
10class StateManagementDemo extends StatelessWidget {
11  const StateManagementDemo({Key key}) : super(key: key);
12
13  @override
14  Widget build(BuildContext context) {
15    return MaterialApp(
16      title: "Flutter 状态管理",
17      home: HomePage(),
18    );
19  }
20}

Copycopy code to clipboard
1Provider<Something>(
2  create: (_) => Something()，
3  child: Provider<SomethingElse>(
4    create: (_) => SomethingElse()，
5    child: Provider<AnotherThing>(
6      create: (_) => AnotherThing()，
7      child: someWidget，
8    )，
9  )，
10)，

Copycopy code to clipboard
1class HomePage extends StatelessWidget {
2  const HomePage({Key key}) : super(key: key);
3
4
5  Widget _text(BuildContext context, String text) {
6    return Text(text,
7        style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500));
8    }
9  @override
10  Widget build(BuildContext context) {
11    print("build");
12    return Center(
13        child: Scaffold(
14            appBar: AppBar(
15              title: const Text('Provider Example'),
16            ),
17            body: Center(
18              child: Column(
19                mainAxisAlignment: MainAxisAlignment.center,
20                children: <Widget>[
21                  Text(
22                    "Counter Cousumer",
23                    style: Theme.of(context).textTheme.headline5,
24                  ),
25                  Consumer<Counter>(
26                    builder: (ctx, counter, child) {
27                      return Column(
28                        children: <Widget>[
29                          const Count(),
30                          _text(context, "Consumer: ${counter.count}"),
31                        ],
32                      );
33                    },
34                  ),
35                  Padding(padding: EdgeInsets.only(top: 20)),
36                  Text(
37                    "Transformed Counter Cousumer",
38                    style: Theme.of(context).textTheme.headline6,
39                  ),
40                  Consumer<Transform>(
41                    builder: (ctx, transform, child) {
42                      return Column(
43                        children: <Widget>[
44                          _text(context,
45                              "read: ${context.read<Transform>().transformed}"),
46                          _text(context, 'Consumer: ${transform.transformed}'),
47                        ],
48                      );
49                    },
50                  ),
51                ],
52              ),
53            ),
54            floatingActionButton: // ...
55            ));
56  }
57}

Copycopy code to clipboard
1Consumer<Counter>(
2  builder: (ctx, counter, child) {
3    return Column(
4      children: <Widget>[
5        const Count(),
6        _text(context, "Consumer: ${counter.count}"),
7        ],
8      );
9    },
10  ),

Copycopy code to clipboard
1floatingActionButton: Consumer<Counter>(
2      child: Icon(Icons.add),
3      builder: (ctx, counter, child) {
4        return FloatingActionButton(
5          child: child,
6          onPressed: () {
7            counter.increment();
8          });
9        })

Copycopy code to clipboard
1// 1. 将Count抽离成单独的组件, 使用context.watch()来获取状态树, 并确保在Counter变化时rebuild HomePage组件, 这种将Consumer抽离成组件的方式能够起到优化性能的作用, 但不是必须的, 并且很少需要这么点性能提升.
2class Count extends StatelessWidget {
3  const Count({Key key}) : super(key: key);
4
5  @override
6  Widget build(BuildContext context) {
7    return _text(context,
8        'Extract Count to a separate widget & [context.watch]: ${context.watch<Counter>().count}');
9  }
10}
11
12// 2. 由于Provider基于InheritedWidget, 因此我们可以使用Provider.of, 但是实际上还是推荐Consumer, 因为毕竟自带性能优化(会确保尽可能少的rebuild)
13   _text(context,'Provider.of<counter>(ctx): ${Provider.of<Counter>(ctx).count}')

Copycopy code to clipboard
1void main() {
2  runApp(MultiProvider(
3    providers: [
4      ChangeNotifierProvider(
5        create: (_) => Counter(),
6        lazy: true,
7      ),
8      ProxyProvider<Counter, Transform>(
9          update: (_, counter, __) => Transform(counter.count))
10    ],
11    child: ProviderDemo(),
12  ));
13}
14
15class Transform {
16  final int _value;
17
18  const Transform(this._value);
19
20  String get transformed => "U clicked $_value times";
21}
22
23// build
24Text(
25  "Transformed Counter Cousumer",
26   style: Theme.of(context).textTheme.headline6,
27  ),
28  Consumer<Transform>(
29    builder: (ctx, transform, child) {
30      return Column(
31        children: <Widget>[
32           _text(context,
33           "read: ${context.read<Transform>().transformed}"),
34            _text(context, 'Consumer: ${transform.transformed}'),
35          ],
36        );
37     },
38   ),