Flutter应用架构完全指南：从MVC到Clean Architecture

引言架构设计是应用开发的核心一个好的架构能够提高代码的可维护性、可测试性和可扩展性。Flutter作为跨平台框架支持多种架构模式。本文将深入探讨Flutter应用中常见的架构模式并重点介绍Clean Architecture的实现。一、架构模式概览1.1 常见架构模式对比模式适用场景优点缺点MVC简单应用结构清晰控制器职责过重MVP中型应用易于测试代码量增加MVVM复杂应用数据绑定学习曲线陡Clean Architecture大型应用高内聚低耦合结构复杂1.2 架构层次┌─────────────────────────────────────────────┐ │ Presentation Layer │ │ (UI, Widgets, View Models) │ ├─────────────────────────────────────────────┤ │ Domain Layer │ │ (Use Cases, Entities, Repos) │ ├─────────────────────────────────────────────┤ │ Data Layer │ │ (Repositories, Data Sources, Models) │ └─────────────────────────────────────────────┘二、MVC架构2.1 结构设计// Model class User { final String id; final String name; User({required this.id, required this.name}); } // View class UserView extends StatelessWidget { final UserController controller; const UserView({super.key, required this.controller}); override Widget build(BuildContext context) { return Scaffold( body: Center( child: Text(controller.user.name), ), ); } } // Controller class UserController { late User user; void fetchUser() { // 获取用户数据 user User(id: 1, name: John); } }2.2 使用方式void main() { final controller UserController(); controller.fetchUser(); runApp(MaterialApp( home: UserView(controller: controller), )); }三、MVP架构3.1 结构设计// Model class User { final String id; final String name; User({required this.id, required this.name}); } // View Interface abstract class UserView { void showUser(User user); void showError(String message); } // Presenter class UserPresenter { final UserView view; final UserRepository repository; UserPresenter({required this.view, required this.repository}); void loadUser(String userId) { repository.getUser(userId).then((user) { view.showUser(user); }).catchError((error) { view.showError(error.toString()); }); } } // Repository abstract class UserRepository { FutureUser getUser(String id); }3.2 View实现class UserScreen extends StatefulWidget implements UserView { const UserScreen({super.key}); override StateUserScreen createState() _UserScreenState(); override void showUser(User user) { // 更新UI } override void showError(String message) { // 显示错误 } }四、MVVM架构4.1 结构设计// Model class User { final String id; final String name; User({required this.id, required this.name}); } // ViewModel class UserViewModel extends ChangeNotifier { final UserRepository _repository; User? _user; String? _error; User get user _user!; String? get error _error; UserViewModel(this._repository); Futurevoid loadUser(String userId) async { try { _user await _repository.getUser(userId); _error null; } catch (e) { _error e.toString(); _user null; } notifyListeners(); } } // View class UserScreen extends StatelessWidget { const UserScreen({super.key}); override Widget build(BuildContext context) { final viewModel Provider.ofUserViewModel(context); return Scaffold( body: viewModel.user ! null ? Text(viewModel.user.name) : const CircularProgressIndicator(), ); } }五、Clean Architecture5.1 架构层次┌─────────────────────────────────────────────────────────────┐ │ Presentation Layer │ │ Widgets, Screens, ViewModels, State Management (Provider) │ ├─────────────────────────────────────────────────────────────┤ │ Domain Layer │ │ Use Cases, Entities, Repository Interfaces │ ├─────────────────────────────────────────────────────────────┤ │ Data Layer │ │ Repositories, Data Sources, Models, API Clients │ └─────────────────────────────────────────────────────────────┘5.2 实体层(Entities)// 领域实体 class User { final String id; final String name; final String email; const User({ required this.id, required this.name, required this.email, }); } // 领域异常 class UserNotFoundException implements Exception { final String message; const UserNotFoundException(this.message); }5.3 用例层(Use Cases)// 抽象用例基类 abstract class UseCaseType, Params { FutureType call(Params params); } // 获取用户用例 class GetUserUseCase extends UseCaseUser, GetUserParams { final UserRepository repository; GetUserUseCase(this.repository); override FutureUser call(GetUserParams params) async { return repository.getUser(params.userId); } } // 参数类 class GetUserParams { final String userId; const GetUserParams(this.userId); }5.4 仓库接口(Repository Interfaces)abstract class UserRepository { FutureUser getUser(String id); FutureListUser getAllUsers(); Futurevoid saveUser(User user); }5.5 数据层实现// 本地数据源 class LocalUserDataSource { FutureUserModel getUser(String id) { // 从本地存储获取 } } // 远程数据源 class RemoteUserDataSource { final Dio dio; RemoteUserDataSource(this.dio); FutureUserModel getUser(String id) async { final response await dio.get(/users/$id); return UserModel.fromJson(response.data); } } // 仓库实现 class UserRepositoryImpl implements UserRepository { final LocalUserDataSource localDataSource; final RemoteUserDataSource remoteDataSource; UserRepositoryImpl({ required this.localDataSource, required this.remoteDataSource, }); override FutureUser getUser(String id) async { try { final remoteUser await remoteDataSource.getUser(id); return remoteUser.toEntity(); } catch (_) { final localUser await localDataSource.getUser(id); return localUser.toEntity(); } } override FutureListUser getAllUsers() { // 实现... } override Futurevoid saveUser(User user) { // 实现... } }5.6 数据模型// 数据模型 class UserModel { final String id; final String name; final String email; UserModel({ required this.id, required this.name, required this.email, }); factory UserModel.fromJson(MapString, dynamic json) { return UserModel( id: json[id], name: json[name], email: json[email], ); } User toEntity() { return User( id: id, name: name, email: email, ); } }5.7 ViewModel层class UserViewModel extends ChangeNotifier { final GetUserUseCase _getUserUseCase; User? _user; String? _error; bool _isLoading false; User? get user _user; String? get error _error; bool get isLoading _isLoading; UserViewModel(this._getUserUseCase); Futurevoid loadUser(String userId) async { _isLoading true; _error null; notifyListeners(); try { _user await _getUserUseCase(GetUserParams(userId)); } catch (e) { _error e.toString(); } _isLoading false; notifyListeners(); } }5.8 依赖注入void setupLocator() { // 数据源 getIt.registerSingletonLocalUserDataSource(LocalUserDataSource()); getIt.registerSingletonRemoteUserDataSource( RemoteUserDataSource(Dio()) ); // 仓库 getIt.registerSingletonUserRepository( UserRepositoryImpl( localDataSource: getIt(), remoteDataSource: getIt(), ) ); // 用例 getIt.registerFactoryGetUserUseCase( () GetUserUseCase(getIt()) ); // ViewModel getIt.registerFactoryUserViewModel( () UserViewModel(getIt()) ); }六、状态管理集成6.1 Provider集成class App extends StatelessWidget { const App({super.key}); override Widget build(BuildContext context) { return MultiProvider( providers: [ ChangeNotifierProvider(create: (_) UserViewModel(getIt())), ], child: MaterialApp( home: UserScreen(), ), ); } }6.2 Riverpod集成final userViewModelProvider ChangeNotifierProviderUserViewModel((ref) { return UserViewModel(getIt()); }); class UserScreen extends ConsumerWidget { const UserScreen({super.key}); override Widget build(BuildContext context, WidgetRef ref) { final viewModel ref.watch(userViewModelProvider); return Scaffold( body: viewModel.isLoading ? const CircularProgressIndicator() : viewModel.user ! null ? Text(viewModel.user!.name) : Text(viewModel.error ?? Unknown error), ); } }七、架构选择建议7.1 根据项目规模选择项目规模推荐架构小型项目MVC中型项目MVVM大型项目Clean Architecture7.2 关键考虑因素可测试性Clean Architecture MVVM MVP MVC代码复杂度Clean Architecture MVVM MVP MVC开发速度MVC MVP MVVM Clean Architecture八、最佳实践8.1 单一职责原则// 每个类只负责一件事 // 避免一个类处理UI、业务逻辑和数据访问8.2 依赖倒置原则// 依赖抽象而不是具体实现 abstract class UserRepository { FutureUser getUser(String id); } class UserRepositoryImpl implements UserRepository { // 实现... }8.3 接口隔离原则// 不要强迫客户端依赖不需要的接口 abstract class ReadOnlyRepository { FutureUser getUser(String id); } abstract class WriteOnlyRepository { Futurevoid saveUser(User user); }8.4 依赖注入// 使用依赖注入容器管理依赖 final locator GetIt.instance;九、总结选择合适的架构是应用成功的关键。Clean Architecture虽然复杂但提供了最好的可维护性和可测试性。对于大型项目推荐使用Clean Architecture对于小型项目可以选择更简单的MVC或MVVM。关键要点根据项目规模选择合适的架构遵循SOLID原则使用依赖注入管理依赖保持层间分离优先考虑可测试性掌握架构设计将使你的Flutter应用更加健壮和可维护。