跳到主要内容 Flutter 应用架构设计：Clean Architecture 实践 | 极客日志
Dart 大前端
Flutter 应用架构设计：Clean Architecture 实践 Clean Architecture 架构模式在 Flutter 开发中的应用。阐述了其核心原则如依赖规则、关注点分离及依赖倒置。详细划分了表示层、领域层和数据层的职责与依赖关系。通过项目结构组织、实体、用例、仓库接口及数据模型的具体实现示例，展示了如何在 Flutter 中落地该架构。结合 BLoC 状态管理与 GetIt 依赖注入，构建了一个新闻阅读应用的完整案例。最后解析了常见面试题，强调了分层架构对可测试性、可维护性及适应变化的优势，建议根据项目规模灵活调整。
Elasticer 发布于 2026/4/5 更新于 2026/4/13 架构设计模式：Clean Architecture 实践
一、Clean Architecture 概述
1.1 什么是 Clean Architecture
Clean Architecture（简称 CA）是由 Robert C. Martin（Uncle Bob）提出的一种软件架构模式，旨在创建一个独立于框架、UI、数据库和任何外部代理的系统。它通过分离关注点来实现高度可测试、可维护和可扩展的代码库。
在 Flutter 应用开发中，Clean Architecture 的核心价值在于：
独立于框架 ：核心业务逻辑不依赖于 Flutter 框架，使代码更易于迁移和重用
可测试性 ：业务规则可以在没有 UI、数据库或任何外部元素的情况下进行测试
独立于 UI ：UI 可以轻松更改，而不影响系统的其余部分
独立于数据库 ：业务规则不绑定到特定的数据库实现
独立于任何外部代理 ：业务规则不知道外部世界的任何信息
1.2 Clean Architecture 的核心原则 Clean Architecture 基于以下几个核心原则：
依赖规则 ：源代码依赖只能指向内层，内层不应该知道任何关于外层的信息关注点分离 ：将应用程序分为不同的责任层依赖倒置原则 ：高层模块不应该依赖于低层模块，两者都应该依赖于抽象实体封装业务规则 ：实体封装企业范围的业务规则用例封装应用程序特定的业务规则 ：用例编排实体之间的数据流
1.3 Clean Architecture 在 Flutter 中的应用价值 在 Flutter 开发中应用 Clean Architecture 有以下几个显著优势：
代码组织清晰 ：明确的层次结构使团队成员更容易理解和导航代码库可维护性提高 ：由于关注点分离，修改一个部分不会影响其他部分测试更加容易 ：业务逻辑与 UI 和外部依赖分离，使单元测试变得简单适应变化 ：当需求变化时，可以更容易地修改代码而不影响整个系统团队协作效率提升 ：不同团队成员可以同时在不同层上工作，减少冲突
二、Clean Architecture 的层次结构
2.1 典型的 Clean Architecture 层次 Clean Architecture 在 Flutter 中通常分为以下几层：
表示层（Presentation Layer）
包含所有 UI 组件（Widget、Screen、Page）
包含状态管理（Bloc、Provider 等）
负责用户交互和数据展示
领域层（Domain Layer）
包含业务实体（Entities）
包含用例（Use Cases/Interactors）
包含抽象的仓库接口（Repository Interfaces）
是整个架构的核心，不依赖于任何外部层
数据层（Data Layer）
包含仓库实现（Repository Implementations）
包含数据源（Data Sources）：本地数据源和远程数据源
包含数据模型（Data Models）
负责数据的获取和存储
2.2 各层之间的依赖关系 在 Clean Architecture 中，依赖关系是单向的，从外层指向内层：
表示层依赖于领域层，但不知道数据层的存在
领域层不依赖于任何其他层，它是独立的
数据层依赖于领域层（为了实现其接口），但不知道表示层的存在
这种依赖关系通过依赖倒置原则（DIP）实现，即高层模块（领域层）定义接口，低层模块（数据层）实现这些接口。
2.3 数据流向 在 Clean Architecture 中，数据流通常遵循以下路径：
用户交互 ：用户在 UI 上执行操作表示层处理 ：表示层（如 Bloc）接收用户操作并调用相应的用例用例执行 ：用例协调实体和仓库接口来执行业务逻辑数据获取 ：仓库实现从数据源获取数据数据转换 ：数据从数据模型转换为领域实体结果返回 ：结果沿着相同的路径返回到表示层UI 更新 ：表示层更新 UI 以反映新状态
三、在 Flutter 中实现 Clean Architecture
3.1 项目结构组织 一个遵循 Clean Architecture 的 Flutter 项目结构可能如下：
lib/
├── core/
│ ├── error/
│ ├── network/
│ └── utils/
├── data/
│ ├── datasources/
│ │ ├── local /
│ │ └── remote/
│ ├── models/
│ └── repositories/
├── domain/
│ ├── entities/
│ ├── repositories/
│ └── usecases/
├── presentation/
│ ├── bloc/
│ ├── pages/
│ └── widgets/
├── di/
└── main.dart
3.2 领域层实现 领域层是 Clean Architecture 的核心，包含业务实体、用例和仓库接口。
3.2.1 实体（Entities） 实体代表业务对象和业务规则。它们是纯 Dart 类，不依赖于任何框架。
// domain/entities/article.dart
class Article {
final int id;
final String title;
final String content;
final String author;
final DateTime publishDate;
Article({
required this.id,
required this.title,
required this.content,
required this.author,
required this.publishDate,
});
}
3.2.2 仓库接口（Repository Interfaces） // domain/repositories/article_repository.dart
import 'package:dartz/dartz.dart';
import '../entities/article.dart';
import '../../core/error/failures.dart';
abstract class ArticleRepository {
Future<Either<Failure, List<Article>>> getArticles();
Future<Either<Failure, Article>> getArticleById(int id);
Future<Either<Failure, void>> saveArticle(Article article);
}
这里使用了 dartz 包的 Either 类型来处理错误，左侧表示失败，右侧表示成功。
3.2.3 用例（Use Cases） 用例封装了特定的业务逻辑，每个用例通常只做一件事。
// domain/usecases/get_articles.dart
import 'package:dartz/dartz.dart';
import '../entities/article.dart';
import '../repositories/article_repository.dart';
import '../../core/error/failures.dart';
class GetArticles {
final ArticleRepository repository;
GetArticles(this.repository);
Future<Either<Failure, List<Article>>> call() {
return repository.getArticles();
}
}
// domain/usecases/toggle_favorite_article.dart
import 'package:dartz/dartz.dart';
import '../entities/article.dart';
import '../repositories/article_repository.dart';
import '../../core/error/failures.dart';
import '../../core/usecases/usecase.dart';
class ToggleFavoriteArticle implements UseCase<void, Article> {
final ArticleRepository repository;
ToggleFavoriteArticle(this.repository);
@override
Future<Either<Failure, void>> call(Article article) {
final updatedArticle = article.copyWith(isFavorite: !article.isFavorite);
return repository.saveArticle(updatedArticle);
}
}
// domain/usecases/get_article_by_id.dart
import 'package:dartz/dartz.dart';
import '../entities/article.dart';
import '../repositories/article_repository.dart';
import '../../core/error/failures.dart';
import '../../core/usecases/usecase.dart';
class GetArticleById implements UseCase<Article, int> {
final ArticleRepository repository;
GetArticleById(this.repository);
@override
Future<Either<Failure, Article>> call(int id) {
return repository.getArticleById(id);
}
}
3.3 数据层实现 数据层负责从各种来源获取数据并将其转换为领域实体。
3.3.1 数据模型（Data Models） 数据模型是实体的具体实现，通常包含序列化和反序列化逻辑。
// data/models/article_model.dart
import '../../domain/entities/article.dart';
class ArticleModel extends Article {
ArticleModel({
required int id,
required String title,
required String content,
required String author,
required DateTime publishDate,
}) : super(
id: id,
title: title,
content: content,
author: author,
publishDate: publishDate,
);
factory ArticleModel.fromJson(Map<String, dynamic> json) {
return ArticleModel(
id: json['id'],
title: json['title'],
content: json['content'],
author: json['author'],
publishDate: DateTime.parse(json['publish_date']),
);
}
Map<String, dynamic> toJson() {
return {
'id': id,
'title': title,
'content': content,
'author': author,
'publish_date': publishDate.toIso8601String(),
};
}
}
3.3.2 数据源（Data Sources） 数据源负责从特定来源（如 API 或本地数据库）获取数据。
// data/datasources/remote/article_remote_data_source.dart
import '../models/article_model.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
abstract class ArticleRemoteDataSource {
Future<List<ArticleModel>> getArticles();
Future<ArticleModel> getArticleById(int id);
}
class ArticleRemoteDataSourceImpl implements ArticleRemoteDataSource {
final http.Client client;
ArticleRemoteDataSourceImpl({required this.client});
@override
Future<List<ArticleModel>> getArticles() async {
final response = await client.get(
Uri.parse('https://api.example.com/articles'),
headers: {'Content-Type': 'application/json'},
);
if (response.statusCode == 200) {
final List<dynamic> jsonList = json.decode(response.body);
return jsonList.map((json) => ArticleModel.fromJson(json)).toList();
} else {
throw ServerException();
}
}
@override
Future<ArticleModel> getArticleById(int id) async {
final response = await client.get(
Uri.parse('https://api.example.com/articles/$id'),
headers: {'Content-Type': 'application/json'},
);
if (response.statusCode == 200) {
return ArticleModel.fromJson(json.decode(response.body));
} else {
throw ServerException();
}
}
}
3.3.3 仓库实现（Repository Implementations） 仓库实现负责协调不同的数据源并实现领域层定义的仓库接口。
// data/repositories/article_repository_impl.dart
import 'package:dartz/dartz.dart';
import '../../domain/entities/article.dart';
import '../../domain/repositories/article_repository.dart';
import '../datasources/remote/article_remote_data_source.dart';
import '../datasources/local/article_local_data_source.dart';
import '../../core/error/failures.dart';
import '../../core/network/network_info.dart';
class ArticleRepositoryImpl implements ArticleRepository {
final ArticleRemoteDataSource remoteDataSource;
final ArticleLocalDataSource localDataSource;
final NetworkInfo networkInfo;
ArticleRepositoryImpl({
required this.remoteDataSource,
required this.localDataSource,
required this.networkInfo,
});
@override
Future<Either<Failure, List<Article>>> getArticles() async {
if (await networkInfo.isConnected) {
try {
final remoteArticles = await remoteDataSource.getArticles();
localDataSource.cacheArticles(remoteArticles);
return Right(remoteArticles);
} on ServerException {
return Left(ServerFailure());
}
} else {
try {
final localArticles = await localDataSource.getLastArticles();
return Right(localArticles);
} on CacheException {
return Left(CacheFailure());
}
}
}
@override
Future<Either<Failure, Article>> getArticleById(int id) async {
// 类似的实现逻辑
}
@override
Future<Either<Failure, void>> saveArticle(Article article) async {
// 实现保存文章的逻辑
}
}
3.4 表示层实现 表示层负责 UI 和用户交互，在 Flutter 中通常使用 BLoC、Provider 或其他状态管理解决方案。
3.4.1 使用 BLoC 进行状态管理 // presentation/bloc/article/article_event.dart
import 'package:equatable/equatable.dart';
abstract class ArticleEvent extends Equatable {
@override
List<Object> get props => [];
}
class GetArticlesEvent extends ArticleEvent {}
class GetArticleByIdEvent extends ArticleEvent {
final int id;
GetArticleByIdEvent(this.id);
@override
List<Object> get props => [id];
}
// presentation/bloc/article/article_state.dart
import 'package:equatable/equatable.dart';
import '../../../domain/entities/article.dart';
abstract class ArticleState extends Equatable {
@override
List<Object> get props => [];
}
class ArticleInitial extends ArticleState {}
class ArticleLoading extends ArticleState {}
class ArticlesLoaded extends ArticleState {
final List<Article> articles;
ArticlesLoaded(this.articles);
@override
List<Object> get props => [articles];
}
class ArticleLoaded extends ArticleState {
final Article article;
ArticleLoaded(this.article);
@override
List<Object> get props => [article];
}
class ArticleError extends ArticleState {
final String message;
ArticleError(this.message);
@override
List<Object> get props => [message];
}
// presentation/bloc/article/article_bloc.dart
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../domain/usecases/get_articles.dart';
import '../../../domain/usecases/get_article_by_id.dart';
import 'article_event.dart';
import 'article_state.dart';
class ArticleBloc extends Bloc<ArticleEvent, ArticleState> {
final GetArticles getArticles;
final GetArticleById getArticleById;
ArticleBloc({
required this.getArticles,
required this.getArticleById,
}) : super(ArticleInitial()) {
on<GetArticlesEvent>(_onGetArticles);
on<GetArticleByIdEvent>(_onGetArticleById);
}
Future<void> _onGetArticles(GetArticlesEvent event, Emitter<ArticleState> emit) async {
emit(ArticleLoading());
final result = await getArticles();
result.fold(
(failure) => emit(ArticleError(_mapFailureToMessage(failure))),
(articles) => emit(ArticlesLoaded(articles)),
);
}
Future<void> _onGetArticleById(GetArticleByIdEvent event, Emitter<ArticleState> emit) async {
emit(ArticleLoading());
final result = await getArticleById(event.id);
result.fold(
(failure) => emit(ArticleError(_mapFailureToMessage(failure))),
(article) => emit(ArticleLoaded(article)),
);
}
String _mapFailureToMessage(Failure failure) {
switch (failure.runtimeType) {
case ServerFailure:
return '服务器错误';
case CacheFailure:
return '缓存错误';
default:
return '未知错误';
}
}
}
3.4.2 UI 实现 // presentation/pages/articles_page.dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../bloc/article/article_bloc.dart';
import '../bloc/article/article_event.dart';
import '../bloc/article/article_state.dart';
import '../widgets/article_list_item.dart';
class ArticlesPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('文章列表')),
body: BlocBuilder<ArticleBloc, ArticleState>(
builder: (context, state) {
if (state is ArticleInitial) {
BlocProvider.of<ArticleBloc>(context).add(GetArticlesEvent());
return Center(child: Text('加载中...'));
} else if (state is ArticleLoading) {
return Center(child: CircularProgressIndicator());
} else if (state is ArticlesLoaded) {
return ListView.builder(
itemCount: state.articles.length,
itemBuilder: (context, index) {
return ArticleListItem(article: state.articles[index]);
},
);
} else if (state is ArticleError) {
return Center(child: Text(state.message));
} else {
return Center(child: Text('未知状态'));
}
},
),
);
}
}
3.5 依赖注入 依赖注入是 Clean Architecture 的重要组成部分，它使各层之间的依赖关系更加清晰和可测试。在 Flutter 中，可以使用 get_it 包实现依赖注入。
// di/injection_container.dart
import 'package:get_it/get_it.dart';
import 'package:http/http.dart' as http;
import 'package:internet_connection_checker/internet_connection_checker.dart';
import 'package:shared_preferences/shared_preferences.dart';
import '../data/datasources/local/article_local_data_source.dart';
import '../data/datasources/remote/article_remote_data_source.dart';
import '../data/repositories/article_repository_impl.dart';
import '../domain/repositories/article_repository.dart';
import '../domain/usecases/get_articles.dart';
import '../domain/usecases/get_article_by_id.dart';
import '../presentation/bloc/article/article_bloc.dart';
import '../core/network/network_info.dart';
final sl = GetIt.instance;
Future<void> init() async {
// Bloc
sl.registerFactory(() => ArticleBloc(
getArticles: sl(),
getArticleById: sl(),
));
// Use cases
sl.registerLazySingleton(() => GetArticles(sl()));
sl.registerLazySingleton(() => GetArticleById(sl()));
// Repository
sl.registerLazySingleton<ArticleRepository>(() => ArticleRepositoryImpl(
remoteDataSource: sl(),
localDataSource: sl(),
networkInfo: sl(),
));
// Data sources
sl.registerLazySingleton<ArticleRemoteDataSource>(() => ArticleRemoteDataSourceImpl(client: sl()));
sl.registerLazySingleton<ArticleLocalDataSource>(() => ArticleLocalDataSourceImpl(sharedPreferences: sl()));
// Core
sl.registerLazySingleton<NetworkInfo>(() => NetworkInfoImpl(sl()));
// External
final sharedPreferences = await SharedPreferences.getInstance();
sl.registerLazySingleton(() => sharedPreferences);
sl.registerLazySingleton(() => http.Client());
sl.registerLazySingleton(() => InternetConnectionChecker());
}
四、实战案例：新闻阅读应用
4.1 需求分析
显示新闻文章列表
查看文章详情
保存文章到收藏夹
离线阅读功能
4.2 领域建模 // domain/entities/article.dart
class Article {
final int id;
final String title;
final String content;
final String author;
final DateTime publishDate;
final String imageUrl;
final bool isFavorite;
Article({
required this.id,
required this.title,
required this.content,
required this.author,
required this.publishDate,
required this.imageUrl,
this.isFavorite = false,
});
Article copyWith({
int? id,
String? title,
String? content,
String? author,
DateTime? publishDate,
String? imageUrl,
bool? isFavorite,
}) {
return Article(
id: id ?? this.id,
title: title ?? this.title,
content: content ?? this.content,
author: author ?? this.author,
publishDate: publishDate ?? this.publishDate,
imageUrl: imageUrl ?? this.imageUrl,
isFavorite: isFavorite ?? this.isFavorite,
);
}
}
4.3 用例实现 // domain/usecases/get_articles.dart
import 'package:dartz/dartz.dart';
import '../entities/article.dart';
import '../repositories/article_repository.dart';
import '../../core/error/failures.dart';
import '../../core/usecases/usecase.dart';
class GetArticles implements UseCase<List<Article>, NoParams> {
final ArticleRepository repository;
GetArticles(this.repository);
@override
Future<Either<Failure, List<Article>>> call(NoParams params) {
return repository.getArticles();
}
}
// domain/usecases/toggle_favorite_article.dart
import 'package:dartz/dartz.dart';
import '../entities/article.dart';
import '../repositories/article_repository.dart';
import '../../core/error/failures.dart';
import '../../core/usecases/usecase.dart';
class ToggleFavoriteArticle implements UseCase<void, Article> {
final ArticleRepository repository;
ToggleFavoriteArticle(this.repository);
@override
Future<Either<Failure, void>> call(Article article) {
final updatedArticle = article.copyWith(isFavorite: !article.isFavorite);
return repository.saveArticle(updatedArticle);
}
}
// domain/usecases/get_article_by_id.dart
import 'package:dartz/dartz.dart';
import '../entities/article.dart';
import '../repositories/article_repository.dart';
import '../../core/error/failures.dart';
import '../../core/usecases/usecase.dart';
class GetArticleById implements UseCase<Article, int> {
final ArticleRepository repository;
GetArticleById(this.repository);
@override
Future<Either<Failure, Article>> call(int id) {
return repository.getArticleById(id);
}
}
4.4 数据层实现 // data/models/article_model.dart
import '../../domain/entities/article.dart';
class ArticleModel extends Article {
ArticleModel({
required int id,
required String title,
required String content,
required String author,
required DateTime publishDate,
required String imageUrl,
bool isFavorite = false,
}) : super(
id: id,
title: title,
content: content,
author: author,
publishDate: publishDate,
imageUrl: imageUrl,
isFavorite: isFavorite,
);
factory ArticleModel.fromJson(Map<String, dynamic> json) {
return ArticleModel(
id: json['id'],
title: json['title'],
content: json['content'],
author: json['author'],
publishDate: DateTime.parse(json['publish_date']),
imageUrl: json['image_url'],
isFavorite: json['is_favorite'] ?? false,
);
}
Map<String, dynamic> toJson() {
return {
'id': id,
'title': title,
'content': content,
'author': author,
'publish_date': publishDate.toIso8601String(),
'image_url': imageUrl,
'is_favorite': isFavorite,
};
}
}
4.4.2 仓库实现 // data/repositories/article_repository_impl.dart
import 'package:dartz/dartz.dart';
import '../../domain/entities/article.dart';
import '../../domain/repositories/article_repository.dart';
import '../../core/error/failures.dart';
class ArticleRepositoryImpl implements ArticleRepository {
// 模拟数据
final List<Article> _articles = [
Article(
id: 1,
title: 'Flutter Clean Architecture',
content: 'Clean Architecture is a software design philosophy...',
author: 'Robert C. Martin',
publishDate: DateTime.now(),
imageUrl: 'https://example.com/clean_arch.png',
),
Article(
id: 2,
title: 'Dart 3.0 Features',
content: 'Dart 3.0 introduces patterns, records, and class modifiers...',
author: 'Dart Team',
publishDate: DateTime.now().subtract(Duration(days: 2)),
imageUrl: 'https://example.com/dart.png',
),
];
@override
Future<Either<Failure, List<Article>>> getArticles() async {
// 模拟网络延迟
await Future.delayed(Duration(milliseconds: 800));
return Right(_articles);
}
@override
Future<Either<Failure, Article>> getArticleById(int id) async {
await Future.delayed(Duration(milliseconds: 500));
try {
final article = _articles.firstWhere((element) => element.id == id);
return Right(article);
} catch (e) {
return Left(ServerFailure());
}
}
@override
Future<Either<Failure, void>> saveArticle(Article article) async {
await Future.delayed(Duration(milliseconds: 500));
final index = _articles.indexWhere((element) => element.id == article.id);
if (index != -1) {
_articles[index] = article;
return Right(null);
} else {
return Left(ServerFailure());
}
}
}
4.5 表示层实现
4.5.1 定义 BLoC // presentation/bloc/article_list/article_list_bloc.dart
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../domain/usecases/get_articles.dart';
import '../../../core/usecases/usecase.dart';
import 'article_list_event.dart';
import 'article_list_state.dart';
class ArticleListBloc extends Bloc<ArticleListEvent, ArticleListState> {
final GetArticles getArticles;
ArticleListBloc({required this.getArticles}) : super(ArticleListInitial()) {
on<GetArticlesEvent>(_onGetArticles);
}
Future<void> _onGetArticles(GetArticlesEvent event, Emitter<ArticleListState> emit) async {
emit(ArticleListLoading());
final result = await getArticles(NoParams());
result.fold(
(failure) => emit(ArticleListError('加载失败')),
(articles) => emit(ArticleListLoaded(articles)),
);
}
}
// presentation/bloc/article_detail/article_detail_event.dart
abstract class ArticleDetailEvent {}
class GetArticleDetailEvent extends ArticleDetailEvent {
final int id;
GetArticleDetailEvent(this.id);
}
class ToggleFavoriteEvent extends ArticleDetailEvent {
final Article article;
ToggleFavoriteEvent(this.article);
}
// presentation/bloc/article_detail/article_detail_state.dart
abstract class ArticleDetailState {}
class ArticleDetailInitial extends ArticleDetailState {}
class ArticleDetailLoading extends ArticleDetailState {}
class ArticleDetailLoaded extends ArticleDetailState {
final Article article;
ArticleDetailLoaded(this.article);
}
class ArticleDetailError extends ArticleDetailState {
final String message;
ArticleDetailError(this.message);
}
// presentation/bloc/article_detail/article_detail_bloc.dart
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../domain/usecases/get_article_by_id.dart';
import '../../../domain/usecases/toggle_favorite_article.dart';
import 'article_detail_event.dart';
import 'article_detail_state.dart';
class ArticleDetailBloc extends Bloc<ArticleDetailEvent, ArticleDetailState> {
final GetArticleById getArticleById;
final ToggleFavoriteArticle toggleFavoriteArticle;
ArticleDetailBloc({
required this.getArticleById,
required this.toggleFavoriteArticle,
}) : super(ArticleDetailInitial()) {
on<GetArticleDetailEvent>(_onGetArticleDetail);
on<ToggleFavoriteEvent>(_onToggleFavorite);
}
Future<void> _onGetArticleDetail(
GetArticleDetailEvent event,
Emitter<ArticleDetailState> emit,
) async {
emit(ArticleDetailLoading());
final result = await getArticleById(event.id);
result.fold(
(failure) => emit(ArticleDetailError('加载失败')),
(article) => emit(ArticleDetailLoaded(article)),
);
}
Future<void> _onToggleFavorite(
ToggleFavoriteEvent event,
Emitter<ArticleDetailState> emit,
) async {
if (state is ArticleDetailLoaded) {
final result = await toggleFavoriteArticle(event.article);
result.fold(
(failure) => emit(ArticleDetailError('操作失败')),
(_) {
final updatedArticle = event.article.copyWith(
isFavorite: !event.article.isFavorite,
);
emit(ArticleDetailLoaded(updatedArticle));
},
);
}
}
}
4.5.2 文章列表页面 // presentation/pages/article_list_page.dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../bloc/article_list/article_list_bloc.dart';
import '../bloc/article_list/article_list_event.dart';
import '../bloc/article_list/article_list_state.dart';
import 'article_detail_page.dart';
class ArticleListPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('每日新闻')),
body: BlocProvider(
create: (_) => sl<ArticleListBloc>()..add(GetArticlesEvent()),
child: BlocBuilder<ArticleListBloc, ArticleListState>(
builder: (context, state) {
if (state is ArticleListLoading) {
return Center(child: CircularProgressIndicator());
} else if (state is ArticleListLoaded) {
return ListView.builder(
itemCount: state.articles.length,
itemBuilder: (context, index) {
final article = state.articles[index];
return ListTile(
leading: CircleAvatar(child: Text(article.author[0])),
title: Text(article.title),
subtitle: Text(article.publishDate.toString().substring(0, 10)),
trailing: Icon(
article.isFavorite ? Icons.favorite : Icons.favorite_border,
color: article.isFavorite ? Colors.red : null,
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => ArticleDetailPage(articleId: article.id),
),
).then((_) {
// 返回时刷新列表
context.read<ArticleListBloc>().add(GetArticlesEvent());
});
},
);
},
);
} else if (state is ArticleListError) {
return Center(child: Text(state.message));
}
return Container();
},
),
),
);
}
}
4.5.3 文章详情页面 // presentation/pages/article_detail_page.dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../di/injection_container.dart';
import '../bloc/article_detail/article_detail_bloc.dart';
import '../bloc/article_detail/article_detail_event.dart';
import '../bloc/article_detail/article_detail_state.dart';
class ArticleDetailPage extends StatelessWidget {
final int articleId;
const ArticleDetailPage({Key? key, required this.articleId}) : super(key: key);
@override
Widget build(BuildContext context) {
// 这里的 sl 是 GetIt 实例
return BlocProvider(
create: (context) => sl<ArticleDetailBloc>()..add(GetArticleDetailEvent(articleId)),
child: Scaffold(
appBar: AppBar(title: Text('文章详情')),
body: BlocBuilder<ArticleDetailBloc, ArticleDetailState>(
builder: (context, state) {
if (state is ArticleDetailLoading) {
return Center(child: CircularProgressIndicator());
} else if (state is ArticleDetailLoaded) {
final article = state.article;
return SingleChildScrollView(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 200,
color: Colors.grey[300],
child: Center(child: Text('Image: ${article.imageUrl}')),
),
SizedBox(height: 16),
Text(
article.title,
style: Theme.of(context).textTheme.headline5,
),
SizedBox(height: 8),
Row(
children: [
Text('作者：${article.author}'),
Spacer(),
Text('发布日期：${article.publishDate.toString().substring(0, 10)}'),
],
),
SizedBox(height: 16),
Text(article.content),
],
),
);
} else if (state is ArticleDetailError) {
return Center(child: Text(state.message));
}
return Container();
},
),
floatingActionButton: BlocBuilder<ArticleDetailBloc, ArticleDetailState>(
builder: (context, state) {
if (state is ArticleDetailLoaded) {
return FloatingActionButton(
onPressed: () {
context.read<ArticleDetailBloc>().add(ToggleFavoriteEvent(state.article));
},
child: Icon(
state.article.isFavorite ? Icons.favorite : Icons.favorite_border,
),
);
}
return SizedBox.shrink();
},
),
),
);
}
}
4.6 依赖注入配置 // di/injection_container.dart
import 'package:get_it/get_it.dart';
import '../data/repositories/article_repository_impl.dart';
import '../domain/repositories/article_repository.dart';
import '../domain/usecases/get_articles.dart';
import '../domain/usecases/get_article_by_id.dart';
import '../domain/usecases/toggle_favorite_article.dart';
import '../presentation/bloc/article_list/article_list_bloc.dart';
import '../presentation/bloc/article_detail/article_detail_bloc.dart';
final sl = GetIt.instance;
Future<void> init() async {
// BLoC
sl.registerFactory(() => ArticleListBloc(getArticles: sl()));
sl.registerFactory(() => ArticleDetailBloc(
getArticleById: sl(),
toggleFavoriteArticle: sl(),
));
// Use Cases
sl.registerLazySingleton(() => GetArticles(sl()));
sl.registerLazySingleton(() => GetArticleById(sl()));
sl.registerLazySingleton(() => ToggleFavoriteArticle(sl()));
// Repository
sl.registerLazySingleton<ArticleRepository>(() => ArticleRepositoryImpl());
}
4.7 应用入口 // main.dart
import 'package:flutter/material.dart';
import 'di/injection_container.dart' as di;
import 'presentation/pages/article_list_page.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await di.init();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Clean Architecture Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: ArticleListPage(),
);
}
}
五、常见面试题解析
5.1 Clean Architecture 有哪些主要优点？
独立于框架 ：核心业务逻辑不依赖于 UI 框架，使得框架升级或更换更加容易。可测试性 ：由于业务逻辑与 UI 和外部依赖（如数据库、网络）分离，可以轻松编写单元测试。独立于 UI ：UI 的改变不会影响业务逻辑。独立于数据库 ：业务规则不绑定到特定的数据库实现。关注点分离 ：明确的层次结构使得代码更易于维护和理解。
5.2 为什么在 Domain 层定义 Repository 接口，而在 Data 层实现它？ 答 ：这体现了依赖倒置原则（Dependency Inversion Principle） 。
Domain 层是高层模块，包含核心业务逻辑，不应该依赖于低层模块（如 Data 层）。
通过在 Domain 层定义接口，我们让 Data 层依赖于 Domain 层（实现接口），从而反转了依赖关系。
这样，Domain 层就保持了独立性，不依赖于任何外部实现细节。
5.3 实体（Entity）和数据模型（Model）有什么区别？
实体（Entity） ：位于 Domain 层，是纯粹的业务对象，只包含业务数据和业务规则，不依赖于任何框架或序列化机制（如 JSON 转换）。数据模型（Model） ：位于 Data 层，通常是实体的子类或包装类。它负责处理数据传输（DTO）和数据转换（如 JSON 序列化/反序列化、数据库映射）。这种分离确保了外部数据格式的变化不会影响核心业务逻辑。
5.4 什么是 UseCase（用例）？它有什么作用？ 答 ：UseCase（也称为 Interactor）位于 Domain 层，它封装了特定的业务逻辑场景。
每个 UseCase 通常只负责一个单一的任务（如'获取文章列表'、'登录'）。
它协调 Repository 和 Entity 来完成业务目标。
UseCase 使得业务逻辑更加清晰、可复用，并且符合单一职责原则。
六、总结 Clean Architecture 虽然在初期会增加一些代码量和复杂性，但它为大型 Flutter 应用提供了坚实的架构基础。通过将应用分层，我们实现了关注点分离，使得代码更加清晰、可测试和可维护。
在实际开发中，不必教条式地遵守每一条规则，而应根据项目规模和团队情况灵活调整。对于小型项目，可能不需要如此严格的分层；但对于长期维护的中大型项目，Clean Architecture 绝对是一个值得投资的选择。
通过本文的实践，我们不仅学习了 Clean Architecture 的理论知识，还通过一个完整的案例掌握了其落地实施的方法。希望这些内容能帮助你在未来的 Flutter 开发中构建出更高质量的应用。
微信扫一扫，关注极客日志 微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
相关免费在线工具 Base64 字符串编码/解码 将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器 将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
Markdown 转 HTML 将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
HTML 转 Markdown 将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
JSON 压缩 通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
JSON美化和格式化 将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online
