Flutter内容生成或策略规划插件playbook_generator的使用

Flutter内容生成或策略规划插件playbook_generator的使用

Playbook

Playbook 是一个库，它提供了一个沙盒来构建UI组件，而无需担心特定于应用程序的依赖关系。它受到了JavaScript前端开发中使用的Storybook的启发。

使用 Playbook 构建的组件可以生成一个独立的应用程序作为活生生的样式指南。这不仅允许你快速审查UI，还可以通过将业务逻辑与组件分离来交付更健壮的设计。

此外，每个组件的快照可以通过单元测试自动生成，并且可以使用任意第三方工具进行视觉回归测试。

对于复杂的现代应用开发来说，敏感地捕捉UI变化并更快地改进它们非常重要。有了 Playbook，你不必费力准备数据，也不必花费人力资源进行手动测试。

Playbook

Playbook 组件以场景的形式唯一存储。一个 Scenario 有布局组件的方式。

Playbook(
  stories: [
    Story(
      'Home',
      scenarios: [
        Scenario(
          'CategoryHome',
          layout: ScenarioLayout.fill(),
          child: CategoryHome(userData: UserData.stub),
        ),
        Scenario(
          'LandmarkList',
          layout: ScenarioLayout.fill(),
          child: Scaffold(
            appBar: AppBar(),
            body: LandmarkList(userData: UserData.stub),
          ),
        ),
        Scenario(
          'Container red',
          layout: ScenarioLayout.fixed(100, 100),
          child: Container(color: Colors.red),
        ),
      ],
    ),
  ],
);

PlaybookUI

PlaybookUI 提供了浏览场景列表的用户界面。

PlaybookGallery

组件可视化被列出并显示。在顶部屏幕上显示的并不是实际的布局，而是高效地在运行时生成的快照。

浏览器	详细

PlaybookSnapshot

场景可以通过符合 TestTool 类型的实例进行测试。Snapshot 就是其中之一，它可以生成所有场景的快照，并模拟给定设备的屏幕大小和安全区域。

Future<void> main() async {
  testWidgets('Take snapshots', (tester) async {
    await Playbook(
      stories: [
        barStory(),
        fooWidgetStory(),
        assetImageStory(),
        homePageStory(),
        scrollableStory(),
      ],
    ).run(
      Snapshot(
        devices: [SnapshotDevice.iPhoneSE2nd],
      ),
      (widget, device) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            fontFamily: 'Roboto',
            platform: device.platform,
          ),
          home: widget,
        );
      },
    );
  });
}

配置

可以在 pubspec.yaml 中配置字体文件的位置和快照输出目录路径。

playbook_snapshot:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf
  # 默认为/snapshots
  snapshot_dir: iOS
  # 默认为空
  sub_dir: service

使用上述设置，快照将保存在以下目录中：

/test/iOS/${DeviceName}/service/${StoryTitle}/${ScenarioTitle}.png

如果想要动态更改路径，可以在 Snapshot 中使用 snapshotDir 和 subDir 参数。

注意事项

Snapshot（内部 flutter test --update-goldens）需要你自己准备和加载字体。通过在 flutter 或 playbook_snapshot 的 pubspec.yaml 中定义字体文件位置并准备字体文件，字体文件将自动加载。

flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf

或者

playbook_snapshot:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf

然后，应该在目录中准备好字体文件。

PlaybookGenerator

支持从任何 .dart 文件生成故事和场景。

// some_story.dart

const storyTitle = 'Home';

@GenerateScenario(
  layout: ScenarioLayout.fill(),
)
Widget $CategoryHome() => CategoryHome(userData: UserData.stub);

@GenerateScenario(
  layout: ScenarioLayout.fill(),
)
Widget $LandmarkList() => Scaffold(
      appBar: AppBar(),
      body: LandmarkList(userData: UserData.stub),
    );

@GenerateScenario(
  title: 'Container red',
  layout: ScenarioLayout.fixed(100, 100),
)
Widget containerRed() => Container(color: Colors.red);

@GenerateScenario(
  title: 'Device pixel ratio',
  layout: ScenarioLayout.fixed(300, 300),
)
Widget devicePixelRatio(BuildContext context) =>
    Text('Device pixel ratio is ${MediaQuery.of(context).devicePixelRatio}');

你可以引用 playbook 实例。

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Playbook Demo',
      theme: ThemeData.light(),
      home: PlaybookGallery(
        title: 'Sample app',
        playbook: playbook,
      ),
    );
  }
}

可以在 build.yaml 中设置glob以查找资产和输出文件名。默认输入值是 lib/**.dart，输出值是 generated_playbook.dart。

targets:
  $default:
    builders:
      playbook_generator:stories:
        options:
          input: lib/**.dart
          output: generated_playbook.dart