Flutter中多种状态管理方案

最新推荐文章于 2024-05-01 12:59:39 发布
最新推荐文章于 2024-05-01 12:59:39 发布
阅读量580 收藏 1
点赞数
文章标签： flutter javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59162559/article/details/132837539
版权

Flutter中有多种状态管理方案，用于管理应用程序中的状态和数据，以确保应用的可维护性和可扩展性。以下是一些常见的Flutter状态管理方法：

  1. setState： 这是Flutter中最基本的状态管理方法。在StatefulWidget中，可以使用setState方法来通知Flutter框架，界面需要被重新绘制，以反映状态的变化。这适用于简单的状态管理，但在大型应用中可能会导致代码冗长和难以维护。
  2. Provider： Provider是一个轻量级的状态管理解决方案，使用InheritedWidget来共享状态。它允许将状态注入到Widget树中的任何位置，并在状态变化时通知依赖项进行更新。Provider适用于中小型应用，以及需要在多个层级共享状态的情况。
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

class CounterModel extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MaterialApp(
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterModel = Provider.of<CounterModel>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Provider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Count:', style: TextStyle(fontSize: 24)),
            Text('${counterModel.count}', style: TextStyle(fontSize: 48)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counterModel.increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}
  1. BLoC（Business Logic Component）： BLoC是一种使用Streams管理状态和业务逻辑的模式。通过将界面层与业务逻辑层分开，BLoC模式使得代码更易于维护和测试。在Flutter中，可以使用bloc包来实现BLoC模式。
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

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

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (context) => CounterCubit(),
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterCubit = context.watch<CounterCubit>();

    return Scaffold(
      appBar: AppBar(
        title: Text('BLoC Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Count:', style: TextStyle(fontSize: 24)),
            Text('${counterCubit.state}', style: TextStyle(fontSize: 48)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counterCubit.increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}
  1. Redux： Redux是一个流行的状态管理模式，强调单一状态源和不可变的状态。在Flutter中，可以使用redux和flutter_redux等库来实现Redux模式。Redux适用于需要管理大量复杂状态的应用。
import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';

// Actions
enum Action { Increment }

// Reducer
int reducer(int state, dynamic action) {
  if (action == Action.Increment) {
    return state + 1;
  }
  return state;
}

void main() {
  final store = Store<int>(reducer, initialState: 0);

  runApp(MyApp(store: store));
}

class MyApp extends StatelessWidget {
  final Store<int> store;

  MyApp({required this.store});

  @override
  Widget build(BuildContext context) {
    return StoreProvider(
      store: store,
      child: MaterialApp(
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Redux Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            StoreConnector<int, String>(
              converter: (store) => store.state.toString(),
              builder: (context, count) {
                return Text('Count:', style: TextStyle(fontSize: 24));
              },
            ),
            StoreConnector<int, String>(
              converter: (store) => store.state.toString(),
              builder: (context, count) {
                return Text(count, style: TextStyle(fontSize: 48));
              },
            ),
          ],
        ),
      ),
      floatingActionButton: StoreConnector<int, VoidCallback>(
        converter: (store) {
          return () => store.dispatch(Action.Increment);
        },
        builder: (context, callback) {
          return FloatingActionButton(
            onPressed: callback,
            child: Icon(Icons.add),
          );
        },
      ),
    );
  }
}
  1. GetX： GetX是一个新兴的状态管理和依赖注入解决方案，它提供了一个简单而强大的方法来管理状态和路由导航。GetX通过反应式编程实现状态管理，并且具有高性能和低学习曲线的特点。
import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

class CounterController extends GetxController {
  var count = 0.obs;

  void increment() {
    count++;
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final CounterController counterController = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GetX Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Obx(() => Text('Count:', style: TextStyle(fontSize: 24))),
            Obx(() => Text('${counterController.count}', style: TextStyle(fontSize: 48))),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counterController.increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}
  1. Riverpod： Riverpod是Provider的一种替代方案，旨在提供更简单、更强大的状态管理方式。它建立在Provider之上，提供了更直观的API和更强大的功能。
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

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

final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) {
  return CounterNotifier();
});

