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

故事书设计系统

用于展示设计系统的Widgets的故事书。

查看示例：示例

开始

运行以下命令：

flutter pub add storybook_ds

或者手动添加依赖：

dependencies:
  flutter:
    sdk: flutter
  storybook:

使用

在您的文件中导入项目：

import 'package:storybook_ds/storybook_ds.dart';

为要展示的组件创建一个StatefulWidget。然后将类State替换为Storybook：

class ButtonPage extends StatefulWidget {
  const ButtonPage({super.key});

  [@override](/user/override)
  Storybook<ButtonPage> createState() => _ButtonPageState();
}

class _ButtonPageState extends Storybook<ButtonPage> {
  ...
}

从您的Storybook类中删除build方法。添加以下覆盖方法：

Title

屏幕的标题。建议使用组件名称。

[@override](/user/override)
String get title => "DS Button";

NameObjectInDisplay

在故事书中显示的组件类名。这是故事书中显示组件代码的部分。

[@override](/user/override)
String get nameObjectInDisplay => "DSButton";

Atributs

添加组件的属性。这些由AtributeDto类表示（更多细节见下文）。

[@override](/user/override)
List<AtributeDto> atributs = [
  AtributeDto(
    type: 'Function()',
    name: 'onPressed',
    required: true,
    builders: ['elevated', 'outline', 'text'],
  ),
  AtributeDto(
    type: 'String',
    name: 'text',
    required: true,
    selectedValue: VariableOption(value: 'Custom Button'),
    builders: ['elevated', 'outline', 'text'],
  ),
  AtributeDto(
    type: 'Color?',
    name: 'color',
    builders: ['elevated'],
    selectedValue: VariableOption(value: null),
    variableOptions: [
      VariableOption(
        value: Colors.amber,
        textInDisplay: 'Colors.amber',
        textInSelectedOptions: 'amber',
      ),
      VariableOption(
        value: Colors.black,
        textInDisplay: 'Colors.black',
        textInSelectedOptions: 'black',
      ),
    ],
  ),
];

AtributeDto

AtributeDto是用于映射组件每个属性的类。其主要功能包括：

• Type 定义属性的类型（例如 “String”, “Function()”, “bool”, “double”, “dynamic” 等）。如果属性是可选的，添加问号（例如 “double?”）。
• Name 定义属性的名称，并将用于映射组件类中的属性（例如 “isLoading”, “value”, “onPressed” 等）。
• Required 定义属性是否必需。
• SelectedValue 定义组件在故事书中初始值。它由VariableOption类定义。
• VariableOptions 是一个包含元素VariableOption的列表，允许用户通过故事书与组件进行交互，切换属性的值。用于向用户展示该属性的功能及其如何影响组件的状态。
• Builders 是一个字符串列表，定义组件出现在哪些构造函数中。
  • 例如，一个按钮的构造函数是 “DSButton.elevated(…)” 和 “DSButton.outlined(…)”. 如果你的元素属于这两个构造函数，则将builders设置为 [“elevated”, “outlined”]。
  • 如果你的组件有一个默认构造函数，并且属性存在于该构造函数中，将null添加到列表：[null, “elevated”, “outlined”];

buildComponentWidget

在您的组件的Storybook类中，返回一个包含组件的scaffold，以便在故事书中呈现给用户。

使用getWhereAtribut()函数根据属性名称（name）检索属性值，并将其分配给组件。这样，当用户操作故事书时，更改会自动应用到组件。

检查通过selectedConstructor变量选择的构造函数，并返回相应构造函数的组件。

[@override](/user/override)
Widget buildComponentWidget(BuildContext context) {
  Widget child;
  if (selectedConstructor == 'elevated') {
    child = DSButton.elevated(
      text: getWhereAtribut('text'),
      loading: getWhereAtribut('loading'),
      color: getWhereAtribut('color'),
      onPressed: () {},
    );
  } else if (selectedConstructor == 'outline') {
    child = DSButton.outline(
      text: getWhereAtribut('text'),
      loading: getWhereAtribut('loading'),
      onPressed: () {},
    );
  } else {
    child = DSButton(
      text: getWhereAtribut('text'),
      onPressed: () {},
    );
  }

  return Scaffold(
    body: Center(
      child: child,
    ),
  );
}

示例代码

import 'package:flutter/material.dart';

import 'custom_card_storybook.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> {
  ThemeData theme = ThemeData.light();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: theme,
      debugShowCheckedModeBanner: false,
      home: CustomCardStorybook(
        onChangeTheme: (ThemeData theme) {
          setState(() {
            this.theme = theme;
          });
        },
      ),
    );
  }
}