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;
    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}'), //订阅 取值
          onPressed: () {
            ++_index;
            // 传递对象  →→→→ 调用状态管理修改 当前索引页的值 currentIndexPage=_index
            context.read().changeIndexPage(_index);
          },
        )),
      ),
    );
  }
}

运行效果

GIF.gif

你可能感兴趣的:(Flutter之状态管理)