flutter 官方推荐的状态管理库 provider 的使用
一、Flutter状态管理简介
Flutter 状态管理 通俗的讲:当我们想在多个页面(组件/Widget)之间共享状态(数据),或者一个页面(组件/Widget)中的多个子组件之间共享状态(数据),这个时候我们就可以用 Flutter 中的状态管理来管理统一的状态(数据),实现不同组件直接的传值和数据共享。 现在 Flutter 的状态管理方案很多,redux、bloc、state、provide、provider。目前我们推荐使用 provider,这个是官方提供的状态管理解决方案。相比其他状态管理库使用起来比较方便。
二、关于flutter provider库和flutter provide库
provider 是 Flutter 团队推出的状态管理模式。 官方地址为:https://pub.dev/packages/provider 注意:provider 和 provide 是两个库哦。Flutter 官方推荐使用的是 provider 哦,provider 是flutter 官方出的。provide 不是 Flutter 官方写的
三、flutter provider 的使用
1、配置依赖 provider: ^3.0.0+1 2、新建一个文件夹叫 provider,在 provider 文件夹里面放我们对于的状态管理类 3、在 provider 里面新建 Counter.dart 4、Counter.dart 里面新建一个类继承 minxins 的 ChangeNotifier 代码如下
状态管理类:Counter.dart
import 'package:flutter/material.dart'; class Providers with ChangeNotifier{ int _count = 6; var _age = 20; int get count => _count; int get age => _age; void increment() { _count++; notifyListeners(); } }
应用入口:main.dart
import 'package:flutter/material.dart'; import 'home.dart'; import 'package:provider/provider.dart'; import 'services/state.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MultiProvider( providers: [ ChangeNotifierProvider(create: (_) => Providers()), ], child: MaterialApp( title: 'Flutter Demo', home: HomePage() ), ); } }
使用Provider的页面示例
import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import '../services/state.dart'; class IndexPage extends StatefulWidget{ IndexPage({Key key}); _IndexPage createState() => _IndexPage(); } class _IndexPage extends State { @override Widget build(BuildContext context) { final states = Provider.of<Providers>(context); // TODO: implement build return Scaffold( appBar: AppBar(title: Text('index'),), body: ListView( children: <Widget>[ Text('${states.count}'), RaisedButton( child: Text('点'), onPressed: () { states.increment(); }, ), Text('${states.age}') ], ), ); } }