Flutter 第三课---状态管理之Provider

Anguers
332 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

Flutter系列文章列表

  1. 2022年了，你还不会flutter!!!
  2. Flutter 第一课---flutter特点及组件开发
  3. Flutter 第二课---组件生命周期和App生命周期

什么是状态管理

状态管理是一个十分广泛的概念，因为状态无处不在。从广义角度讲状态管理就是页面跟代码、跟服务器进行数据同步。例如：你在某购物应用内，添加了一件商品，你需要在购物车页面进行展示。这就是一种状态。相反的，你在商品页面点击了添加到购物车，却在购物车页面没有发现或者过段时间它才展示了，这就是状态管理没有做好。这就是我所理解的状态管理。

官方给出的解释：状态管理就是当某个状态发生改变的时候，告知使用该状态的状态监听者，让状态所监听的属性随之改变,从而达到联动效果。

285926BF8952EA59602A0910EE34BBCF.jpg

常见的状态管理框架有哪些

Provider

Provider是官方文档的例子用的方法，Google 比较推荐的用法，也是今天的主角。Provider的实现在内部还是利用了InheritedWidget，它就是用于提供数据，可以很方便的管理状态。

Redux

Redux是一种单向数据流架构，可以轻松开发，维护和测试应用程序，也是google推荐的状态管理方式。所有的状态都存储在Store里，View拿到Store的状态数据会映射成视图渲染。Redux不直接让view操作数据，通过dispatch一个action通知Reducer，状态变更（类似于vue中的vuex）。

GetX

GetX包含很多功能，各种弹出widget、路由管理、国际化、Utils、状态管理等所以我觉得它不单单是一个状态管理器，更像是一个框架（类似于vue cli）。关于GetX的争论也很多，今天我们不讨论。我的建议是，对于像我一样的小白，还是从Provider开始，打好基础再说。

Provider 使用

添加依赖

  1. 使用命令行方式
flutter pub add provider
  1. pubspec.yaml 添加这样一行（并运行隐式flutter pub get）：
dependencies:
provider: ^6.0.4

导入应用

import 'package:provider/provider.dart';

定义需要共享的数据

class ProviderData with ChangeNotifier {

  int count = 0;

  void increment() {
    count++;
    notifyListeners();
  }
}

在应用程序入口初始化

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import './provider/index.dart';
import './page/HomePage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => CountNotifier(),
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
         home: const Scaffold(
            body: HomePage(),
          ),
      ),
    );
  }
}

使用共享数据

import 'package:flutter/material.dart';
import 'package:flutter_provider_example/provider_count_example/count_notifier.dart';
import './provider/provider.dart';

class ProviderExample extends StatefulWidget {
  const ProviderExample({Key? key}) : super(key: key);

  @override
  State<ProviderExample> createState() => _ProviderExampleState();
}

class _ProviderExampleState extends State<ProviderExample> {

  final counter = Provider.of<ProviderData>(context);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("InheritedWidget"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          counter.increment();
        },
        child: const Icon(Icons.add),
      ),
      body: Center(
        child: Text(counter.count.toString(),
          style: const TextStyle(
              color: Colors.red,
              fontSize: 50
          ),
        ),
      ),
    );
  }
}

状态管理的好处

  1. 能有效分离 UI 层和数据处理层
  2. 帮助前端应用结构化数据
  3. 有效控制状态的变化
  4. 处理同步与异步
  5. 实现一些日志打印，热加，同构应用等功能
  6. ...

结束语

关于flutter状态管理的学习到这里就结束了，下期我们来说说fluuter路由管理。如果你刚好正在学习flutter，可以关注我，请相信会给你不一样的收获。如果你是flutter大佬，欢迎指导！

avatar
文章
阅读
粉丝