Flutter MVC架构详解：经典架构模式实战

一、MVC概述

MVC（Model-View-Controller）是一种经典的软件架构模式，将应用分为三个主要部分。

1.1 组件职责

二、实现MVC

2.1 Model层

class User {
  final int id;
  final String name;
  final String email;
  
  User({required this.id, required this.name, required this.email});
  
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
      email: json['email'],
    );
  }
  
  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'email': email,
    };
  }
}

class UserRepository {
  Future<User> getUser(int id) async {
    // 模拟API调用
    await Future.delayed(const Duration(seconds: 1));
    return User(id: id, name: 'John Doe', email: 'john@example.com');
  }
}

2.2 Controller层

class UserController {
  final UserRepository _repository;
  User? _user;
  bool _isLoading = false;
  String? _error;
  
  UserController(this._repository);
  
  User? get user => _user;
  bool get isLoading => _isLoading;
  String? get error => _error;
  
  Future<void> fetchUser(int id) async {
    _isLoading = true;
    _error = null;
    notifyListeners();
    
    try {
      _user = await _repository.getUser(id);
    } catch (e) {
      _error = e.toString();
    } finally {
      _isLoading = false;
      notifyListeners();
    }
  }
  
  // 通知机制（可以使用ChangeNotifier或自定义）
  void notifyListeners() {}
}

2.3 View层

class UserView extends StatelessWidget {
  final UserController controller;
  
  const UserView({super.key, required this.controller});
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('User Profile')),
      body: controller.isLoading
          ? const Center(child: CircularProgressIndicator())
          : controller.error != null
              ? Center(child: Text('Error: ${controller.error}'))
              : controller.user != null
                  ? UserProfile(user: controller.user!)
                  : const Center(child: Text('No user data')),
    );
  }
}

class UserProfile extends StatelessWidget {
  final User user;
  
  const UserProfile({super.key, required this.user});
  
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          const CircleAvatar(radius: 40),
          const SizedBox(height: 16),
          Text(user.name, style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
          Text(user.email, style: const TextStyle(color: Colors.grey)),
        ],
      ),
    );
  }
}

三、使用ChangeNotifier

import 'package:flutter/foundation.dart';

class UserController extends ChangeNotifier {
  final UserRepository _repository;
  User? _user;
  bool _isLoading = false;
  String? _error;
  
  UserController(this._repository);
  
  User? get user => _user;
  bool get isLoading => _isLoading;
  String? get error => _error;
  
  Future<void> fetchUser(int id) async {
    _isLoading = true;
    _error = null;
    notifyListeners();
    
    try {
      _user = await _repository.getUser(id);
    } catch (e) {
      _error = e.toString();
    } finally {
      _isLoading = false;
      notifyListeners();
    }
  }
}

// 使用
class UserPage extends StatelessWidget {
  const UserPage({super.key});
  
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => UserController(UserRepository()),
      child: const UserView(),
    );
  }
}

class UserView extends Consumer<UserController> {
  const UserView({super.key});
  
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final controller = ref.watch(userControllerProvider);
    
    return Scaffold(
      appBar: AppBar(title: const Text('User')),
      body: controller.isLoading
          ? const CircularProgressIndicator()
          : UserProfile(user: controller.user!),
      floatingActionButton: FloatingActionButton(
        onPressed: () => controller.fetchUser(1),
        child: const Icon(Icons.refresh),
      ),
    );
  }
}

四、项目结构

lib/
  models/
    user.dart
  repositories/
    user_repository.dart
  controllers/
    user_controller.dart
  views/
    user_page.dart
    user_profile.dart
  main.dart

五、MVC与其他架构对比

总结

MVC是一种经典的架构模式，适合中小型Flutter应用。

关键要点：

1. Model：数据模型和业务逻辑
2. View：UI展示，不包含业务逻辑
3. Controller：处理用户交互，更新Model
4. ChangeNotifier：实现状态通知机制
5. Provider：管理Controller生命周期

通过合理使用MVC，你可以构建结构清晰、易于维护的Flutter应用。