Flutter之状态管理

Flutter的状态管理有：
1、State：Flutter自带的，开发耦合度高，不推荐
2、fish_redux：阿里开源的，中型和大型应用，实力有保证
3、provide：Google官方的，但是很久没更新了，官方推荐了provider
4、provider：InheritedWidget的封装，Google推荐，目前更新活跃。
我们选择provider开发我们的应用：

provider

Provider 是用于提供数据，无论是在单个页面还是在整个 app 都有它自己的解决方案，我们可以很方便的管理状态。
下面将演示provider最新版4.1.2(2020年5月15日)
4.x 跟3.x有所不同，具体可https://github.com/rrousselGit/provider
目前网上大多数是3.x 及其以下的教程

注意

provider 4.x 在 Flutter v1.12.13+hotfix.9 稳定版(2020年5月15日)上是不支持的；
刚好在2020年5月6日出了Flutter 1.17.0 稳定版，是支持 provider 4.x 的，而现在的最新稳定版是 Flutter 1.17.1(2020年5月15日)；下面我将使用最新稳定版来开发。

环境

Flutter 1.17.1 + provider 4.1.2(2020年5月15日最新版)

一、引入依赖

pubspec.yaml

dependencies:
  provider: ^4.1.2

二、创建状态管理

创建 bli/provider/current_index_page.dart
current_index_page.dart 内容如下：

import 'package:flutter/material.dart';

/// 当前索引页
class CurrentIndexPage with ChangeNotifier {
  int currentIndexPage = 0;

  void changeIndexPage(int newIdex) {
    currentIndexPage = newIdex;
    notifyListeners(); // 通知所有的监听器
  }
}

三、调用

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import './provider/current_index_page.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        // 引入
        ChangeNotifierProvider(create: (_) => CurrentIndexPage()),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  int _index; // 过渡值

  @override
  Widget build(BuildContext context) {
    // 初始化过渡值 _index=0
    _index = context.watch<CurrentIndexPage>().currentIndexPage;
    return new MaterialApp(
      title: 'Demo', // 设置 App 的标题
      theme: new ThemeData(primaryColor: Colors.blue), // 设置主题颜色

      home: new Scaffold(
        body: new Center(
            child: new MaterialButton(
          color: Colors.blue,
          textColor: Colors.white,
          child: new Text(
              '点我 ${context.watch<CurrentIndexPage>().currentIndexPage}'), //订阅 取值
          onPressed: () {
            ++_index;
            // 传递对象  →→→→ 调用状态管理修改 当前索引页的值 currentIndexPage=_index
            context.read<CurrentIndexPage>().changeIndexPage(_index);
          },
        )),
      ),
    );
  }
}

运行效果

GIF.gif

最后编辑于：2020.05.15 22:54:53