Flutter组件注解插件my_widgetbook_annotation的使用

Flutter 组件注解插件 my_widgetbook_annotation 的使用

Discord style: very_good_analysis GitHub Workflow Status

Widgetbook 注解

该包包含用于 <a href="https://pub.dev/packages/widgetbook_generator"><code>widgetbook_generator</code></a> 的注解，使 <a href="https://pub.dev/packages/widgetbook"><code>widgetbook</code></a> 更容易设置和维护。

文档

请参阅 docs.widgetbook.io 获取文档和示例。

Widgetbook 示例

所有示例可以在 这里 找到。

示例代码

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

// 使用 @UseCase 注解定义一个用例
@UseCase(name: 'Default', type: MyApp)
Widget defaultUseCase(BuildContext context) {
  return MyApp();
}

void main() {
  runApp(
    // 使用 @WidgetbookApp 注解来包裹你的应用
    WidgetbookApp(
      appBuilder: (context) => MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('Widgetbook Example')),
          body: Center(
            child: Text('Hello, Widgetbook!'),
          ),
        ),
      ),
      useCases: [
        // 添加用例
        defaultUseCase,
      ],
    ),
  );
}

在这个示例中，我们首先导入了必要的库，并定义了一个用例 defaultUseCase。然后，我们在 main 函数中使用 WidgetbookApp 来包裹我们的应用，并添加了用例 defaultUseCase。

WidgetbookApp 注解

@WidgetbookApp 注解用于包裹整个应用，以便在 Widgetbook 中显示组件。

UseCase 注解

@UseCase 注解用于定义一个用例，它接受两个参数：name 和 type。name 是用例的名称，type 是用例所对应的组件类型。

运行示例

要运行这个示例，你需要确保已经安装了 flutter 和 dart，并且正确配置了开发环境。你可以通过以下命令运行项目：

flutter run

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

1 回复

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


my_widgetbook_annotation 是一个用于 Flutter 的插件，它可以帮助你为 Widgetbook 生成文档和注解。Widgetbook 是一个用于管理和展示 Flutter 组件库的工具，类似于 Storybook 在 React 中的应用。

使用 my_widgetbook_annotation 插件，你可以通过注解的方式为你的 Flutter 组件添加元数据，这些元数据将被 Widgetbook 用来生成组件的文档和展示。

安装

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

dependencies:
  flutter:
    sdk: flutter
  my_widgetbook_annotation: ^1.0.0  # 请使用最新版本

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

基本使用

  1. 导入包：在你的 Dart 文件中导入 my_widgetbook_annotation 包。
import 'package:my_widgetbook_annotation/my_widgetbook_annotation.dart';
  1. 使用注解：你可以使用 @WidgetbookUseCase 注解来标记你的组件，并为其添加元数据。
@WidgetbookUseCase(
  name: 'Primary Button',
  type: PrimaryButton,
)
Widget primaryButtonUseCase(BuildContext context) {
  return PrimaryButton(
    onPressed: () {},
    text: 'Click Me',
  );
}
  • name: 用例的名称，将在 Widgetbook 中显示。
  • type: 组件的类型，通常是组件的类名。
  1. 生成 Widgetbook 文档：运行 flutter pub run build_runner build 来生成 Widgetbook 所需的文件。

配置 Widgetbook

为了将生成的用例集成到 Widgetbook 中，你需要在 Widgetbook 的配置文件中引用这些生成的用例。

import 'package:widgetbook/widgetbook.dart';
import 'generated/my_widgetbook_annotations.dart'; // 自动生成的文件

void main() {
  runApp(Widgetbook(
    children: [
      WidgetbookCategory(
        name: 'Buttons',
        children: [
          WidgetbookComponent(
            name: 'Primary Button',
            useCases: [
              primaryButtonUseCase, // 生成的用例
            ],
          ),
        ],
      ),
    ],
  ));
}
回到顶部