Flutter架构示例：Vanilla模式解析与最佳实践-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00021/article/details/148419504

Flutter架构示例：Vanilla模式解析与最佳实践

flutter_architecture_samples TodoMVC for Flutter 项目地址: https://gitcode.com/gh_mirrors/fl/flutter_architecture_samples

前言

在Flutter应用开发中，状态管理是一个核心话题。本文将深入分析基于原生Flutter Widgets的状态管理方案，即Vanilla模式，探讨其设计理念、实现方式以及在实际项目中的应用技巧。

Vanilla模式概述

Vanilla模式是指仅使用Flutter原生提供的Widget和类进行状态管理，不依赖任何第三方状态管理库。这种模式的核心在于合理运用StatefulWidget及其生命周期方法来构建应用状态。

核心优势

零依赖，完全基于Flutter原生能力
学习曲线平缓，适合Flutter初学者
代码结构直观，便于理解和维护

核心设计理念

状态提升（Lifting State Up）

状态提升是Vanilla模式中最关键的设计模式。其核心思想是：当多个Widget需要共享同一状态时，应该将该状态提升到它们最近的共同祖先Widget中。

典型场景分析

假设我们有一个待办事项应用，包含两个标签页：

待办事项列表页
统计信息页

统计信息页需要访问待办事项列表来计算已完成和未完成的数量。这种情况下，我们应该将待办事项列表状态提升到两个标签页的共同父Widget中。

// 状态提升示例代码
class TodoApp extends StatefulWidget {
  @override
  _TodoAppState createState() => _TodoAppState();
}

class _TodoAppState extends State<TodoApp> {
  List<Todo> todos = [];
  
  @override
  Widget build(BuildContext context) {
    return TabBarView(
      children: [
        TodoListTab(todos: todos),
        StatsTab(todos: todos),
      ],
    );
  }
}

通过回调更新状态

状态提升解决了状态共享问题，但如何更新状态呢？Vanilla模式采用回调函数的方式：

父Widget定义状态修改方法
将这些方法作为回调传递给子Widget
子Widget在适当时机调用这些回调

// 回调函数示例
class _TodoAppState extends State<TodoApp> {
  List<Todo> todos = [];
  
  void addTodo(Todo todo) {
    setState(() {
      todos.add(todo);
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return AddTodoScreen(onAddTodo: addTodo);
  }
}

// 子Widget中使用回调
class AddTodoScreen extends StatelessWidget {
  final Function(Todo) onAddTodo;
  
  // 当用户完成表单时
  void _handleSubmit() {
    onAddTodo(newTodo);
  }
}

应用架构解析

Vanilla模式下的典型应用架构通常呈现树状结构：

根Widget (VanillaApp)
├─ 管理核心状态：待办事项列表、加载状态
│
├─ 主标签页屏幕 (MainTabsScreen)
│  ├─ 管理本地状态：当前活动标签、可见性过滤器
│  │
│  ├─ 待办事项列表标签页
│  └─ 统计信息标签页
│
└─ 添加待办事项屏幕 (AddTodoScreen)
   └─ 无状态，仅通过回调与父组件通信

状态管理原则

共享状态上提：多个组件需要访问的状态应放在最近的共同祖先中
本地状态保留：仅单个组件使用的状态应保留在该组件内部
单一数据源：任何数据只应有一个"真实来源"，避免数据不一致

持久化实现

Vanilla示例中实现了本地持久化功能，将待办事项列表序列化为JSON格式并存储在设备磁盘上。关键实现点：

使用path_provider获取应用文档目录
使用dart:io进行文件读写操作
在状态变更时自动保存

// 简化的持久化实现
Future<void> saveTodos(List<Todo> todos) async {
  final directory = await getApplicationDocumentsDirectory();
  final file = File('${directory.path}/todos.json');
  await file.writeAsString(json.encode(todos));
}

测试策略

Vanilla模式提供了两种测试方案：

方案一：Widget内测试

直接在StatefulWidget中测试状态和逻辑
优点：与UI紧密结合
缺点：需要构建Widget树，测试较复杂

方案二：业务逻辑提取

将业务逻辑提取到纯Dart类(PODO)中
优点：测试简单，不依赖Flutter环境
缺点：需要额外架构设计

推荐实践：

UI相关状态：采用方案一
核心业务逻辑：采用方案二

// 业务逻辑提取示例
class TodoRepository {
  List<Todo> todos = [];
  
  void addTodo(Todo todo) {
    todos.add(todo);
  }
  
  // 其他业务方法...
}

// 在Widget中使用
class _TodoAppState extends State<TodoApp> {
  final TodoRepository repository = TodoRepository();
  
  void addTodo(Todo todo) {
    setState(() {
      repository.addTodo(todo);
    });
  }
}