flutter状态管理provider的基本使用

时间 2019-11-05

标签 flutter 状态管理 provider 基本使用繁體版

原文原文链接

flutter有许多状态管理插件,但provider是google官方推荐的,不要纠结了,跟着g爹走没错! 另外,用flutter开发的app听电影已经上线,欢迎你们下载体验:www.coolapk.com/apk/com.dcd…git

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

一.添加配置provider

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

provider: any
复制代码

2.新建store.dart文件app

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包裹在最外层less

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中能够这样获取仓库storeide

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

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

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的变化触发google

三.最后

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