一周掌握Flutter开发--2、状态管理

在这里插入图片描述

文章目录

- - 状态管理
  - 核心问题
  - 必学方案
  - - 2.1 简单场景：`StatefulWidget` + `setState`
    - 2.2 复杂场景：`Provider`、`Riverpod`、`Bloc` 或 `GetX`
    - 2.3 理解 `InheritedWidget` 和 `ValueNotifier` 的原理
  - 总结

状态管理

状态管理是 Flutter 开发中的核心问题之一，尤其是在复杂应用中，如何高效管理组件间的数据流和状态至关重要。Flutter 提供了多种状态管理方案，适用于不同场景。

核心问题

什么是状态？
- 状态是应用中会变化的数据，例如用户输入、网络请求结果、UI 状态（如加载中、完成）等。
为什么需要状态管理？
- 当应用变得复杂时，状态可能需要在多个组件之间共享和同步，手动管理会导致代码混乱和难以维护。

必学方案

2.1 简单场景：`StatefulWidget` + `setState`

适用场景：状态仅在单个组件内部使用，不需要跨组件共享。
实现方式：
- 使用 StatefulWidget 创建有状态的组件。
- 通过 setState 更新状态并触发 UI 重建。

示例：

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: increment,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

优点：简单易用，适合小型应用或局部状态管理。
缺点：不适合跨组件共享状态，容易导致代码冗余。

RiverpodBloc__GetX_59">2.2 复杂场景：`Provider`、`Riverpod`、`Bloc` 或 `GetX`

适用场景：状态需要在多个组件之间共享，或者应用逻辑复杂。
方案对比：

方案	特点	适用场景
Provider	基于 `InheritedWidget`，简单易用，官方推荐。	中小型应用，需要共享状态的场景
Riverpod	`Provider` 的改进版，更灵活，无依赖 `BuildContext`。	中小型应用，需要更灵活的依赖注入
Bloc	基于事件驱动，分离 UI 和业务逻辑，适合复杂应用。	大型应用，需要严格的状态管理
GetX	轻量级，集成路由和依赖注入，适合快速开发。	中小型应用，需要快速开发的场景

Provider 示例：

// 定义状态
class Counter with ChangeNotifier {
  int count = 0;

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

// 在顶层提供状态
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}

// 使用状态
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Provider Example')),
        body: Center(
          child: Column(
            children: [
              Text('Count: ${counter.count}'),
              ElevatedButton(
                onPressed: counter.increment,
                child: Text('Increment'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

InheritedWidgetValueNotifier119">2.3 理解 `InheritedWidget` 和 `ValueNotifier` 的原理

InheritedWidget：

Flutter 中用于在 Widget 树中共享数据的底层机制。
Provider 和 Riverpod 都是基于 InheritedWidget 实现的。

示例：

class MyInheritedWidget extends InheritedWidget {
  final int data;

  MyInheritedWidget({required this.data, required Widget child}) : super(child: child);

  @override
  bool updateShouldNotify(MyInheritedWidget oldWidget) {
    return oldWidget.data != data;
  }

  static MyInheritedWidget of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>()!;
  }
}

ValueNotifier：

一个简单的可观察对象，用于存储和通知状态变化。
Provider 的 ChangeNotifier 是基于 ValueNotifier 的扩展。

示例：

class Counter {
  ValueNotifier<int> count = ValueNotifier(0);

  void increment() {
    count.value++;
  }
}

// 使用 ValueListenableBuilder 监听变化
ValueListenableBuilder<int>(
  valueListenable: counter.count,
  builder: (context, value, child) {
    return Text('Count: $value');
  },
);