Flutter如何实现MVVM+BLOC架构

“在Flutter中想采用MVVM+BLOC架构开发，但不太清楚具体该如何实现？比如ViewModel和BLOC应该如何分工协作，数据流该怎么处理？有没有比较清晰的项目结构示例或最佳实践可以参考？感觉BLOC本身已经包含状态管理，MVVM的ViewModel层会不会显得冗余？求大佬分享经验！”

2 回复

在Flutter中实现MVVM+BLOC架构可以这样设计：

1. 分层结构：

  • Model：数据层，包含数据模型和API调用
  • ViewModel：业务逻辑层，继承自Bloc/Cubit
  • View：UI层，使用StatelessWidget

2. 实现步骤：

// Model
class User {
  final String name;
  User(this.name);
}

// Repository
class UserRepository {
  Future<User> fetchUser() async {
    // API调用
    return User("张三");
  }
}

// ViewModel (BLoC)
class UserBloc extends Cubit<User?> {
  final UserRepository _repo;
  UserBloc(this._repo) : super(null);
  
  void fetchUser() async {
    final user = await _repo.fetchUser();
    emit(user);
  }
}

// View
class UserView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => UserBloc(UserRepository()),
      child: Scaffold(
        body: BlocBuilder<UserBloc, User?>(
          builder: (context, user) {
            return Text(user?.name ?? '加载中...');
          }
        ),
      ),
    );
  }
}

3. 关键点：

  • 使用flutter_bloc包
  • View通过BlocBuilder监听状态变化
  • ViewModel处理业务逻辑和状态管理
  • 数据单向流动：View -> ViewModel -> Model

这种架构实现了关注点分离，便于测试和维护。

更多关于Flutter如何实现MVVM+BLOC架构的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现MVVM+BLOC架构，可以结合MVVM的分层思想和BLOC的状态管理，以下是实现步骤：

1. 项目结构

lib/
├── models/          # 数据模型
├── repositories/    # 数据层（API/本地数据）
├── view_models/     # ViewModel（处理业务逻辑）
├── blocs/           # BLoC（管理状态）
├── views/           # 界面层
└── main.dart

2. 核心组件实现

Model（数据模型）

class User {
  final String name;
  final int age;
  
  User({required this.name, required this.age});
}

Repository（数据仓库）

class UserRepository {
  Future<User> fetchUser() async {
    // 模拟API调用
    await Future.delayed(Duration(seconds: 1));
    return User(name: "John", age: 25);
  }
}

ViewModel（业务逻辑）

class UserViewModel {
  final UserRepository _repository = UserRepository();
  
  Stream<User> get userStream => _userController.stream;
  final _userController = StreamController<User>();
  
  Future<void> loadUser() async {
    final user = await _repository.fetchUser();
    _userController.sink.add(user);
  }
  
  void dispose() {
    _userController.close();
  }
}

BLoC（状态管理）

class UserBloc {
  final UserViewModel _viewModel = UserViewModel();
  final _stateController = StreamController<User>();
  
  Stream<User> get userState => _stateController.stream;
  
  void loadUser() {
    _viewModel.userStream.listen((user) {
      _stateController.sink.add(user);
    });
    _viewModel.loadUser();
  }
  
  void dispose() {
    _viewModel.dispose();
    _stateController.close();
  }
}

View（界面层）

class UserView extends StatelessWidget {
  final UserBloc _bloc = UserBloc();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder<User>(
        stream: _bloc.userState,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Center(child: Text("User: ${snapshot.data!.name}"));
          }
          return CircularProgressIndicator();
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _bloc.loadUser,
        child: Icon(Icons.refresh),
      ),
    );
  }
}

3. 依赖注入（可选）

使用get_it进行依赖管理：

GetIt locator = GetIt.instance;

void setupLocator() {
  locator.registerLazySingleton(() => UserRepository());
  locator.registerFactory(() => UserViewModel());
}

4. 优势

  • MVVM：分离界面与业务逻辑
  • BLoC：统一状态管理，支持跨组件状态共享
  • 响应式：通过Stream实现数据自动更新

注意事项：

  1. 及时关闭StreamController防止内存泄漏
  2. 复杂场景可使用flutter_bloc库简化BLoC实现
  3. ViewModel应专注于业务逻辑，不包含UI相关代码

此架构适合中大型项目，小型项目可酌情简化层次结构。

回到顶部