Flutter界面预览与测试插件 `widgetbook_cli` 的使用

Widgetbook Logo

Widgetbook CLI

CLI 支持上传 Widgetbook Builds 和 Widgetbook Reviews。

文档

更多文档和示例请参见 docs.widgetbook.io。

示例代码

为了更好地理解如何使用 widgetbook_cli，下面是一个简单的示例。你可以从官方仓库的示例获取更多信息。

1. 安装 `widgetbook_cli`

首先，确保你已经安装了 widgetbook_cli。可以通过以下命令进行全局安装：

flutter pub global activate widgetbook_cli

2. 创建 Widgetbook 配置文件

在你的项目根目录下创建一个 widgetbook.yaml 文件，内容如下：

version: 1
project:
  name: MyFlutterApp
builds:
  - path: lib/
    output: build/

3. 运行 Widgetbook 构建命令

使用以下命令生成 Widgetbook 构建文件：

widgetbook build

这将会根据你在 widgetbook.yaml 中指定的路径生成构建文件，并将其输出到指定的目录。

4. 查看预览

生成的构建文件可以在浏览器中查看。你可以通过以下命令启动本地服务器来预览：

widgetbook serve

打开浏览器并访问 http://localhost:8080，即可看到你的 Widgetbook 界面预览。

5. 上传到 Widgetbook Cloud（可选）

如果你希望将构建文件上传到 Widgetbook Cloud，可以使用以下命令：

widgetbook upload --token YOUR_WIDGETBOOK_TOKEN

请确保你已经在 Widgetbook Cloud 上注册并获取了 API Token。

完整的示例 Demo

以下是一个完整的 Flutter 应用示例，展示了如何集成 Widgetbook 并生成构建文件。

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

void main() {
  runApp(
    Widgetbook.material(
      directories: [
        WidgetbookComponent(
          name: 'Button',
          useCases: [
            WidgetbookUseCase(
              name: 'Primary Button',
              builder: (context) => Center(
                child: ElevatedButton(
                  onPressed: () {},
                  child: Text('Press Me'),
                ),
              ),
            ),
          ],
        ),
      ],
    ),
  );
}

更多关于Flutter界面预览与测试插件widgetbook_cli的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

eggper 1楼•14 小时前

更多关于Flutter界面预览与测试插件widgetbook_cli的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何使用 widgetbook_cli 插件来进行 Flutter 界面预览与测试的简单代码示例和步骤说明。widgetbook_cli 是一个强大的工具，可以帮助你在命令行中生成和管理 Flutter WidgetBook 项目，从而更方便地进行界面预览和测试。

步骤 1：安装 Flutter 和 Dart SDK

确保你已经安装了 Flutter 和 Dart SDK。如果还没有安装，可以从 Flutter 官网获取安装指南。

步骤 2：添加 `widgetbook` 和 `widgetbook_cli` 依赖

首先，在你的 Flutter 项目的 pubspec.yaml 文件中添加 widgetbook 依赖：

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

然后，在你的项目根目录下，使用以下命令安装 widgetbook_cli：

dart pub global activate widgetbook_cli

步骤 3：初始化 WidgetBook 项目

在你的 Flutter 项目根目录下运行以下命令来初始化 WidgetBook 项目：

widgetbook init

这个命令会创建一个 widgetbook/ 目录，并在其中生成一些必要的文件。

步骤 4：创建 WidgetBook 故事（Stories）

编辑 widgetbook/stories.dart 文件，添加你想要预览和测试的 Widget 故事。例如：

import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:your_app/your_widget.dart';  // 替换为你的实际 Widget 路径

final List<Story> stories = [
  Story(
    name: 'MyWidget Story',
    builder: () => MyWidget(),  // 替换为你的实际 Widget
  ),
  // 可以添加更多故事...
];

步骤 5：运行 WidgetBook

你可以通过以下命令运行 WidgetBook 进行预览和测试：

flutter run -d chrome --target=lib/widgetbook/main.dart

这将启动你的 Flutter 应用并在 Chrome 中打开 WidgetBook 界面，你可以在其中浏览和测试你定义的故事。

示例代码结构

你的项目结构可能看起来像这样：

your_flutter_project/
├── android/
├── ios/
├── lib/
│   ├── main.dart
│   ├── your_widget.dart  // 你的实际 Widget 文件
│   └── widgetbook/
│       ├── main.dart     // 由 widgetbook_cli 自动生成
│       ├── stories.dart  // 你编辑的文件，定义故事
├── pubspec.yaml
└── ...

额外提示

确保你的 Flutter 环境配置正确，并且所有依赖都已正确安装。
widgetbook_cli 和 widgetbook 插件的版本号可能会更新，请始终使用最新版本以获得最佳功能和修复。

通过上述步骤和代码示例，你应该能够成功配置和使用 widgetbook_cli 来进行 Flutter 界面的预览与测试。

Flutter界面预览与测试插件widgetbook_cli的使用

Flutter界面预览与测试插件 widgetbook_cli 的使用