Flutter插件pueprint的介绍与使用方法

Flutter插件pueprint的介绍与使用方法

什么是Pueprint？

Pueprint是一个用于简化Flutter应用中流和单个页面布局与样式的插件。它代表Page（页面）+ Blueprint（蓝图），组合起来就是💩Pueprint💩！

目录

• 动机
• 开始使用
  • 使用此插件
• 核心概念
  • 小部件
• 与路由库集成
  • AutoRoute
  • VRouter

动机

流通常由几个具有AppBar和某种类型的Footer的页面组成，这些AppBar和Footer通常被叠加在每个页面的顶部，并位于父组件中。这使得调整这些小部件变得繁琐，需要大量的样板代码和提升状态。

这个插件可以轻松实现以下功能：

• 声明性地定制流中的每个页面，而不牺牲样式能力。
• 通过流轻松更改进度条和页面指示器。
• 更改每个页面上的onTap行为。
• 根据屏幕大小渲染页面。
• 与任何路由库（如AutoRoute、VRouter等）集成。
• 动画AppBar和Footer，当在页面之间切换时。
• …更多…

所有这一切都只需少量样板代码和代码。

除了流之外，这个插件还提供了一个简单的页面蓝图，可以让你轻松添加AppBar、Footer和Header到页面。

开始使用

安装插件

在你的pubspec.yaml文件中安装此插件：

dependencies:
  pueprint: [latest-version]

然后导入：

import 'package:pueprint/pueprint.dart';

使用此插件

对于流

1. 定义你的父级Pueprint小部件，作为子页面的容器。你可以将Pueprint视为子页面的骨架。

Widget build(BuildContext context) {
  return Pueprint(
    appBarBuilder: (context, state) {
      return AppBar(
        leading: IconButton(
          icon: Icon(state.icon),
          onPressed: state.onTapLeading,
        )
      );
    },
    footerBuilder: (context, state) {
      return PueFooter(
        child: ElevatedButton(
          child: state.buttonChild,
          onPressed: state.onTap,
        ),
        bottom: AnimatedSmoothIndicator(
          activeStep: state.activeStep,
          count: 3,
        )
      );
    },
    body: DescendantPages(), // 查看此README底部的示例
    // 集成与流行的路由库（如AutoRoute和VRouter）的子页面
  );
}

1. 在你的流页面中，使用PuePage来轻松更改AppBar和Footer的行为。

[@override](/user/override)
Widget build(BuildContext context) {
  return PuePage(
    appBarData: AppBarData(
      onTapLeading: () => context.router.pop(),
      icon: Icons.back_arrow_ios,
    ),
    footerData: FooterData(
      onTap: () => handleGoToNextPage(),
      buttonChild: Text('Submit'),
      activeIndex: 1,
    ),
    body: MyPageBody(),
  );
}

每次你在流中移动到新页面时，调用PuePage小部件以更新AppBar和Footer！

流外的页面

如果你希望使用此库的布局能力，首先在你的widget树的顶部放置一个PueProvider。

PueProvider(
  child: DescendantWidgets(),
  theme: PueTheme(), // 如果你想自定义Pue小部件的主题
);

现在，像这样使用SoloPuePage：

SoloPuePage(
  appBar: AppBar(),
  header: PueHeader(text: "I love me some poo"),
  body: PueBody(
    child: Text("More poo"),
    listView: true,
  ),
  footer: PueFooter(
    floating: true,
    child: ElevatedButton(
      child: Text("Generate poo!"),
      onPressed: () => plopItOut(),
    )
  ),
)

核心概念

这个包围绕着这样一个想法：页面可以分为4个不同的部分：

这个包使用这四个不同的元素来绘制页面。

小部件

Pueprint

Pueprint小部件用于包裹流中的所有页面。它负责实际渲染流中的AppBar和Footer。

PuePage

PuePage小部件用于Pueprint的每个后代流页面。你可以声明性地定义AppBar和Footer的属性，它会自动更新在Pueprint中渲染的相应字段。

SoloPuePage

对于不属于流但仍然想要访问此包布局能力的页面。你可以在该小部件中设置页面的所有4个核心区域。

与路由库集成

一个流UI和UX包如果没有理解如何与导航集成，就不能算是完整的，因为这些特性是相互依存的。这里有一些如何将此包与一些流行路由库一起使用的示例。

AutoRoute

1. 定义你的包装页面。在此案例中，我们称之为FlowWrapperPage。

class FlowWrapperPage extends StatelessWidget {
  const FlowWrapperPage({Key key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Pueprint(
      appBarBuilder: (context, state) {
        return AppBar(
          leading: IconButton(
            icon: Icon(state.icon),
            onPressed: state.onTapLeading,
          )
        );
      },
      footerBuilder: (context, state) {
        return ElevatedButton(
          child: state.buttonChild,
          onPressed: state.onTap,
        );
      },
      body: AutoRouter(),
    );
  }
}

1. 将你的FlowWrapperPage插入到你的路由设置中。

@MaterialAutoRouter(
    replaceInRouteName: 'Page,Route',
    routes: <AutoRoute>[
        // ...你的其他路由
        AutoRoute(
            path: "/flow",
            page: FlowWrapperPage, // 在此处插入你的包装页面！
            children: [
                AutoRoute(path: '1', page: Flow1Page),
                AutoRoute(path: '2', page: Flow2Page),
                AutoRoute(path: '3', page: Flow3Page),
            ],
        ),
    ],
)
class $AppRouter {}

1. 现在，在你的流页面中像这样使用PuePage！

class Flow1Page extends StatelessWidget {

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PuePage(
      appBarData: AppBarData(
        onTapLeading: () => context.router.pop(),
        icon: Icons.back_arrow_ios,
      ),
      footerData: FooterData(
        onTap: () => handleGoToNextPage(),
        buttonChild: Text('Submit'),
      ),
      body: MyPageBody(),
    );
  }
}

VRouter

1. 定义你的包装页面。在此案例中，我们称之为FlowWrapperPage。

class FlowWrapperPage extends StatelessWidget {
  final Widget child;

  const FlowWrapperPage({Key key, required this.child}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Pueprint(
      appBarBuilder: (context, state) {
        return AppBar(
          leading: IconButton(
            icon: Icon(state.icon),
            onPressed: state.onTapLeading,
          )
        );
      },
      footerBuilder: (context, state) {
        return ElevatedButton(
          child: state.buttonChild,
          onPressed: state.onTap,
        );
      },
      body: child,
    );
  }
}

1. 将你的FlowWrapperPage插入到你的路由设置中。

VNester(
 path: '/flow',
 widgetBuilder: (child) => FlowWrapperPage(body: child),
 nestedRoutes: [
    VWidget(path: '1', widget: Flow1Page()),
    VWidget(path: '2', widget: Flow2Page()),
    VWidget(path: '3', widget: Flow3Page()),
 ],
)

1. 现在，在你的流页面中像这样使用PuePage！

class Flow1Page extends StatelessWidget {

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PuePage(
      appBarData: AppBarData(
        onTapLeading: () => context.router.pop(),
        icon: Icons.back_arrow_ios,
      ),
      footerData: FooterData(
        onTap: () => handleGoToNextPage(),
        buttonChild: Text('Submit'),
      ),
      body: MyPageBody(),
    );
  }
}