Flutter故事书展示插件storybook_dart的使用

Flutter故事书展示插件 storybook_dart 的使用

在 Flutter 开发中，storybook_dart 是一个非常有用的工具，它可以帮助开发者快速创建和展示 UI 组件。通过 storybook_dart，你可以轻松地为每个组件编写不同的状态示例，并以直观的方式展示它们。

安装

首先，在你的 pubspec.yaml 文件中添加 storybook_dart 依赖：

dependencies:
  storybook_dart: ^0.1.0

然后运行以下命令来安装依赖：

flutter pub get

使用示例

接下来，我们将通过一个简单的例子来展示如何使用 storybook_dart。

创建一个基本的故事

假设我们有一个按钮组件 MyButton，我们希望展示它在不同状态下的表现。

1. 创建按钮组件

// lib/my_button.dart
import 'package:flutter/material.dart';

class MyButton extends StatelessWidget {
  final String label;
  final VoidCallback onPressed;

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

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

2. 创建故事

接下来，我们需要创建一个故事文件来展示这个按钮的不同状态。

// lib/stories/my_button_story.dart
import 'package:flutter/material.dart';
import 'package:storybook_dart/storybook_dart.dart';
import '../my_button.dart';

final Story myButtonStory = Story(
  name: 'My Button',
  builder: (context, args) {
    // 获取参数
    final label = args['label'] ?? 'Click me';
    final onPressed = args['onPressed'];

    return MyButton(
      label: label,
      onPressed: onPressed as VoidCallback?,
    );
  },
);

3. 注册故事并启动故事书

最后，我们需要注册我们的故事并在应用中启动故事书。

// lib/main.dart
import 'package:flutter/material.dart';
import 'package:storybook_dart/storybook_dart.dart';
import 'stories/my_button_story.dart';

void main() {
  final Storybook storybook = Storybook(
    sections: [
      Section(
        stories: [myButtonStory],
      ),
    ],
  );

  runApp(MyApp(storybook: storybook));
}

class MyApp extends StatelessWidget {
  final Storybook storybook;

  const MyApp({Key? key, required this.storybook}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Storybook'),
        ),
        body: Center(
          child: StorybookViewer(storybook: storybook),
        ),
      ),
    );
  }
}

运行结果

当你运行应用程序时，你会看到一个带有 My Button 标签的故事书界面。你可以点击按钮来触发 onPressed 回调。

添加更多状态

你还可以为按钮添加更多的状态，例如不同的颜色或大小。

final Story colorfulButtonStory = Story(
  name: 'Colorful Button',
  builder: (context, args) {
    final label = args['label'] ?? 'Click me';
    final color = args['color'] ?? Colors.blue;

    return MyButton(
      label: label,
      onPressed: () {},
      style: ElevatedButton.styleFrom(primary: color),
    );
  },
);

然后在 main.dart 中注册这个故事：

final Storybook storybook = Storybook(
  sections: [
    Section(
      stories: [myButtonStory, colorfulButtonStory],
    ),
  ],
);

更多关于Flutter故事书展示插件storybook_dart的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter故事书展示插件storybook_dart的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


storybook_dart 是一个用于 Flutter 的插件，它允许开发者以类似于 Storybook 的方式展示和组织 UI 组件。Storybook 是一种流行的开发工具，用于独立开发和测试 UI 组件，特别适用于组件驱动开发（Component-Driven Development, CDD）。

安装 storybook_dart

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

dependencies:
  flutter:
    sdk: flutter
  storybook_dart: ^0.1.0 # 请使用最新版本

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

基本使用

1. 创建一个 Story

首先，你需要创建一个 Story。一个 Story 是一个独立的 UI 组件展示，通常包含组件的不同状态或变体。

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

class MyButtonStory extends Story {
  MyButtonStory()
      : super(
          name: 'MyButton',
          description: 'A simple button component',
          builder: (context) {
            return Center(
              child: ElevatedButton(
                onPressed: () {},
                child: Text('Click Me'),
              ),
            );
          },
        );
}

2. 创建一个 Storybook

接下来，你需要创建一个 Storybook，并将你的 Story 添加到其中。

import 'package:flutter/material.dart';
import 'package:storybook_dart/storybook_dart.dart';
import 'my_button_story.dart'; // 导入你的 Story

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

class MyStorybookApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Storybook Example',
      home: Storybook(
        stories: [
          MyButtonStory(),
          // 添加更多的 Story
        ],
      ),
    );
  }
}

3. 运行应用

现在你可以运行你的 Flutter 应用，并查看 Storybook 中展示的 MyButton 组件。

高级功能

添加控件（Knobs）

storybook_dart 支持控件（Knobs），允许你在 Storybook 中动态调整组件的属性。

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

class MyButtonStory extends Story {
  MyButtonStory()
      : super(
          name: 'MyButton',
          description: 'A simple button component',
          builder: (context) {
            final text = context.knobs.text(
              label: 'Button Text',
              initialValue: 'Click Me',
            );

            return Center(
              child: ElevatedButton(
                onPressed: () {},
                child: Text(text),
              ),
            );
          },
        );
}

在这个例子中，context.knobs.text 允许你在 Storybook 中动态修改按钮的文本。

添加多个 Story

你可以为同一个组件创建多个 Story，展示不同的状态或变体。

class MyButtonStory extends Story {
  MyButtonStory()
      : super(
          name: 'MyButton',
          description: 'A simple button component',
          stories: [
            Story(
              name: 'Default',
              builder: (context) {
                return Center(
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text('Click Me'),
                  ),
                );
              },
            ),
            Story(
              name: 'Disabled',
              builder: (context) {
                return Center(
                  child: ElevatedButton(
                    onPressed: null,
                    child: Text('Disabled'),
                  ),
                );
              },
            ),
          ],
        );
}
回到顶部