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}')
        ],
      ),
    );
  }
}

posted on 2020-03-01 00:20  完美前端  阅读(1498)  评论(0)    收藏  举报

导航