mobx.dart实战教程：构建完整的待办事项应用
项目地址: https://gitcode.com/gh_mirrors/mo/mobx.dart mobx.dart是Dart语言的响应式状态管理库，为Dart和Flutter应用提供轻松的状态管理解决方案。通过使用mobx.dart，开发者可以构建出响应式且易于维护的应用程序，让状态管理变得简单而高效。
一、mobx.dart核心概念解析
mobx.dart基于三个核心概念构建：Observables（可观察对象）、Actions（动作）和Reactions（反应）。这三个概念构成了mobx.dart的核心架构，共同协作实现响应式状态管理。
1.1 Observables（可观察对象）
Observables是应用程序状态的持有者，它们可以是简单的变量、列表、映射等。当可观察对象的值发生变化时，所有依赖它的Reactions都会自动更新。
1.2 Actions（动作）
Actions是修改Observables的函数。通过将状态修改操作封装在Actions中，mobx.dart可以跟踪状态的变化，确保状态修改的可预测性和可调试性。
1.3 Reactions（反应）
Reactions是响应Observables变化的函数。当依赖的Observables发生变化时，Reactions会自动执行，从而更新UI或执行其他副作用操作。
二、环境搭建与项目初始化
2.1 安装mobx.dart依赖
要使用mobx.dart，需要在pubspec.yaml文件中添加以下依赖：
dependencies:
mobx: ^2.2.0
flutter_mobx: ^2.0.6
dev_dependencies:
mobx_codegen: ^2.2.0
build_runner: ^2.1.10
2.2 克隆项目仓库
git clone https://gitcode.com/gh_mirrors/mo/mobx.dart
三、构建待办事项应用
3.1 创建Todo模型
首先，我们需要创建一个Todo模型来表示待办事项：
// lib/todo.dart
class Todo {
final String id;
final String title;
bool completed;
Todo({
required this.id,
required this.title,
this.completed = false,
});
}
3.2 创建TodoStore
接下来，创建一个TodoStore来管理待办事项的状态：
// lib/todo_store.dart
import 'package:mobx/mobx.dart';
import 'todo.dart';
part 'todo_store.g.dart';
class TodoStore = _TodoStore with _$TodoStore;
abstract class _TodoStore with Store {
@observable
ObservableList<Todo> todos = ObservableList<Todo>();
@computed
int get pendingTodos => todos.where((todo) => !todo.completed).length;
@computed
int get completedTodos => todos.where((todo) => todo.completed).length;
@action
void addTodo(String title) {
final todo = Todo(
id: DateTime.now().toString(),
title: title,
);
todos.add(todo);
}
@action
void toggleTodo(String id) {
final index = todos.indexWhere((todo) => todo.id == id);
if (index != -1) {
todos[index].completed = !todos[index].completed;
}
}
@action
void removeTodo(String id) {
todos.removeWhere((todo) => todo.id == id);
}
@action
void markAllCompleted() {
for (final todo in todos) {
todo.completed = true;
}
}
@action
void removeCompleted() {
todos.removeWhere((todo) => todo.completed);
}
}
3.3 生成代码
运行以下命令生成mobx代码：
flutter pub run build_runner watch
3.4 创建UI组件
最后，创建一个Flutter界面来展示和操作待办事项：
// lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'todo_store.dart';
void main() {
final todoStore = TodoStore();
runApp(MyApp(todoStore: todoStore));
}
class MyApp extends StatelessWidget {
final TodoStore todoStore;
const MyApp({required this.todoStore});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MobX Todo App',
theme: ThemeData(primarySwatch: Colors.blue),
home: TodoScreen(todoStore: todoStore),
);
}
}
class TodoScreen extends StatelessWidget {
final TodoStore todoStore;
final TextEditingController _textController = TextEditingController();
TodoScreen({required this.todoStore});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Todos')),
body: Column(
children: [
Padding(
padding: EdgeInsets.all(8.0),
child: TextField(
controller: _textController,
decoration: InputDecoration(labelText: 'Add a Todo'),
onSubmitted: (value) {
if (value.isNotEmpty) {
todoStore.addTodo(value);
_textController.clear();
}
},
),
),
Observer(
builder: (_) => Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: todoStore.removeCompleted,
child: Text('Remove Completed'),
),
ElevatedButton(
onPressed: todoStore.markAllCompleted,
child: Text('Mark All Completed'),
),
],
),
Text('${todoStore.pendingTodos} pending, ${todoStore.completedTodos} completed'),
Expanded(
child: ListView.builder(
itemCount: todoStore.todos.length,
itemBuilder: (_, index) {
final todo = todoStore.todos[index];
return ListTile(
leading: Checkbox(
value: todo.completed,
onChanged: (_) => todoStore.toggleTodo(todo.id),
),
title: Text(todo.title),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () => todoStore.removeTodo(todo.id),
),
);
},
),
),
],
),
),
],
),
);
}
}
四、待办事项应用功能展示
完成上述步骤后，你将得到一个功能完善的待办事项应用。该应用允许你添加、标记完成、删除待办事项，以及批量操作。
五、总结
通过本教程，你学习了如何使用mobx.dart构建一个完整的待办事项应用。mobx.dart的响应式状态管理让应用开发变得更加简单和高效。你可以在mobx_examples/lib/todos/目录下找到完整的示例代码。
mobx.dart不仅适用于待办事项应用，还可以用于构建更复杂的应用程序。它的灵活性和简洁性使得状态管理不再是开发中的痛点，而是成为一种乐趣。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
