Flutter界面设计文档化插件widgetbook_annotation的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter界面设计文档化插件widgetbook_annotation的使用

简介

Widgetbook Annotation 是一个用于简化 widgetbook 设置和维护的注解包。它通过提供特定的注解，使得开发者可以更方便地将Flutter widgets集成到Widgetbook中，从而为UI组件创建交互式的文档和预览。

WidgetbookLogo

Discord style: very good analysis GitHub Workflow Status

有关更多文档和示例，请参阅 docs.widgetbook.io。

使用方法

安装

首先，在pubspec.yaml文件中添加依赖项：

dependencies:
  widgetbook_annotation: ^latest_version # 替换为最新版本号

然后运行 flutter pub get 来安装该包。

示例代码

下面是一个完整的示例demo，展示了如何使用widgetbook_annotation来定义并注册Widgets到Widgetbook中。

1. 创建带有注解的Widget

在你的项目中创建一个新的Dart文件（例如my_widgets.dart），并在其中定义你想要记录下来的Widgets。使用来自widgetbook_annotation包中的注解来描述这些Widgets。

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

@WidgetbookUseCase(name: 'Default', type: MyButton)
Widget myButtonUseCase(BuildContext context) {
  return MyButton(
    onPressed: () {},
    child: Text('Click me'),
  );
}

class MyButton extends StatelessWidget {
  final VoidCallback onPressed;
  final Widget child;

  const MyButton({
    Key? key,
    required this.onPressed,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: child,
    );
  }
}

2. 配置Widgetbook

接下来，在lib/main.dart或任何其他适当的位置配置Widgetbook以加载上述定义的Widgets。你需要确保已经安装了widgetbook_generator并配置好了构建过程。

import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart';
import 'my_widgets.dart'; // 引入包含注解的Widgets

void main() {
  runApp(
    Widgetbook.material(
      directories: [
        WidgetbookDirectory(
          name: 'My Widgets',
          widgets: [
            WidgetbookComponent(
              name: 'My Button',
              useCases: [
                WidgetbookUseCase(
                  name: 'Default',
                  builder: myButtonUseCase,
                ),
              ],
            ),
          ],
        ),
      ],
    ),
  );
}

3. 运行Widgetbook

完成以上步骤后，你可以通过命令行工具或其他方式启动Widgetbook应用，查看和测试你所定义的Widgets。

这就是关于如何使用widgetbook_annotation的基本介绍。希望这个指南对你有所帮助！如果你有任何问题或者需要进一步的帮助，请随时访问我们的官方文档网站 docs.widgetbook.io 或加入我们的 Discord社区 获取支持。


更多关于Flutter界面设计文档化插件widgetbook_annotation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter界面设计文档化插件widgetbook_annotation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用 widgetbook_annotation 插件进行 Flutter 界面设计文档化的代码示例。widgetbook_annotation 通常与 widgetbook 插件一起使用，用于创建和管理 Flutter 小部件的文档化示例。

1. 安装依赖

首先，你需要在你的 pubspec.yaml 文件中添加 widgetbook 和 widgetbook_annotation 依赖。

dependencies:
  flutter:
    sdk: flutter
  widgetbook: ^x.y.z  # 替换为最新版本号
  widgetbook_annotation: ^x.y.z  # 替换为最新版本号

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

2. 创建 WidgetBook 文件

在你的项目中创建一个新的 Dart 文件，比如 widgetbook.dart，用于定义和管理你的 WidgetBook 示例。

// widgetbook.dart

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

@WidgetBookApp()
class MyWidgetBookApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My WidgetBook'),
        ),
        body: WidgetBook(
          stories: [
            // 添加你的 WidgetBook 示例
            WidgetBookStory.fromWidget(
              name: 'My Button Example',
              widget: MyButtonWidget(),
            ),
            WidgetBookStory.fromWidgetWithController(
              name: 'My Interactive Example',
              widget: MyInteractiveWidget(controller: MyController()),
              controllers: [MyController()],
            ),
          ],
        ),
      ),
    );
  }
}

// 一个简单的按钮小部件示例
class MyButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          // 按钮点击事件
        },
        child: Text('Press Me'),
      ),
    );
  }
}

// 一个简单的交互式小部件示例
class MyInteractiveWidget extends StatefulWidget {
  final MyController controller;

  MyInteractiveWidget({required this.controller});

  @override
  _MyInteractiveWidgetState createState() => _MyInteractiveWidgetState();
}

class _MyInteractiveWidgetState extends State<MyInteractiveWidget> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Counter: ${widget.controller.count}'),
          ElevatedButton(
            onPressed: () {
              setState(() {
                widget.controller.increment();
              });
            },
            child: Text('Increment'),
          ),
        ],
      ),
    );
  }
}

// 控制器类，用于管理状态
class MyController {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
  }
}

3. 在 main.dart 中使用 MyWidgetBookApp

确保在你的 main.dart 文件中使用 MyWidgetBookApp 作为应用的根组件。

// main.dart

import 'package:flutter/material.dart';
import 'widgetbook.dart';  // 导入你创建的 WidgetBook 文件

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

4. 运行应用

现在你可以运行你的 Flutter 应用，你应该能看到一个包含你定义的 WidgetBook 示例的界面。你可以通过点击界面上的不同示例来查看它们的效果。

这个示例展示了如何使用 widgetbook_annotation 和 widgetbook 插件来创建和管理 Flutter 界面设计文档。你可以根据需要添加更多的示例和控制器，以更好地展示你的应用界面。

回到顶部