Flutter界面布局插件storyboard的使用

Flutter界面布局插件Storyboard的使用

简介

Storyboard 是一个用于加速Flutter用户界面迭代开发的插件，灵感来源于Storybook。它允许你在应用的正常上下文之外展示一组Widgets，通过在单个视图中重复显示同一个Widget的不同配置或状态，可以快速评估代码更改对Widget的影响。这特别适用于外观变化，但也有效于行为变化。

添加故事（Stories）

首先，你需要构建一些故事，这些故事将组成你的Storyboard。构建故事是通过提供Story抽象类的具体子类来完成的。例如：

import 'package:mypackage/contacts.dart';
import 'package:storyboard/storyboard.dart';

class ContactsListStory extends Story {
  @override
  List<Widget> get storyContent {
    // 返回要观察的Widgets列表
    return [ContactsList()];
  }

  // 可选：重写标题以更改故事的标题
  @override
  String get title => "联系人列表";

  // 可选：设置为全屏模式
  @override
  bool get isFullScreen => true;
}

• storyContent：这是必须重写的抽象getter，用于提供要观察的Widgets。
• title：可选，用于更改故事的标题。
• isFullScreen：可选，如果设置为true，则Widget将在一个新的Navigator路由中渲染，而不会包含Scaffold。
• build：还可以重写build方法来完全自定义故事的显示。

构建Storyboard

一个Storyboard实际上就是一组故事的集合。你可以通过以下方式构建Storyboard：

import 'package:flutter/material.dart';
import 'package:storyboard/storyboard.dart';
import 'stories/contacts_story.dart';

void main() {
  runApp(MaterialApp(
      home: Storyboard([
        ContactsListStory(),
        ContactsCardStory(contact: Contact("alice")),
        ContactsCardStory(contact: Contact("bob")),
        ContactsCardStory(contact: Contact("charlie")),
  ])));
}

或者更简单地，直接运行StoryboardApp：

void main() {
  runApp(StoryboardApp([
    ContactsListStory(),
    ContactsCardStory(contact: Contact("alice")),
    ContactsCardStory(contact: Contact("bob")),
    ContactsCardStory(contact: Contact("charlie")),
  ]));
}

完整示例Demo

为了更好地理解如何使用Storyboard，下面是一个完整的示例项目，展示了如何创建和使用Storyboard。

1. 创建Contact模型类

首先，我们需要一个简单的Contact模型类，用于表示联系人信息。

class Contact {
  final String name;

  Contact(this.name);
}

2. 创建ContactsList和ContactsCard Widget

接下来，我们创建两个Widget：ContactsList和ContactsCard。

import 'package:flutter/material.dart';

class ContactsList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        ListTile(title: Text("Alice")),
        ListTile(title: Text("Bob")),
        ListTile(title: Text("Charlie")),
      ],
    );
  }
}

class ContactsCard extends StatelessWidget {
  final Contact contact;

  ContactsCard({required this.contact});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        title: Text(contact.name),
        subtitle: Text("This is ${contact.name}'s card"),
      ),
    );
  }
}

3. 创建故事类

现在，我们创建两个故事类：ContactsListStory和ContactsCardStory。

import 'package:storyboard/storyboard.dart';
import 'contacts.dart';

class ContactsListStory extends Story {
  @override
  List<Widget> get storyContent {
    return [ContactsList()];
  }

  @override
  String get title => "联系人列表";
}

class ContactsCardStory extends Story {
  final Contact contact;

  ContactsCardStory({required this.contact});

  @override
  List<Widget> get storyContent {
    return [ContactsCard(contact: contact)];
  }

  @override
  String get title => "联系人卡片 - ${contact.name}";
}

4. 构建Storyboard

最后，我们在main.dart中构建并运行Storyboard。

import 'package:flutter/material.dart';
import 'package:storyboard/storyboard.dart';
import 'stories/contacts_story.dart';

void main() {
  runApp(StoryboardApp([
    ContactsListStory(),
    ContactsCardStory(contact: Contact("Alice")),
    ContactsCardStory(contact: Contact("Bob")),
    ContactsCardStory(contact: Contact("Charlie")),
  ]));
}