Flutter注释与标注插件storybook_annotations的使用

Flutter注释与标注插件storybook_annotations的使用

本README描述了该包。如果您将此包发布到pub.dev，则此README的内容将出现在您的包的首页上。

对于如何编写一个好的包README的指南，请参阅编写包页面。

对于开发包的一般信息，请参阅Dart指南中的创建包 和 Flutter指南中的开发包和插件。

特性

  • 生成可用于StoryBook的故事。

开始使用

首先，通过以下命令添加 storybook_annotations 包到您的项目中：

flutter pub add storybook_annotations

使用方法

要为某个小部件生成故事，只需在小部件定义上方添加 [@GenerateStory](/user/GenerateStory)() 注解即可。这会复制布尔值、整数和双精度浮点数字段，并带有旋钮和标签。

示例代码

下面是一个简单的例子，展示了如何使用 [@GenerateStory](/user/GenerateStory)() 注解来生成一个可交互的小部件故事。

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

// 定义一个带有 [@GenerateStory](/user/GenerateStory)() 注解的小部件
[@GenerateStory](/user/GenerateStory)()
class MyWidget extends StatelessWidget {
  final bool isActive;
  final int count;
  final double size;

  MyWidget({required this.isActive, required this.count, required this.size});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      width: size,
      height: size,
      color: isActive ? Colors.blue : Colors.grey,
      child: Center(
        child: Text(
          '$count',
          style: TextStyle(fontSize: size / 2),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Storybook(
          stories: [
            Story(
              name: 'MyWidget',
              builder: (context) => MyWidget(
                isActive: true,
                count: 5,
                size: 100.0,
              ),
            ),
          ],
        ),
      ),
    ),
  ));
}

更多关于Flutter注释与标注插件storybook_annotations的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter注释与标注插件storybook_annotations的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


storybook_annotations 是一个用于 Flutter 的插件，它允许你通过注释的方式来生成 Storybook 的故事。这个插件可以帮助开发者更轻松地管理和展示组件的不同状态和用法。

安装

首先，你需要在 pubspec.yaml 文件中添加 storybook_annotations 依赖：

dependencies:
  flutter:
    sdk: flutter
  storybook_annotations: ^1.0.0

然后运行 flutter pub get 来安装依赖。

使用

storybook_annotations 提供了几个注解，你可以使用这些注解来标记你的组件，并生成相应的 Storybook 故事。

1. @Story

@Story 注解用于标记一个组件，并为其生成一个故事。你可以为同一个组件生成多个故事，展示不同的状态或配置。

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

part 'my_widget.stories.dart';

@Story('Default')
class MyWidget extends StatelessWidget {
  final String title;

  MyWidget({required this.title});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(title),
    );
  }
}

2. @Arg

@Arg 注解用于标记组件的参数，这样你可以在 Storybook 中动态地修改这些参数。

@Story('Default')
class MyWidget extends StatelessWidget {
  @Arg()
  final String title;

  MyWidget({required this.title});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(title),
    );
  }
}

3. @DefaultArg

@DefaultArg 注解用于为参数提供默认值。

@Story('Default')
class MyWidget extends StatelessWidget {
  @DefaultArg('Hello, World!')
  final String title;

  MyWidget({required this.title});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(title),
    );
  }
}

4. @EnumArg

@EnumArg 注解用于标记枚举类型的参数，这样你可以在 Storybook 中选择不同的枚举值。

enum MyEnum { value1, value2 }

@Story('Default')
class MyWidget extends StatelessWidget {
  @EnumArg(MyEnum.value1)
  final MyEnum myEnum;

  MyWidget({required this.myEnum});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(myEnum.toString()),
    );
  }
}

生成故事

在使用注解标记组件后，你需要运行 build_runner 来生成相应的故事文件。

flutter pub run build_runner build

这会生成一个 .stories.dart 文件，其中包含了所有标记的组件及其故事。

在 Storybook 中使用

生成的故事文件可以直接在 Storybook 中使用。你可以在 Storybook 的配置文件中导入这些故事，并在 UI 中展示它们。

import 'package:storybook_flutter/storybook_flutter.dart';
import 'my_widget.stories.dart';

final _stories = [
  MyWidgetDefaultStory(),
];

void main() {
  runApp(
    Storybook(
      stories: _stories,
    ),
  );
}
回到顶部