Flutter最新RiverPod Generator与MVC集成及GetX代码迁移实现问询

整体对应关系 #

MVC各层与RiverPod的映射：

• Model: 数据结构定义，和GetX实现完全一致
• Controller: 由RiverPod Generator生成的AsyncNotifier实现，负责业务逻辑、数据请求、状态更新
• View: 通过ConsumerWidget/ref.watch监听状态变化，渲染UI并触发Controller方法

实现步骤 #

1. 添加依赖 #

在pubspec.yaml中引入RiverPod Generator相关包：

dependencies:
  flutter_riverpod: ^2.4.9
  riverpod_annotation: ^2.3.1

dev_dependencies:
  build_runner: ^2.4.6
  riverpod_generator: ^2.3.9

2. 定义Model（与GetX一致） #

class MyModel {
  final String id;
  final String name;

  MyModel({required this.id, required this.name});

  factory MyModel.fromJson(Map<String, dynamic> json) => MyModel(
        id: json['id'] as String,
        name: json['name'] as String,
      );
}

3. 实现Controller（RiverPod Generator版本） #

创建a_controller.dart，用@riverpod注解生成对应GetX的AController逻辑：

import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'a_controller.g.dart';

// 对应GetX的AController，处理状态与业务逻辑
@riverpod
class AController extends _$AController {
  // build方法等价于GetX的onInit，Provider初始化时自动执行
  @override
  FutureOr<MyModel> build() async {
    // 初始化时调用接口拉取数据
    return await _fetchData();
  }

  // 封装API请求逻辑
  Future<MyModel> _fetchData() async {
    // 通过ref获取API服务实例（依赖注入）
    final apiService = ref.read(apiServiceProvider);
    final response = await apiService.fetchData();
    return MyModel.fromJson(response);
  }

  // 数据更新方法，对应GetX的updateData
  void updateData(MyModel newData) {
    state = AsyncData(newData);
  }

  // 重新拉取数据的方法
  Future<void> refreshData() async {
    state = const AsyncLoading();
    try {
      final newData = await _fetchData();
      state = AsyncData(newData);
    } catch (e, stackTrace) {
      state = AsyncError(e, stackTrace);
    }
  }
}

// 全局API服务Provider，用于依赖注入
@riverpod
ApiService apiService(ApiServiceRef ref) => ApiService();

// 模拟API服务类
class ApiService {
  Future<Map<String, dynamic>> fetchData() async {
    // 替换为实际网络请求逻辑
    await Future.delayed(const Duration(seconds: 1));
    return {'id': '1', 'name': '初始数据'};
  }
}

运行命令生成代码：

flutter pub run build_runner build

4. 实现View层（MVC的View） #

通过ConsumerWidget监听Controller状态，渲染UI：

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class AView extends ConsumerWidget {
  const AView({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 监听Controller的状态变化
    final controllerState = ref.watch(aControllerProvider);

    return Scaffold(
      appBar: AppBar(title: const Text('RiverPod MVC Demo')),
      body: Center(
        child: controllerState.when(
          // 加载状态
          loading: () => const CircularProgressIndicator(),
          // 错误状态
          error: (err, stack) => Text('加载失败: $err'),
          // 成功状态
          data: (data) => Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('ID: ${data.id}'),
              const SizedBox(height: 8),
              Text('名称: ${data.name}'),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // 调用Controller的updateData方法
                  ref.read(aControllerProvider.notifier).updateData(
                        MyModel(id: '2', name: '更新后的数据'),
                      );
                },
                child: const Text('更新数据'),
              ),
              const SizedBox(height: 12),
              ElevatedButton(
                onPressed: () {
                  // 调用Controller的refreshData方法
                  ref.read(aControllerProvider.notifier).refreshData();
                },
                child: const Text('刷新数据'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

核心差异说明 #

• 状态管理：RiverPod用AsyncValue自动处理加载/错误/成功状态，无需手动维护Rx变量
• 初始化逻辑：build方法替代GetX的onInit，Provider初始化时自动执行
• 依赖注入：通过ref.read()获取依赖，替代GetX的Get.find()，更安全且易于测试
• 代码生成：@riverpod注解自动生成Provider代码，减少模板代码编写

内容的提问来源于stack exchange，提问作者laterday