flutter状态管理provider的基本使用

flutter有许多状态管理插件,但provider是google官方推荐的,不要纠结了,跟着google走没错! 另外,用flutter开发的app听电影已经上线,欢迎大家下载体验:dcdcdog.com

文章主要一点是想说下Selector的用法,因为发现没人说过!

一.添加配置provider

1.在pubspec.yaml中添加provider依赖,然后执行flutter packages get

provider: any

2.新建store.dart文件

import 'package:flutter/material.dart';

class Store with ChangeNotifier {
  var _conut1 = 0, _conut2 = 0;

  get conut1 => _conut1;
  set conut1(val) {
    _conut1 = val;
    notifyListeners();
  }

  get conut2 => _conut2;
  set conut2(val) {
    _conut2 = val;
    notifyListeners();
  }
}

3.修改main.dart,用ChangeNotifierProvider包裹在最外层

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      builder: (_) => Store(),
      child: MaterialApp(
        title: 'tdy-step',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Home(),
      ),
    );
  }
}

二.在页面使用全局数据

1.新建provider-test.dart文件,在initstate中可以这样获取仓库store

@override
  void initState() {
    super.initState();
    store = Provider.of<Store>(context, listen: false);
  }

2.在页面中使用Selector获取全局数据

Column(
              children: <Widget>[
                Selector<Store, dynamic>(
                    selector: (_, store) => store.count1,
                    builder: (_, data, __) => Text(data.toString())),
                SizedBox(
                  height: 100,
                ),
                RaisedButton(
                  child: Text('count1++'),
                  onPressed: () {
                    store.count1 = ++store.count1;
                  },
                )
              ],
            )

Selector重绘范围比customer控制的更精细,它指定重绘只能有count1的变化触发

三.最后

demo代码地址:github.com/saviourdog/…