当前位置：首页 > news >正文

Flutter状态管理GetX详解：轻量级解决方案

news 2026/5/27 8:49:13

Flutter状态管理GetX详解：轻量级解决方案

一、GetX概述

GetX是一个轻量级的Flutter状态管理库，提供状态管理、路由管理和依赖注入。

1.1 添加依赖

dependencies: get: ^4.6.5

1.2 核心特性

特性	描述
状态管理	响应式状态更新
路由管理	无需Context的导航
依赖注入	简单的依赖管理
国际化	多语言支持
主题管理	动态主题切换

二、状态管理

2.1 创建Controller

import 'package:get/get.dart'; class CounterController extends GetxController { final count = 0.obs; void increment() => count.value++; void decrement() => count.value--; void reset() => count.value = 0; }

2.2 在UI中使用

class CounterPage extends StatelessWidget { final CounterController controller = Get.put(CounterController()); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Counter')), body: Center( child: Obx(() => Text('Count: ${controller.count.value}')), ), floatingActionButton: FloatingActionButton( onPressed: controller.increment, child: const Icon(Icons.add), ), ); } }

2.3 响应式变量

// 基础类型 final name = 'John'.obs; final age = 25.obs; final isOnline = false.obs; // 对象类型 final user = User().obs; // 列表类型 final items = <String>[].obs;

三、路由管理

3.1 简单导航

// 跳转到新页面 Get.to(SecondPage()); // 跳转到新页面并接收返回值 final result = await Get.to(SecondPage()); // 返回到上一页 Get.back(); // 返回到上一页并传递数据 Get.back(result: 'data');

3.2 命名路由

void main() { runApp(GetMaterialApp( initialRoute: '/', getPages: [ GetPage(name: '/', page: () => const HomePage()), GetPage(name: '/second', page: () => const SecondPage()), GetPage(name: '/detail/:id', page: () => const DetailPage()), ], )); } // 使用命名路由 Get.toNamed('/second'); Get.toNamed('/detail/123');

3.3 获取路由参数

class DetailPage extends StatelessWidget { const DetailPage({super.key}); @override Widget build(BuildContext context) { final id = Get.parameters['id']; return Scaffold( body: Center(child: Text('ID: $id')), ); } }

四、依赖注入

4.1 注册依赖

// 永久依赖 Get.put<UserRepository>(UserRepository()); // 懒加载依赖 Get.lazyPut<UserRepository>(() => UserRepository()); // 单例依赖 Get.create<UserRepository>(() => UserRepository());

4.2 获取依赖

final userRepository = Get.find<UserRepository>();

五、高级特性

5.1 Worker回调

class CounterController extends GetxController { final count = 0.obs; @override void onInit() { super.onInit(); // 监听变化 ever(count, (value) => print('Count changed: $value')); // 监听多次变化 everAll([count], (values) => print('Values changed')); // 只监听一次 once(count, (value) => print('First change')); // 防抖 debounce(count, (value) => print('Debounced: $value'), time: const Duration(milliseconds: 500)); // 节流 interval(count, (value) => print('Interval: $value'), time: const Duration(seconds: 1)); } }

5.2 生命周期

class MyController extends GetxController { @override void onInit() { // 初始化 super.onInit(); } @override void onReady() { // 准备就绪 super.onReady(); } @override void onClose() { // 清理资源 super.onClose(); } }

六、国际化

void main() { runApp(GetMaterialApp( translations: MyTranslations(), locale: const Locale('zh', 'CN'), fallbackLocale: const Locale('en', 'US'), home: const HomePage(), )); } class MyTranslations extends Translations { @override Map<String, Map<String, String>> get keys => { 'en_US': { 'hello': 'Hello', 'welcome': 'Welcome', }, 'zh_CN': { 'hello': '你好', 'welcome': '欢迎', }, }; } // 使用 Text('hello'.tr);

七、主题管理

void main() { runApp(GetMaterialApp( theme: ThemeData.light(), darkTheme: ThemeData.dark(), themeMode: ThemeMode.system, home: const HomePage(), )); } // 切换主题 Get.changeTheme(ThemeData.dark()); Get.changeThemeMode(ThemeMode.dark);

八、Snackbar和Dialog

// Snackbar Get.snackbar( 'Title', 'Message', snackPosition: SnackPosition.BOTTOM, backgroundColor: Colors.blue, ); // Dialog Get.dialog( AlertDialog( title: const Text('Confirm'), content: const Text('Are you sure?'), actions: [ TextButton(onPressed: Get.back, child: const Text('Cancel')), TextButton(onPressed: () {}, child: const Text('OK')), ], ), ); // BottomSheet Get.bottomSheet( Container( height: 200, child: const Center(child: Text('Bottom Sheet')), ), );

九、最佳实践

9.1 项目结构

lib/ controllers/ counter_controller.dart user_controller.dart views/ home_page.dart second_page.dart services/ api_service.dart storage_service.dart main.dart

9.2 状态管理模式

class UserController extends GetxController { final ApiService _apiService = Get.find(); final user = User().obs; final isLoading = false.obs; Future<void> fetchUser(int id) async { isLoading.value = true; try { user.value = await _apiService.getUser(id); } catch (e) { Get.snackbar('Error', e.toString()); } finally { isLoading.value = false; } } }