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()方法,从而更新界面上显示的计数值。

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

相关推荐
四喜花露水27 分钟前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy36 分钟前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
web Rookie1 小时前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
Au_ust1 小时前
css:基础
前端·css
帅帅哥的兜兜1 小时前
css基础:底部固定,导航栏浮动在顶部
前端·css·css3
yi碗汤园1 小时前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称1 小时前
购物车-多元素组合动画css
前端·css
编程一生2 小时前
回调数据丢了?
运维·服务器·前端
丶21362 小时前
【鉴权】深入了解 Cookie:Web 开发中的客户端存储小数据
前端·安全·web
Missmiaomiao3 小时前
npm install慢
前端·npm·node.js