Flutter各大主流状态管理框架技术选型分析及具体使用步骤

发布于：2025-08-06 ⋅ 阅读:(21) ⋅ 点赞:(0)

技术选型决策树

小型应用
中大型应用
严格状态追溯
响应式编程
简单局部状态
新手
React背景
Vue背景
高频更新
低内存占用
项目需求
GetX
Riverpod
Bloc
MobX
ValueNotifier
团队经验
性能要求
Redux

示例对比表：

框架 学习曲线 样板代码 类型安全 测试友好 适用规模
Provider 低 少 中 中 小-中
Riverpod 中 中 高 高 所有规模
Bloc 高 多 高 高 中-大
GetX 低 极少 低 中 小
MobX 中 少 高 高 中-大
ValueNotifier 低 极少 中 中 局部状态

1. Provider（官方基础方案）

使用步骤：
创建ChangeNotifier模型
用Provider包裹应用
在UI中使用context.watch

详细步骤：

  1. 添加依赖
dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.5
  1. 创建状态模型
class CounterModel with ChangeNotifier {
  int _count = 0;
  int get count => _count;
  
  void increment() {
    _count++;
    notifyListeners(); // 通知监听器
  }
}
  1. 在顶层包裹Provider
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MyApp(),
    ),
  );
}
  1. 在UI中使用状态
class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = context.watch<CounterModel>();
    
    return Scaffold(
      body: Text('Count: ${counter.count}'),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

2. Riverpod（现代推荐方案）

使用步骤：
定义Provider
用ProviderScope包裹
使用WidgetRef访问

详细步骤：

  1. 添加依赖
dependencies:
  flutter_riverpod: ^2.4.9
  riverpod_annotation: ^2.3.0
dev_dependencies:
  build_runner: ^2.4.8
  riverpod_generator: ^2.3.3
  1. 创建Provider
// counter_provider.dart
import 'package:riverpod_annotation/riverpod_annotation.dart';
part 'counter_provider.g.dart';

@riverpod
class Counter extends _$Counter {
  @override
  int build() => 0; // 初始状态
  
  void increment() => state++;
}
  1. 生成代码
flutter pub run build_runner watch
  1. 设置ProviderScope
void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}
  1. 在UI中使用
class CounterScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    
    return Scaffold(
      body: Text('Count: $count'),
      floatingActionButton: FloatingActionButton(
        onPressed: () => ref.read(counterProvider.notifier).increment(),
        child: Icon(Icons.add),
    );
  }
}

3. Bloc（企业级方案）

使用步骤：
定义Event
定义State
创建Bloc处理逻辑
用BlocBuilder连接

详细步骤：

  1. 添加依赖
dependencies:
  flutter_bloc: ^8.1.3
  bloc: ^8.1.0
  1. 定义事件和状态
// 事件
abstract class CounterEvent {}
class Increment extends CounterEvent {}

// 状态
class CounterState {
  final int count;
  CounterState(this.count);
}
  1. 创建Bloc
class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterState(0)) {
    on<Increment>((event, emit) {
      emit(CounterState(state.count + 1));
    });
  }
}
  1. 在顶层提供Bloc
void main() {
  runApp(
    BlocProvider(
      create: (context) => CounterBloc(),
      child: MyApp(),
    ),
  );
}
  1. UI中使用
class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BlocBuilder<CounterBloc, CounterState>(
        builder: (context, state) {
          return Text('Count: ${state.count}');
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<CounterBloc>().add(Increment()),
        child: Icon(Icons.add),
      ),
    );
  }
}

4. GetX（全栈式方案）

使用步骤：
创建Controller
用Obx包裹UI
更新响应式变量

详细步骤：

  1. 添加依赖
dependencies:
  get: ^4.6.5
  1. 创建控制器
class CounterController extends GetxController {
  var count = 0.obs; // 响应式变量
  
  void increment() => count++;
}
  1. 配置GetMaterialApp
void main() {
  runApp(
    GetMaterialApp( // 替换MaterialApp
      home: CounterScreen(),
    ),
  );
}
  1. UI中使用
class CounterScreen extends StatelessWidget {
  final CounterController c = Get.put(CounterController());
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Obx(() => Text('Count: ${c.count}')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => c.increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}
  1. 路由导航（无需context）
// 任何地方调用
Get.to(NextScreen());
Get.back();

5. Redux（单向数据流方案）

使用步骤：
定义State
定义Actions
创建Reducer
创建Store
用StoreProvider包裹

详细步骤：

  1. 添加依赖
dependencies:
  flutter_redux: ^0.11.0
  redux: ^5.0.0
  1. 定义状态和操作
// 状态
class AppState {
  final int counter;
  AppState(this.counter);
}

// 操作
class IncrementAction {}
  1. 创建Reducer
AppState reducer(AppState state, dynamic action) {
  if (action is IncrementAction) {
    return AppState(state.counter + 1);
  }
  return state;
}
  1. 创建Store
void main() {
  final store = Store<AppState>(
    reducer,
    initialState: AppState(0),
  );
  
  runApp(
    StoreProvider(
      store: store,
      child: MyApp(),
    ),
  );
}
  1. UI中使用
class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, int>(
      converter: (store) => store.state.counter,
      builder: (context, count) {
        return Scaffold(
          body: Text('Count: $count'),
          floatingActionButton: FloatingActionButton(
            onPressed: () => StoreProvider.of<AppState>(context).dispatch(IncrementAction()),
            child: Icon(Icons.add),
          ),
        );
      },
    );
  }
}

6. MobX（响应式方案）

使用步骤：
graph TD
    C[创建Store] --> O[用Observer包裹UI]
    O --> R[更新@observable变量]

详细步骤：

  1. 添加依赖
dependencies:
  flutter_mobx: ^2.0.6
  mobx: ^2.1.3
  build_runner: ^2.4.8
dev_dependencies:
  mobx_codegen: ^2.0.7
  1. 创建Store
import 'package:mobx/mobx.dart';

part 'counter_store.g.dart';

class CounterStore = _CounterStore with _$CounterStore;

abstract class _CounterStore with Store {
  @observable
  int count = 0;
  
  @action
  void increment() {
    count++;
  }
}
  1. 生成代码
flutter pub run build_runner build
  1. 在顶层提供Store
void main() {
  final counterStore = CounterStore();
  
  runApp(
    Provider(
      create: (context) => counterStore,
      child: MyApp(),
    ),
  );
}
  1. UI中使用
class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterStore = Provider.of<CounterStore>(context);
    
    return Scaffold(
      body: Observer(
        builder: (_) => Text('Count: ${counterStore.count}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counterStore.increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

7. ValueNotifier（轻量级方案）

使用步骤：
创建ValueNotifier
用ValueListenableBuilder包裹
更新value属性

详细步骤：

  1. 创建ValueNotifier
final counterNotifier = ValueNotifier<int>(0);
  1. UI中使用
class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ValueListenableBuilder<int>(
        valueListenable: counterNotifier,
        builder: (context, value, _) {
          return Text('Count: $value');
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counterNotifier.value++,
        child: Icon(Icons.add),
      ),
    );
  }
}
  1. 清理资源（在StatefulWidget中）
@override
void dispose() {
  counterNotifier.dispose();
  super.dispose();
}

金句建议：
“状态管理是Flutter开发的灵魂抉择，Riverpod和Bloc代表着工程化的未来，
而GetX则是快速验证创意的利器——明智的选择比盲目的努力更重要”

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布