GetX 实现 MVVM 架构， 高效 路由管理 和 状态管理

GetX是Flutter中的一个高效的状态管理与路由管理框架，结合MVVM架构能简化代码逻辑。以下是使用GetX实现MVVM架构，并完成路由和状态管理的核心思路与实践：

一、MVVM架构在GetX中的映射

MVVM（Model-View-ViewModel）与GetX的结合方式：

• Model：数据模型（如实体类、API接口）。

• View：UI组件（Widget），通过GetX的响应式API绑定数据。

• ViewModel：对应GetX中的GetxController，处理业务逻辑、状态管理和路由控制。

二、状态管理实现（基于GetX Controller）

1. 创建ViewModel（GetxController）

class CounterViewModel extends GetxController {

  final count = 0.obs; // 使用obs包装响应式数据

  void increment() {

    count.value++; // 修改状态时更新value

  }

}

2. View中绑定状态

class CounterPage extends StatelessWidget {

  final CounterViewModel controller = Get.put(CounterViewModel()); // 注册Controller

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: Center(

        // Obx包裹使Widget响应状态变化

        child: Obx(() => Text("Count: ${controller.count.value}")),

      ),

      floatingActionButton: FloatingActionButton(

        onPressed: controller.increment,

        child: Icon(Icons.add),

      ),

    );

  }

}

3. 状态管理核心特性

响应式机制：通过obs修饰符（int.obs、List<String>.obs等）使数据具备响应式，修改时自动刷新UI。

生命周期管理：GetxController自带onInit、onClose等生命周期方法，替代Flutter的State生命周期。

依赖注入：通过Get.put()注册Controller，实现全局单例或作用域内共享。

三、路由管理实现（GetX Router）

GetX提供极简的路由API，支持MVVM中ViewModel控制页面跳转：

1. 注册路由（通常在main.dart）

void main() {

  runApp(

    GetMaterialApp(

      initialRoute: '/home',

      getPages: [

        GetPage(name: '/home', page: () => HomePage()),

        GetPage(name: '/detail', page: () => DetailPage()),

      ],

    ),

  );

}

2. ViewModel中控制路由

class HomeViewModel extends GetxController {

  void goToDetailPage(int id) {

    // 带参数跳转

    Get.toNamed('/detail', arguments: id);

  }

  void backToHome() {

    Get.back(); // 返回上一页

  }

}

3. 在View中获取路由参数

class DetailPage extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    // 获取路由参数

    final int id = Get.arguments;

    return Scaffold(

      appBar: AppBar(title: Text('Detail $id')),

      body: Center(child: Text('This is detail page $id')),

    );

  }

}

4. 路由管理核心特性

命名路由：通过Get.toNamed()跳转，避免Widget引用耦合，符合MVVM解耦原则。

参数传递：支持arguments传递任意类型数据，或通过Get.arguments在目标页获取。

路由拦截：可通过GetMaterialApp的navigatorObservers或自定义中间件实现路由拦截（如登录验证）。

四、MVVM+GetX完整实践示例

“列表页→详情页”场景为例：

1. Model层

class User {

  final int id;

  final String name;

  User(this.id, this.name);

}

class UserService {

  Future<List<User>> fetchUsers() async {

    // 模拟网络请求

    await Future.delayed(Duration(seconds: 1));

    return [User(1, '用户1'), User(2, '用户2')];

  }

}

2. ViewModel层（UserListController）

class UserListController extends GetxController {

  final userService = UserService();

  final users = <User>[].obs;

  final isLoading = true.obs;

  @override

  void onInit() {

    fetchUsers();

    super.onInit();

  }

  Future<void> fetchUsers() async {

    isLoading(true);

    try {

      users(await userService.fetchUsers());

    } catch (e) {

      Get.snackbar('错误', '获取用户失败');

    } finally {

      isLoading(false);

    }

  }

  void goToDetail(int id) {

    Get.toNamed('/user/detail', arguments: id);

  }

}

3. View层（UserListPage）

class UserListPage extends StatelessWidget {

  final UserListController controller = Get.put(UserListController());

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text('用户列表')),

      body: Obx(() {

        if (controller.isLoading.value) {

          return Center(child: CircularProgressIndicator());

        }

        return ListView.builder(

          itemCount: controller.users.value.length,

          itemBuilder: (_, index) {

            final user = controller.users.value[index];

            return ListTile(

              title: Text(user.name),

              onTap: () => controller.goToDetail(user.id),

            );

          },

        );

      }),

    );

  }

}

五、GetX实现MVVM的核心优势

• 解耦性：View仅负责UI展示，ViewModel处理逻辑，Model管理数据，符合MVVM架构原则。

• 高效性：响应式机制精准刷新UI，避免全页面重建；路由API简洁，支持原生级过渡动画。

• 可维护性：Controller自带生命周期管理，依赖注入简化组件通信，代码结构清晰。

通过GetX的GetxController和路由API，可轻松实现MVVM架构的状态管理与路由控制，同时保持代码的简洁性和可维护性。