Flutter状态可视化插件state_view的使用

State View 是一个 Dart 包，提供了一组用于在 Flutter 应用中实现状态视图模式的小部件和模式。该模式旨在将应用程序状态与 UI 逻辑分离，使代码组织更加清晰和易于维护。

安装

要使用 State View 包，首先需要将其添加到你的 Flutter 项目中：

dart pub add state_view

安装创建页面脚本

为了使用 State View 包的创建页面脚本，你需要先激活系统上的脚本。打开终端并运行以下命令：

dart pub global activate state_view

确保将 Dart 包可执行文件添加到系统的 PATH 中。在 MacOS / Linux 上，可以通过在 ~/.zshrc 文件中添加以下行来实现（假设 zsh 是默认 shell）：

export PATH="$PATH:~/.pub-cache/bin"

在 Windows 上，可以通过将以下内容添加到用户的 PATH 环境变量中来实现：

%LOCALAPPDATA%\Pub\Cache\bin

创建页面

状态视图模式需要一定量的样板代码。为了简化这个过程，包提供了一个脚本，可以自动为新页面创建必要的文件和文件夹。

要创建新页面，请导航到你想要创建它的文件夹（例如 /lib/pages/），然后运行脚本，提供页面名称（以蛇形命名法）：

create_page some_new_page

脚本会自动将页面名称转换为帕斯卡命名法用于实际类名。

示例

随着 Flutter 应用的增长，在单个文件中使用 StatefulWidget 来管理业务逻辑、状态和 UI 逻辑可能会变得笨重。State View 包通过提供业务逻辑/状态与 UI 逻辑之间的干净分离来解决这个问题。

状态视图模式主要有三个组件：

• 页面：将状态和 UI 结合在一起的小部件。
• StateProvider：保存业务逻辑和状态，并响应 UI 事件。
• UI：保存 UI 逻辑并发出 UI 事件。

代码示例

让我们看一个如何使用这些组件的示例：

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

class HomePage extends StateView<HomeState> {
  HomePage({Key? key})
    : super(
      key: key,
      stateBuilder: (context) => HomeState(context),
      view: HomeView(),
  );
}

class HomeState extends StateProvider<HomePage, HomeEvent> {
  HomeState(super.context) {
    registerHandler<OnSaveButtonTap>(_handleSave);
  }

  void _handleSave(OnSaveButtonTap event) {
    // 处理保存逻辑
  }
}

abstract class HomeEvent {}

class OnSaveButtonTap extends HomeEvent {}

在这个示例中，HomePage 作为 HomeState（业务逻辑）和 HomeView（UI）之间的粘合剂。HomeState 注册一个或多个处理程序来处理每个事件，这充当了业务逻辑和 UI 之间的接口。UI 小部件通过调用 emit 并发出特定事件与 HomeState 进行交互。这种分离增强了应用扩展时的可读性和可维护性。

事件

为了保持 HomeState.emit 函数的类型安全，建议为每个创建的 StateProvider 定义一个抽象类。每个 UI 事件应表示为扩展此抽象事件类的类。你还可以在这些事件类中包含任何必要的数据。

例如：

abstract class HomeEvent {}

class OnSaveButtonTap extends HomeEvent {}

class OnUserNameChanged extends HomeEvent {
    final String newUsername;
    OnUserNameChanged(this.newUsername);
}

这是 UI 如何使用这些事件的方式：

class HomeView extends StatelessWidget {
  const HomeView({super.key});

  @override
  Widget build(BuildContext context) {
    final state = context.read<HomeState>();
    return Scaffold(
      body: Column(
        children: [
          TextField(
            onChanged: (String value) {
              state.emit(OnUserNameChanged(value));
            },
          ),
          TextButton(
            child: Text('Save'),
            onPressed: () {
              state.emit(OnSaveButtonTap());
            },
          ),
        ],
      ),
    );
  }
}

onEvent

或者，你可以覆盖 onEvent 函数并在状态提供者上调用 onEvent 提供事件。

例如：

class HomeState extends StateProvider<HomePage, HomeEvent> {
  HomeState(super.context);

  @override
  void onEvent(HomeEvent event) {
    if (event is OnSaveButtonTap) {
      _handleSave(event);
    }
  }

  void _handleSave(OnSaveButtonTap event) {
    // 处理保存逻辑
  }
}

然后从 UI 调用：

context.read<HomeState>().onEvent(OnSaveButtonTap());

这是一种较旧的方法来发出事件，不推荐使用，因为通常会在 onEvent 函数中添加额外的逻辑，而不仅仅是分配处理程序。但这在功能上与 registerHandler / emit 模式相同。

MultiProvider

StateProvider 小部件不能直接在 MultiProvider 中使用。但是，你可以使用 ViewlessStateProvider，它几乎相同，但可以在 MultiProvider 中使用。

完整示例 Demo

以下是一个完整的示例 demo，展示了如何使用 state_view 包：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:state_view/state_view.dart';

void main() => runApp(
  MaterialApp(
    home: HomePage(initialUsername: 'test_username'),
  ),
);

class HomePage extends StateView<HomeState> {
  final String initialUsername;
  HomePage({
    Key? key,
    required this.initialUsername,
  }) : super(
    key: key,
    stateBuilder: (context) => HomeState(context),
    view: const HomeView(),
  );
}

class HomeState extends StateProvider<HomePage, HomeEvent> {
  HomeState(BuildContext context) : super(context) {
    _username = widget.initialUsername;
  }

  late String _username;
  String get username => _username;

  @override
  void onEvent(HomeEvent event) {
    if (event is OnUserNameChanged) {
      _username = event.newUsername;
      notifyListeners();
    }
  }
}

abstract class HomeEvent {}

class OnUserNameChanged extends HomeEvent {
  final String newUsername;
  OnUserNameChanged(this.newUsername);
}

class HomeView extends StatelessWidget {
  const HomeView({super.key});

  @override
  Widget build(BuildContext context) {
    final state = context.watch<HomeState>();
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Column(
        children: [
          Text('Current username: ${state.username}'),
          TextField(
            onChanged: (String value) {
              state.onEvent(OnUserNameChanged(value));
            },
          ),
        ],
      ),
    );
  }
}

以上代码展示了如何结合使用 state_view 包中的不同组件来构建一个简单的 Flutter 应用。希望这对你的开发有所帮助！