class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);

  void increment() {
    state++;
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ProviderScope(
      child: MaterialApp(
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final count = watch(counterProvider);

    return Scaffold(
      appBar: AppBar(
        title: Text('Riverpod Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Count:', style: TextStyle(fontSize: 24)),
            Text('$count', style: TextStyle(fontSize: 48)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read(counterProvider.notifier).increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}
  1. MobX： MobX是一个状态管理库，旨在使状态管理变得简单和直观。它使用反应式编程来管理状态和触发界面更新。
import 'package:flutter/material.dart';
import 'package:mobx/mobx.dart';
import 'package:flutter_mobx/flutter_mobx.dart';

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

class CounterStore = _CounterStore with _$CounterStore;

abstract class _CounterStore with Store {
  @observable
  int count = 0;

  @action
  void increment() {
    count++;
  }
}

class MyApp extends StatelessWidget {
  final CounterStore counterStore = CounterStore();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(counterStore: counterStore),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final CounterStore counterStore;

  MyHomePage({required this.counterStore});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MobX Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Count:', style: TextStyle(fontSize: 24)),
            Observer(
              builder: (_) {
                return Text('${counterStore.count}', style: TextStyle(fontSize: 48));
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counterStore.increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

下面是对Provider、BLoC、Redux、GetX、Riverpod和MobX等Flutter状态管理库的一些对比:

Provider:

  • 适用场景： 适用于中小型应用，需要在多个层级共享状态的场景。
  • 特点： 轻量级，使用InheritedWidget来共享状态，支持各种类型的状态，易于上手。
  • 优势： 简单易用，不需要大量的额外代码，具有高性能，适用于简单的状态共享。
  • 劣势： 在大型应用中可能难以管理复杂的状态。

BLoC:

  • 适用场景： 适用于复杂的应用，需要分离业务逻辑和UI的场景。
  • 特点： 通过Streams管理状态和业务逻辑，将界面层与业务逻辑层分开，适合中大型应用。
  • 优势： 适合处理复杂的状态变化和异步操作，便于测试和维护。
  • 劣势： 在简单应用中可能显得过于复杂。

Redux:

  • 适用场景： 适用于需要管理大量复杂状态的应用。
  • 特点： 基于单一状态源和不可变状态，通过Actions和Reducers来管理状态变化。
  • 优势： 严格的状态管理，适用于大型应用，具有强大的开发工具和中间件。
  • 劣势： 在小型应用中可能过于繁琐，学习曲线较陡。

GetX:

  • 适用场景： 适用于快速开发和中小型应用，需要轻量级状态管理和依赖注入的场景。
  • 特点： 简单易用，提供状态管理、依赖注入和路由导航的综合解决方案。
  • 优势： 低学习曲线，高性能，适用于快速迭代的小型项目。
  • 劣势： 对于大型复杂应用，可能需要更复杂的状态管理方案。

Riverpod:

  • 适用场景： 适用于需要更强大、更简单的状态管理和依赖注入的场景。
  • 特点： 基于Provider的升级版本，提供更简单、更强大的API，支持多种状态管理模式。
  • 优势： 代码清晰，性能高效，支持多种状态管理模式，适用于各种规模的项目。
  • 劣势： 相对较新的库，社区可能还在成长。

MobX:

  • 适用场景： 适用于需要响应式编程和可观察对象的场景。
  • 特点： 通过可观察对象和反应式编程来管理状态，支持多种数据变化方式。
  • 优势： 简化了状态管理，具有响应式编程的特点，易于学习和使用。
  • 劣势： 相对较新的库，可能在一些大型项目中缺乏一些高级功能。

最后

如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。

如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。
img
相对于我们平时看的碎片化内容，这份笔记的知识点更系统化，更容易理解和记忆，是严格按照知识体系编排的。

欢迎大家一键三连支持，若需要文中资料，直接扫描文末CSDN官方认证微信卡片免费领取↓↓↓

PS:群里还设有ChatGPT机器人，可以解答大家在工作上或者是技术上的问题

图片

大鱼Ss
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flutter-getx-concept:一个扑扑的项目，可以利用GetX的所有概念
03-20
Flutter GetX概念 :rocket:使用状态管理器GetX的Flutter项目应用程序。 概述 创建该项目的目的是应用由状态管理器实现的大多数概念。该项目使用一小部分屏幕来模拟购物车，从而实现了文件夹架构，该文件夹架构对于将屏幕上的所有小部件树放置在其中以安全地访问其父控制器是很有意义的。 总的来说，该项目是一项研究的一部分，目的是了解对我有用的，在flutter项目中实现的最佳架构模式，我也希望对您也有用。 资源 我使用了一些方法来使该项目简单，客观地满足您的建议，其中一种方法是将内部数据用作json文件，并使用assets文件夹中的图像来模拟获取api，因此您可以分叉该项目并不用担心外部资源。 带有产品列表的页面； 在类别之间切换； 列出选定类别的产品； 像在产品中一样(i tried to make this project uncomplicated, so the state of
Flutter-状态管理
Dream It Possible
06-21 5199
的状态应该被谁管理？Widget本身？父 Widget ？都会？还是另一个对象？答案是取决于实际情况！以下是管理状态的最常见的方法：如何决定使用哪种管理方法？下面是官方给出的一些原则可以帮助你做决定：一般的原则是：如果状态是组件私有的，则应该由组件自己管理；如果状态要跨组件共享，则该状态应该由各个组件共同的父元素来管理。对于组件私有的状态管理很好理解，但对于跨组件共享的状态，管理的方式就比较多了。它是一个观察者模式的实现，通过它就可以实现跨组件状态同步：状态持有方（发布者）负责更新、发布状态，状态使用方（观
Flutter之状态管理（Redux）flutter_redux
XiNanHeiShao的专栏
11-18 1738
Flutter是Google(全球顶级互联网科技公司)的生的，后台够硬，毫无疑问Flutter即将或已经成为跨平台开发的主流，Flutter野心很大，不仅冲击着原生开发，而且很有可能会烧到Web前端。作为移动端开发者的你，如果不关注Flutter的话，实在说不过去啦！ 跨组件状态共享（Provider）的应用 一、效果图 界面初始化状态 点击按钮发起一个Redux Action更新界面(即更新S...
Flutte3.0 遥遥领先系列|一文教你完全掌握状态管理, 手写简单版provider
datian1234的博客
02-21 878
重中之重, 源码解析: (state的demo和源码分析重点看看)
Flutter 状态管理
Dream It Possible
10-05 1917
大概意思是说，Home组件的 BuildContext 不包含 Provider，产生这个错误的原因是使用的 BuildContext 是当前正在读取数据的 provider 的祖先元素，当你创建好一个 provider 以后立即读取其数据就会报这个错。如图，组件D和组件G共享的数据是通过组件A取数据以后逐级向下透传的，也就是说数据需要逐级传递，比较麻烦，而且不是所有组件都需要相关数据。User('黑寡妇', 36, '女', '把你的洗澡水给杜兰特喝一点吧'),
Flutter 状态管理(Provider)
m0_73016265的博客
02-21 1050
Flutter 状态管理(Provider)
Flutter(八)——状态管理
热门推荐
李元静
01-29 1万+
本文目录前言WidgetContextStatelessWidgetStatefulWidgetStatefulWidget的组成StateState生命周期生命周期重要方法解释Widget的唯一身份标识：keyInheritedWidget 前言 在学习完Flutter的常用组件之后，我们对这些组件的使用都有了一定的了解。但是，只是了解还是不够的，因为我们的数据是动态的，具备交互性，界面上的展示...
Flutter如何状态管理
杨充
08-19 915
目录介绍 01.什么是状态管理 02.状态管理方案分类 03.状态管理使用场景 04.Widget管理自己的状态 05.Widget管理子Widget状态 06.简单混合管理状态 07.全局状态如何管理 08.Provider使用方法 09.订阅监听修改状态 推荐 fluter Utils 工具类库：https://github.com/yangchong211/YCFlutterUtils flutter 混合项目代码案例：https://github.com/yangchong211/YCHybr
Flutter学习四：Flutter开发基础（二）状态管理
D_lunar的博客
06-27 1007
Widget 管理自己的状态。父Widget 管理子 Widget 状态。混合管理（父 Widget 和子 Widget 都管理状态）。如果状态是用户数据，如复选框的选中状态、滑块的位置，则该状态最好由父 Widget 管理。如果状态是有关界面外观效果的，例如颜色、动画，那么状态最好由 Widget 本身来管理。如果某一个状态是不同 Widget 共享的则最好由它们共同的父 Widget 管理。在 Widget 内部管理状态封装性会好一些，而在父 Widget 中管理会比较灵活。
flutter 常见的状态管理器
半身风雪
08-16 1262
当我们构建复杂的移动应用时，有效的状态管理是至关重要的，因为应用的不同部分可能需要共享数据、相应用户交互并保持一致的状态。Flutter 中有多种状态管理解决方案，下面详细介绍一些常见的状态管理方式：Provider、Bloc 和 Redux、getx 等等一些管理工具。无论选择哪种状态管理方式，都需要根据应用的规模、复杂性和开发团队的偏好来做出决定。这些状态管理模式的核心目标是有效地管理应用的状态，使代码结构清晰、易于维护，并提供良好的开发体验。
Flutter provider状态管理框架
10-24
Flutter provider状态管理框架
Flutter 状态管理的实现
08-19
主要介绍了Flutter 状态管理的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Flutter+Flutter GetX状态管理+GetX状态管理+Getx状态管理
03-16
目前，Flutter有几种状态管理器。但是，它们中的大多数都涉及到使用ChangeNotifier来更新widget，这对于中大型应用的性能来说是一个糟糕的方法。你可以在Flutter官方文档中查到，ChangeNotifier应该使用1个或最多2个...
flutter后台管理框架
06-02
省下时间来处理逻辑，最简单的后台管理框架
flutter_admin:Flutter管理员
03-18
FLUTTER_ADMIN简体中文|使用flutter实现的一个后台管理系统本项目作为一个基于Flutter开发Web，App的模板，在功能上提供多种实现方式，包括弹窗，表单样式，表格等，而且不断地在完善。一个新的应用。功能技术用户...
flutter 生成单选组件
weixin_40466351的博客
04-30 472
【代码】flutter 生成单选组件。
【Flutter 面试题】 什么是BuildContext，它有什么用
Code Metaverse
04-28 375
在 Flutter 开发中，BuildContext 是一个极为核心的类，其主要作用是代表了 Widget 在整个 Widget 树中的位置。这个上下文对象不仅关联着 Widget 的位置信息，也是它与整个应用其他部分进行交互的关键入口。
Flutter笔记：Widgets Easier组件库（4）使用按钮组
最新发布
jclee95的个人博客
05-01 845
Widgets Easier 是一个开源的 Flutter 组件库，提供了多个预构建的 UI 组件。它旨在使开发更快、更简单、更高效，将开发变成一种愉快的体验。
flutter 状态管理
04-04
Flutter 中有多种状态管理方式，常见的包括： 1. StatefulWidget：通过 StatefulWidget 自身的状态维护 Widget 的状态，适用于简单的状态管理。 2. Provider：一个 Flutter 官方推荐的状态管理库，通过 Provider.of() 方法获取状态，适用于中等规模的状态管理。 3. Redux：Redux 是一个流行的状态管理库，通过 Store 存储和管理应用程序的状态，适用于大型应用程序的状态管理。 4. BLoC：BLoC 是一种基于 Reactive Programming 的状态管理方式，通过 Stream 控制状态变更，适用于复杂的状态管理。 5. MobX：MobX 是一个状态管理库，通过使用注解和反射来跟踪和自动更新状态，适用于需要自动化状态管理的应用程序。 每种状态管理方式都有其适用的场景和优缺点，选择合适的状态管理方式可以提高应用程序的可维护性和性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值