Flutter动态内容生成插件Slices的使用

Slices 是一个极简状态管理库，专注于需要全局状态的应用程序，其中不同的“片段”会监听同一个状态源的变化。

它在一定程度上受到 Redux 的启发，并且非常依赖不可变性和相等性。

动机

这个包有一个非常简单且有些“幼稚”的状态管理实现。它是一段简单的代码，最初诞生于 Fire Atlas Editor 中，由于它在那种类型的应用程序中表现良好，作者将其提取为一个包，以便在未来具有类似需求的应用程序中使用。

因此，如果你决定使用此包，请记住这一点。以下是更好的替代方案：

• Fountain: 有类似的思路，但更成熟。
• Flutter Bloc: 在 Flutter 中非常成熟且流行的解决方案。

如何使用

未来可能会有更好的文档。目前，要了解如何使用此库，请查看 示例。

示例代码

以下是一个完整的示例，展示了如何使用 Slices 插件来管理 Todo 列表的状态。

文件结构

example/
├── lib/
│   ├── main.dart
│   ├── store.dart
│   ├── todo_form.dart
│   └── todo_list.dart

main.dart

// 导入必要的库
import 'package:example/store.dart'; // 自定义状态管理逻辑
import 'package:example/todo_form.dart'; // 添加任务的表单组件
import 'package:example/todo_list.dart'; // 显示任务列表的组件
import 'package:flutter/material.dart'; // Flutter 核心库
import 'package:slices/slices.dart'; // Slices 状态管理库

// 定义初始状态
final store = SlicesStore<TodoState>(TodoState());

void main() {
  runApp(MyApp()); // 启动应用程序
}

// 应用程序根组件
class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Slices 示例', // 应用程序名称
      theme: ThemeData(
        primarySwatch: Colors.blue, // 主题颜色
      ),
      home: TodoApp(), // 主页面
    );
  }
}

// 主页面
class TodoApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: SlicesProvider<TodoState>(
          // 提供状态管理器
          store: store,
          child: Center(
            child: Column(
              children: [
                // 展示任务列表
                Expanded(child: TodoList()),
                // 添加任务的表单
                TodoForm(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

store.dart

// 定义状态类
class TodoState {
  final List<String> todos;

  TodoState({this.todos = const []});

  // 创建新的状态对象
  TodoState copyWith({List<String>? todos}) {
    return TodoState(todos: todos ?? this.todos);
  }
}

// 定义动作
class AddTodoAction {
  final String todo;

  AddTodoAction(this.todo);
}

// 处理状态更新
class TodoReducer extends Reducer<TodoState, Object> {
  [@override](/user/override)
  TodoState reduce(TodoState state, action) {
    if (action is AddTodoAction) {
      return state.copyWith(
        todos: [...state.todos, action.todo],
      );
    }
    return state;
  }
}

// 初始化状态管理器
final store = SlicesStore<TodoState>(TodoState(), reducers: [TodoReducer()]);

todo_list.dart

import 'package:flutter/material.dart';
import 'package:slices/slices.dart';

class TodoList extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SlicesBuilder<TodoState>(
      selector: (state) => state.todos,
      builder: (context, todos) {
        return ListView.builder(
          itemCount: todos.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(todos[index]),
            );
          },
        );
      },
    );
  }
}

todo_form.dart

import 'package:flutter/material.dart';
import 'package:slices/slices.dart';

class TodoForm extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Row(
        children: [
          Expanded(
            child: TextField(
              controller: _controller,
              decoration: InputDecoration(hintText: '输入任务'),
            ),
          ),
          ElevatedButton(
            onPressed: () {
              // 分发添加任务的动作
              Slices.dispatch(AddTodoAction(_controller.text));
              _controller.clear();
            },
            child: Text('添加'),
          ),
        ],
      ),
    );
  }
}