Flutter 应用架构设计：Clean Architecture 实践

2.2 各层之间的依赖关系

在 Clean Architecture 中，依赖关系是单向的，从外层指向内层：

表示层 → 领域层 ← 数据层 

• 表示层依赖于领域层，但不知道数据层的存在
• 领域层不依赖于任何其他层，它是独立的
• 数据层依赖于领域层（为了实现其接口），但不知道表示层的存在

这种依赖关系通过依赖倒置原则（DIP）实现，即高层模块（领域层）定义接口，低层模块（数据层）实现这些接口。

2.3 数据流向

在 Clean Architecture 中，数据流通常遵循以下路径：

1. 用户交互：用户在 UI 上执行操作
2. 表示层处理：表示层（如 Bloc）接收用户操作并调用相应的用例
3. 用例执行：用例协调实体和仓库接口来执行业务逻辑
4. 数据获取：仓库实现从数据源获取数据
5. 数据转换：数据从数据模型转换为领域实体
6. 结果返回：结果沿着相同的路径返回到表示层
7. 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 需求分析

我们将构建一个简单的新闻阅读应用，具有以下功能：

1. 显示新闻文章列表
2. 查看文章详情
3. 保存文章到收藏夹
4. 离线阅读功能

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 有哪些主要优点？

答：

1. 独立于框架：核心业务逻辑不依赖于 UI 框架，使得框架升级或更换更加容易。
2. 可测试性：由于业务逻辑与 UI 和外部依赖（如数据库、网络）分离，可以轻松编写单元测试。
3. 独立于 UI：UI 的改变不会影响业务逻辑。
4. 独立于数据库：业务规则不绑定到特定的数据库实现。
5. 关注点分离：明确的层次结构使得代码更易于维护和理解。

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 开发中构建出更高质量的应用。