Flutter的这些状态管理,先说说ChangeNotifierProvider

这是一篇暂时还有待完善的文章。

老生常谈,不厌其烦。

在Flutter中,状态管理是一个核心主题,因为它直接影响到应用的性能和开发的复杂性。

常见的状态管理

  1. Provider : 这是最受推荐的一种轻量级状态管理方式。Provider不仅可以帮助你管理跨多个屏幕或组件的共享状态,还提供了一个相对简单的实现方式。ChangeNotifierProvider是Provider包中的一个组件,用于将ChangeNotifier类与Flutter UI绑定。
  2. setState: 这是Flutter框架内置的最基本的状态管理方法,适用于局部状态管理,即状态仅在单个Widget内部使用。
  3. Bloc/Cubit: Bloc是一种较为复杂的状态管理库,基于Reactive Programming(响应式编程),主要用于更复杂的应用中。它通过分离业务逻辑和视图层来帮助实现更可维护的代码结构。
  4. Riverpod: 由Provider的作者开发,可以看作是Provider的改进版。Riverpod提供了更灵活的依赖重写机制,更好的性能和更少的限制。
  5. Redux: 受到Web开发中JavaScript的Redux库的启发,Flutter的Redux库用于管理应用的所有状态。它使用单一的全局状态存储,通过派发actions和reducers来更新状态。
  6. GetX: 是一个轻量级且功能丰富的库,用于状态管理、依赖注入和路由管理。GetX易于学习,并且提供了非常简洁的API来处理状态管理。
  7. MobX: 另一个响应式状态管理库,通过actions、reactions和observables的概念来管理状态。MobX的核心思想是自动追踪状态变化,并触发相应的响应。

一、说说 ChangeNotifierProvider

使用ChangeNotifierProvider的步骤

  1. 定义ChangeNotifier类 :首先,你需要定义一个类,继承自ChangeNotifier。这个类将持有你想要在应用中共享的数据,并在数据发生变化时通知其监听者。
  2. 创建Provider :在应用的顶层或需要的层级,使用ChangeNotifierProvider来创建你的ChangeNotifier类的实例,并使其下的widget树能够访问到这个实例。
  3. 使用数据 :在widget中,你可以使用Provider.of<T>(context)Consumer<T> widget来读取和响应数据变化。

示例代码

下面是一个简单的计数器应用示例,展示了如何使用ChangeNotifierProvider来实现状态管理。

dart 复制代码
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

// 步骤1: 定义一个继承自ChangeNotifier的Counter类
class Counter extends ChangeNotifier {
  int _count = 0;  // 私有变量,存储计数值

  int get count => _count;  // 公开的getter方法,用于读取计数值

  void increment() {
    _count++;          // 计数值加1
    notifyListeners(); // 通知监听器数据已更新,触发界面重建
  }
}

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

// 步骤2: 使用ChangeNotifierProvider在应用顶层提供Counter实例
class ProviderApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MaterialApp(
        home: HomePage(),
      ),
    );
  }
}

// 主页面
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 步骤3: 使用Provider.of来访问Counter实例
    final counter = Provider.of<Counter>(context, listen: true);

    return Scaffold(
      appBar: AppBar(title: Text("Provider Example")),
      body: Center(
        child: Text('Count: ${counter.count}', style: TextStyle(fontSize: 24)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counter.increment, // 调用Counter中的increment方法
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

解析

  • Counter类 :这个类继承自ChangeNotifier,管理计数器的状态。当调用increment()方法时,计数器的值会增加,并通过notifyListeners()通知依赖这个状态的widget进行重建。
  • ProviderApp类 :这是一个包装了ChangeNotifierProvider的widget,它在应用的顶层提供了Counter类的实例。所有子widget都可以访问到这个实例。
  • HomePage类 :这个类使用Provider.of<Counter>(context)来获取Counter实例,并在界面中显示计数值。FloatingActionButton被点击时会触发increment()方法,从而更新界面上显示的计数值。

其他的呢,暂时不说了,说起来太长了

相关推荐
真滴book理喻13 分钟前
Vue(四)
前端·javascript·vue.js
蜜獾云15 分钟前
npm淘宝镜像
前端·npm·node.js
dz88i815 分钟前
修改npm镜像源
前端·npm·node.js
Jiaberrr19 分钟前
解锁 GitBook 的奥秘:从入门到精通之旅
前端·gitbook
顾平安2 小时前
Promise/A+ 规范 - 中文版本
前端
聚名网2 小时前
域名和服务器是什么?域名和服务器是什么关系?
服务器·前端
桃园码工2 小时前
4-Gin HTML 模板渲染 --[Gin 框架入门精讲与实战案例]
前端·html·gin·模板渲染
不是鱼2 小时前
构建React基础及理解与Vue的区别
前端·vue.js·react.js
沈剑心2 小时前
如何在鸿蒙系统上实现「沉浸式」页面?
前端·harmonyos
一棵开花的树,枝芽无限靠近你2 小时前
【PPTist】组件结构设计、主题切换
前端·笔记·学习·编辑器