Flutter UI组件插件bfastui的使用

BFastUI - 简介

BFastUI 是一个基于 Flutter 的状态和 UI 架构库，它受到了 flutter_modular 的启发，并使用了 ChangeNotifier 模式来管理状态。

安装

在项目的 pubspec.yaml 文件中添加 bfastui 作为依赖项：

dependencies:
  bfastui: any

你也可以直接从 Git 仓库中获取源码以尝试最新的功能和修复：

dependencies:
  bfastui:
    git:
      url: https://github.com/fahamutech/bfast-ui-flutter.git

模块

在应用中组织你的领域时，模块是一个顶层抽象。你可以将应用划分为不同的模块。

主模块 (MainModule)

主模块是应用的启动模块，只在应用中定义一次。你需要实现 initRoutes 和 initStates 方法。

• initRoutes：添加模块将使用的页面的所有路由。
• initStates：添加模块将使用的所有状态。

class MyAppModule extends MainModuleAdapter {
  [@override](/user/override)
  List<RouterAdapter> initRoutes(String moduleName) => [];

  [@override](/user/override)
  List<StateAdapter> initStates(String moduleName) => [];
}

子模块 (ChildModule)

子模块用于封装特定的业务逻辑。你需要实现以下方法：

• initRoutes：添加模块将使用的页面的所有路由。
• initStates：添加模块将使用的所有状态。
• moduleName：返回模块名称，可以是任意字符串。

class ProfileModule extends ChildModuleAdapter {
  [@override](/user/override)
  List<RouterAdapter> initRoutes(String moduleName) => [];

  [@override](/user/override)
  List<StateAdapter> initStates(String moduleName) => [];

  [@override](/user/override)
  String moduleName() => 'profile-module';
}

页面 (Page)

页面是你在手机上看到的内容，例如登录页面。页面属于特定的模块，并通过 URL 导航到。页面可以有一个或多个组件，使整个页面具有功能性。要创建一个页面，你需要扩展 PageAdapter 并实现 build 方法，该方法返回一个表示该页面的 Widget。

• build(var args)：必须提供实现。args 有以下属性：

  final Map<String, dynamic> params;
  final Map<String, dynamic> queryParams;
  final dynamic data;
  

class MyHomePage extends PageAdapter {
  [@override](/user/override)
  Widget build(args) {
    return Scaffold(
      body: Container(
        color: Colors.red,
        child: Column(
          children: [
            consumerComponent<MyState>(
              builder: (context, state) => Text('${state?.count}'),
            ),
            selectorComponent<MyState, int>(
              selector: (s) => s?.count ?? 0,
              builder: (c, data) => Text('$data'),
            )
          ],
        ),
      ),
    );
  }
}

状态 (State)

状态是当前视图的信息。状态是一个 ChangeNotifier 类，用于底层的 Provider 状态管理。

class MyState extends StateAdapter {
  int count = 0;

  increase() {
    count += 1;
    notifyListeners();
  }

  decrement() {
    count -= 1;
    notifyListeners();
  }

  [@override](/user/override)
  void onDispose() {}
}

要通知监听器更改，只需调用 notifyListeners()，就像在 ChangeNotifier 类中一样。你可以使用 active widget（消费者或选择器）来使用状态。我们提供了生产者方法来生成消费者小部件或选择器组件。

路由 (Route)

路由携带应用中导航到何处的信息，以及是否允许某人访问。你可以导航到另一个页面或模块。

路由守卫 (Route Guard)

为了创建一个路由守卫：

class MyRouteAuthGuard extends RouterGuardAdapter {
  [@override](/user/override)
  Future<bool> canActivate(String url) {
    // TODO: 实现 canActivate
    throw UnimplementedError();
  }
}

当 canActivate 解析为 true 时，导航到的页面或模块将被激活；否则，如果可用，则会返回到前一个路由。

完整应用示例

import 'package:bfastui/adapters/main_module.dart';
import 'package:bfastui/adapters/page.dart';
import 'package:bfastui/adapters/router.dart';
import 'package:bfastui/adapters/state.dart';
import 'package:bfastui/controllers/component.dart';
import 'package:bfastui/controllers/module.dart';
import 'package:flutter/material.dart';

class MyHomePage extends PageAdapter {
  [@override](/user/override)
  Widget build(args) {
    return Scaffold(
      body: Container(
        color: Colors.red,
        child: Column(
          children: [
            consumerComponent<MyState>(
              builder: (c, state) => Text('${state?.count}'),
            ),
            selectorComponent<MyState, int>(
              selector: (s) => s?.count ?? 0,
              builder: (c, data) => Text('$data'),
            )
          ],
        ),
      ),
    );
  }
}

class MyState extends StateAdapter {
  int count = 0;

  increase() {
    count += 1;
    notifyListeners();
  }

  decrement() {
    count -= 1;
    notifyListeners();
  }

  [@override](/user/override)
  void onDispose() {}
}

class MyAppModule extends MainModuleAdapter {
  [@override](/user/override)
  List<RouterAdapter> initRoutes(String moduleName) => [
    RouterAdapter('/home', page: (c, _) => MyHomePage()),
  ];

  [@override](/user/override)
  List<StateAdapter> initStates(String moduleName) => [
    MyState(),
  ];
}

void main() {
  runApp(
    bfastUiApp(
      module: MyAppModule(),
      component: MaterialApp(
        initialRoute: '/home',
      ),
    ),
  );
}