Provider Bloc Redux Riverpod MobX 简单的使用案例

以下是Provider、Bloc、Redux、Riverpod和MobX的简单使用案例，每个案例都展示了如何创建一个计数器应用，以便更好地理解这些状态管理工具的用法。

1. Provider：

   import 'package:flutter/material.dart';
   import 'package:provider/provider.dart';
   
   void main() {
     runApp(MyApp());
   }
   
   class CounterModel extends ChangeNotifier {
     int _counter = 0;
     int get counter => _counter;
   
     void increment() {
       _counter++;
       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 counter = Provider.of<CounterModel>(context);
   
       return Scaffold(
         appBar: AppBar(
           title: Text('Provider Example'),
         ),
         body: Center(
           child: Text('Counter: ${counter.counter}'),
         ),
         floatingActionButton: FloatingActionButton(
           onPressed: () => counter.increment(),
           child: Icon(Icons.add),
         ),
       );
     }
   }
   

2. Bloc：

   // 请确保添加 bloc 和 flutter_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 counter = BlocProvider.of<CounterCubit>(context);
   
       return Scaffold(
         appBar: AppBar(
           title: Text('Bloc Example'),
         ),
         body: Center(
           child: BlocBuilder<CounterCubit, int>(
             builder: (context, state) {
               return Text('Counter: $state');
             },
           ),
         ),
         floatingActionButton: FloatingActionButton(
           onPressed: () => counter.increment(),
           child: Icon(Icons.add),
         ),
       );
     }
   }
   

3. Redux：

   // 请确保添加 redux 和 flutter_redux 依赖
   import 'package:flutter/material.dart';
   import 'package:flutter_redux/flutter_redux.dart';
   import 'package:redux/redux.dart';
   
   void main() {
     final store = Store<int>(
       (state, action) {
         if (action == 'increment') {
           return state + 1;
         }
         return state;
       },
       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) {
       final store = StoreProvider.of<int>(context);
   
       return Scaffold(
         appBar: AppBar(
           title: Text('Redux Example'),
         ),
         body: Center(
           child: StoreConnector<int, int>(
             converter: (store) => store.state,
             builder: (context, count) {
               return Text('Counter: $count');
             },
           ),
         ),
         floatingActionButton: FloatingActionButton(
           onPressed: () => store.dispatch('increment'),
           child: Icon(Icons.add),
         ),
       );
     }
   }
   

4. Riverpod：

   import 'package:flutter/material.dart';
   import 'package:flutter_riverpod/flutter_riverpod.dart';
   
   void main() {
     runApp(ProviderScope(child: MyApp()));
   }
   
   final counterProvider = StateProvider<int>((ref) => 0);
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: MyHomePage(),
       );
     }
   }
   
   class MyHomePage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       final counter = context.read(counterProvider);
   
       return Scaffold(
         appBar: AppBar(
           title: Text('Riverpod Example'),
         ),
         body: Center(
           child: Consumer(
             builder: (context, watch, child) {
               final count = watch(counterProvider).state;
               return Text('Counter: $count');
             },
           ),
         ),
         floatingActionButton: FloatingActionButton(
           onPressed: () => counter.state++,
           child: Icon(Icons.add),
         ),
       );
     }
   }
   

5. MobX：

   // 请确保添加 mobx 和 flutter_mobx 依赖
   import 'package:flutter/material.dart';
   import 'package:flutter_mobx/flutter_mobx.dart';
   import 'package:mobx/mobx.dart';
   
   void main() {
     final counter = Counter();
   
     runApp(MyApp(counter: counter));
   }
   
   class Counter {
     var count = Observable(0);
   
     void increment() {
       count.value++;
     }
   }
   
   class MyApp extends StatelessWidget {
     final Counter counter;
   
     MyApp({required this.counter});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: MyHomePage(counter: counter),
       );
     }
   }
   
   class MyHomePage extends StatelessWidget {
     final Counter counter;
   
     MyHomePage({required this.counter});
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('MobX Example'),
         ),
         body: Center(
           child: Observer(
             builder: (context) {
               return Text('Counter: ${counter.count.value}');
             },
           ),
         ),
         floatingActionButton: FloatingActionButton(
           onPressed: () => counter.increment(),
           child: Icon(Icons.add),
         ),
       );
     }
   }
   

以上