状态管理框架
状态管理框架用于管理应用的状态，确保数据在组件间高效传递。
提示：选择合适的状态管理框架取决于项目复杂度和团队偏好。
📱 渲染效果预览
计数: 0
Provider
Provider 是 Flutter 官方推荐的状态管理方案。
// 创建 Provider
class Counter extends ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
}
// 使用 Provider
void main() {
runApp(
ChangeNotifierProvider(
create: (_) => Counter(),
child: MyApp(),
),
);
}
// 在 Widget 中使用
Consumer(
builder: (context, counter, child) {
return Text('计数: ${counter.count}');
},
) 📱 渲染效果预览
计数: 0
Riverpod
Riverpod 是 Provider 的改进版本，提供更好的类型安全。
// 创建 Provider
final counterProvider = StateProvider((ref) => 0);
// 使用 Riverpod
void main() {
runApp(
ProviderScope(
child: MyApp(),
),
);
}
// 在 Widget 中使用
Consumer(
builder: (context, ref, _) {
final count = ref.watch(counterProvider);
return Text('计数: $count');
},
)
// 修改状态
ref.read(counterProvider.notifier).state++; 📱 渲染效果预览
计数: 0
Bloc / Cubit
Bloc/Cubit 是一个强大的状态管理库，适合复杂应用。
// 创建 Cubit
class CounterCubit extends Cubit {
CounterCubit() : super(0);
void increment() => emit(state + 1);
void decrement() => emit(state - 1);
}
// 使用 Cubit
void main() {
runApp(
BlocProvider(
create: (_) => CounterCubit(),
child: MyApp(),
),
);
}
// 在 Widget 中使用
BlocBuilder(
builder: (context, count) {
return Text('计数: $count');
},
) 📱 渲染效果预览
计数: 0
GetX
GetX 是一个轻量级且功能全面的状态管理库。
// 创建 Controller
class CounterController extends GetxController {
var count = 0.obs;
void increment() => count++;
}
// 使用 GetX
void main() {
Get.put(CounterController());
runApp(MyApp());
}
// 在 Widget 中使用
Obx(() => Text('计数: ${Get.find().count.value}')) 📱 渲染效果预览
Action
→
Reducer
→
Store
→
View
Redux
Redux 是一个可预测的状态容器，适合大型应用。
// 定义 Action
enum CounterAction { increment, decrement }
// 定义 Reducer
int counterReducer(int state, dynamic action) {
if (action == CounterAction.increment) {
return state + 1;
} else if (action == CounterAction.decrement) {
return state - 1;
}
return state;
}
// 创建 Store
final store = Store(counterReducer, initialState: 0);
// 使用 Redux
StoreProvider(
store: store,
child: MyApp(),
)
// 在 Widget 中使用
StoreConnector(
converter: (store) => '计数: ${store.state}',
builder: (context, count) {
return Text(count);
},
) 📱 渲染效果预览
计数: 0
MobX
MobX 是一个响应式的状态管理库。
// 创建 Observable
class Counter = _Counter with _$Counter;
abstract class _Counter with Store {
@observable
int count = 0;
@action
void increment() => count++;
}
// 使用 MobX
final counter = Counter();
Observer(
builder: (_) => Text('计数: ${counter.count}'),
)📱 渲染效果预览
计数: 0
setState
setState 是 Flutter 内置的简单状态管理方式。
class CounterWidget extends StatefulWidget {
@override
_CounterWidgetState createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State {
int _count = 0;
void _increment() {
setState(() {
_count++;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('计数: $_count'),
ElevatedButton(
onPressed: _increment,
child: Text('增加'),
),
],
);
}
}
状态管理框架选择指南：
- 新手推荐：Provider 或 setState
- 中小型项目：Provider 或 GetX
- 大型项目：Bloc/Cubit 或 Redux
- 追求类型安全：Riverpod
- 喜欢响应式：MobX