Flutter Clean Architecture 实践(1)

在Flutter中实现Clean Architecture（干净架构）的实践是一个复杂但非常值得的过程，它能帮助你构建可维护、可扩展和测试性强的应用。以下是一个简化的示例，展示了如何在Flutter项目中应用Clean Architecture的基本原则。由于篇幅限制，这里将重点展示架构的核心部分，包括数据层（Data Layer）、领域层（Domain Layer）和呈现层（Presentation Layer）的分离。

1. 项目结构

首先，我们需要一个合理的项目结构来支持Clean Architecture。以下是一个可能的目录结构：

my_flutter_app/
├── android/
├── ios/
├── lib/
│   ├── data/
│   │   ├── repositories/
│   │   │   └── user_repository.dart
│   │   ├── datasources/
│   │   │   └── user_data_source.dart
│   │   └── models/
│   │       └── user_model.dart
│   ├── domain/
│   │   ├── entities/
│   │   │   └── user.dart
│   │   ├── usecases/
│   │   │   └── get_user_usecase.dart
│   │   └── repositories/
│   │       └── user_repository.dart (Interface)
│   ├── presentation/
│   │   ├── blocs/
│   │   │   └── user_bloc.dart
│   │   ├── pages/
│   │   │   └── user_page.dart
│   │   ├── widgets/
│   │   │   └── user_widget.dart
│   │   └── viewmodels/
│   │       └── user_viewmodel.dart
│   ├── main.dart
└── pubspec.yaml

2. 数据层（Data Layer）

数据层负责数据的获取和持久化。我们定义一个简单的UserDataSource和一个UserRepository。

user_data_source.dart

class UserDataSource {
  Future<UserModel> fetchUserById(String id) async {
    // 模拟数据获取
    return UserModel(id: id, name: "John Doe", email: "john.doe@example.com");
  }
}

user_repository.dart

class UserRepositoryImpl implements UserRepository {
  final UserDataSource dataSource;

  UserRepositoryImpl(this.dataSource);

  @override
  Future<UserModel> getUserById(String id) {
    return dataSource.fetchUserById(id);
  }
}

3. 领域层（Domain Layer）

领域层定义了业务逻辑和实体。我们定义一个User实体和一个GetUserUseCase。

user.dart

class User {
  final String id;
  final String name;
  final String email;

  User({required this.id, required this.name, required this.email});
}

get_user_usecase.dart

class GetUserUseCase {
  final UserRepository userRepository;

  GetUserUseCase(this.userRepository);

  Future<User> execute(String id) async {
    UserModel userModel = await userRepository.getUserById(id);
    return User(id: userModel.id, name: userModel.name, email: userModel.email);
  }
}

4. 呈现层（Presentation Layer）

呈现层负责UI逻辑和展示。我们使用BLoC模式来管理状态和事件。

user_bloc.dart

import 'package:flutter_bloc/flutter_bloc.dart';
import 'get_user_usecase.dart';

class UserState {
  final User? user;
  final bool isLoading;
  final String? error;

  UserState({this.user, this.isLoading = false, this.error});
}

class UserEvent {
  final String userId;

  UserEvent(this.userId);
}

class UserBloc extends Bloc<UserEvent, UserState> {
  final GetUserUseCase getUserUseCase;

  UserBloc(this.getUserUseCase) : super(UserState(isLoading: true));

  @override
  Stream<UserState> mapEventToState(UserEvent event) async* {
    try {
      User user = await getUserUseCase.execute(event.userId);
      yield UserState(user: user, isLoading: false);
    } catch (e) {
      yield UserState(error: e.toString(), isLoading: false);
    }
  }
}

user_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'user_bloc.dart';

class UserPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => UserBloc(GetUserUseCase(UserRepositoryImpl(UserDataSource()))),
      child: Scaffold(
        appBar: AppBar(title: Text('User Info')),
        body: BlocBuilder<UserBloc, UserState>(
          builder: (context, state) {
            if (state.isLoading) {
              return Center(child: CircularProgressIndicator());
            } else if (state.error != null) {
              return Center(child: Text('Error: ${state.error!}'));
            } else {
              return Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('Name: ${state.user?.name}'),
                    Text('Email: ${state.user?.email}'),
                  ],
                ),
              );
            }
          },
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            BlocProvider.of<UserBloc>(context).add(UserEvent('1'));
          },
          tooltip: 'Fetch User',
          child: Icon(Icons.person),
        ),
      ),
    );
  }
}

以上代码展示了如何在Flutter中实现Clean Architecture的基本框架。通过分离关注点，我们提高了代码的可维护性和可扩展性。当然，这只是一个简单的示例，实际应用中可能需要更复杂的逻辑和更多的组件。