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

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

简介

advanced_storybook 是一个用于Flutter项目的高级Storybook插件，它可以帮助开发者更方便地预览和测试UI组件。通过这个插件，你可以在开发过程中快速创建和展示不同的UI场景，并且可以通过动态调整参数来查看组件的变化。

完整示例Demo

以下是一个完整的示例代码，展示了如何在Flutter项目中使用 advanced_storybook 插件来创建和展示多个故事（Stories）。每个故事可以包含不同的UI组件，并且可以通过Storybook提供的控件（Knobs）来动态调整这些组件的属性。

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: AdvancedStorybook(
          // 定义多个故事
          stories: [
            // 故事1：计数器页面
            Story(
              key: 'Pages/Counter', // 故事的唯一标识符
              description: '简单的计数器页面', // 故事的描述
              builder: (context) {
                return Material(
                  child: Scaffold(
                    appBar: AppBar(
                      title: Text(context.string(
                        key: 'AppBar/Title', // 文本控件的唯一标识符
                        initial: 'App Bar', // 初始值
                      )),
                      backgroundColor: context.options(
                        key: 'AppBar/Background color', // 选项控件的唯一标识符
                        description: '选择AppBar的颜色', // 控件的描述
                        options: [
                          for (final color in Colors.primaries) // 遍历所有主色
                            Option(value: color), // 每个颜色作为一个选项
                        ],
                        initialIndex: 0, // 初始选中的索引
                      ),
                    ),
                    body: ListView.builder(
                      itemCount: context.number(
                        key: 'ListTile/Items amount', // 数字控件的唯一标识符
                        description: '配置列表项的数量', // 控件的描述
                        initial: 5, // 初始值
                        min: 0, // 最小值
                        max: 50, // 最大值
                      ),
                      itemBuilder: (context, index) {
                        final title = context.string(
                          key: 'ListTile/Items title', // 文本控件的唯一标识符
                          description: '列表项的标题', // 控件的描述
                          initial: 'ListTile Item', // 初始值
                        );
                        final subtitle = context.string(
                          key: 'ListTile/Items subtitle', // 文本控件的唯一标识符
                          description: '列表项的副标题', // 控件的描述
                          initial: '动态生成的列表项', // 初始值
                        );

                        return ListTile(
                          title: Text('$title $index'), // 显示标题和索引
                          subtitle: Text(subtitle), // 显示副标题
                        );
                      },
                    ),
                    floatingActionButton: context.boolean(
                      key: 'FAB enabled', // 布尔控件的唯一标识符
                      initial: true, // 初始值
                    )
                        ? FloatingActionButton(
                            onPressed: () {}, // 按钮点击事件
                            child: const Icon(Icons.all_inbox), // 按钮图标
                          )
                        : null, // 如果布尔值为false，则不显示FloatingActionButton
                  ),
                );
              },
            ),
            // 故事2：带有Knob按钮的ElevatedButton
            Story(
              key: 'Common/Hello Knob Button', // 故事的唯一标识符
              description: '带有Knob的按钮', // 故事的描述
              builder: (context) {
                return ElevatedButton(
                  onPressed: () {}, // 按钮点击事件
                  child: Text(context.string(
                    key: 'firstKnob', // 文本控件的唯一标识符
                    description: '简单的描述', // 控件的描述
                    initial: 'Hello KNOB', // 初始值
                  )),
                );
              },
            ),
            // 故事3：简单的ElevatedButton
            Story(
              key: 'Common/ElevatedButton 2', // 故事的唯一标识符
              description: 'ElevatedButton 2的故事', // 故事的描述
              builder: (context) {
                return ElevatedButton(
                  onPressed: () {}, // 按钮点击事件
                  child: const Text('ElevatedButton 2'), // 按钮文本
                );
              },
            ),
            // 故事4：简单的TextField
            Story(
              key: 'TextField', // 故事的唯一标识符
              description: '简单的TextField故事', // 故事的描述
              builder: (context) {
                return SizedBox(
                  width: 300, // 设置宽度
                  child: TextField(
                    controller: TextEditingController(text: 'Hello Storybook'), // 初始化文本
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}