FairWell 注解和 FairDelegate 的介绍和使用

Wuba2022年11月7日大约 3 分钟

在 Fair 框架的早期,我们只实现了布局的动态化,对于 Widget 中出现的一些逻辑运算没有办法动态化,因此,我们设计了 FairDelegate 来注册页面的逻辑部分,并且需要把 FairDelegate 提前内置到基础包中。

所以,如果您的动态化述求是,只需要 UI 的动态化,而不需要逻辑动态化,那么完全可以使用 FairDelegate 的方式。

假设我们有一个页面,点击页面上的按钮,弹出一个 Toast:

import 'package:fair/fair.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class FairWellSample extends StatefulWidget {
  const FairWellSample({Key? key, required this.title}) : super(key: key);

  final String title;

  
  _FairWellSampleState createState() => _FairWellSampleState();
}

class _FairWellSampleState extends State<FairWellSample> {

  void onTapShowToast() {
    Fluttertoast.showToast(
        msg: "This is Center Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0
    );
  }

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset('assets/image/logo.png'),
            Padding(
              padding: EdgeInsets.only(bottom: 40),
              child: Text('click show toast!'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: onTapShowToast,
      ),
    );
  }
}

我们现在希望把这个页面改造为 UI 部分可以动态更新,弹出 Toast 的逻辑内置的动态页面。

具体的改造步骤如下:

step1:添加 @FairPatch() 注解

() //here
class FairWellSample extends StatefulWidget {
  const FairWellSample({Key? key, required this.title}) : super(key: key);

  final String title;

  
  _FairWellSampleState createState() => _FairWellSampleState();
}

......

这一步和其他场景的改造没有什么区别,只要是 Fair 的动态页面,都需要加 @FairPatch() 注解。

step2:对于需要内置逻辑方法,添加 @FairWell() 注解

import 'package:fair/fair.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

()
class FairWellSample extends StatefulWidget {
  const FairWellSample({Key? key, required this.title}) : super(key: key);

  final String title;

  
  _FairWellSampleState createState() => _FairWellSampleState();
}

class _FairWellSampleState extends State<FairWellSample> {

  ('onTapShowToast') //here
  void onTapShowToast() {
    Fluttertoast.showToast(
        msg: "This is Center Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0
    );
  }

  ......
}

@FairWell() 注解需要传递一个 String 类型的 tag 作为唯一标识:@FairWell('onTapShowToast'),一般和方法名相同即可。

step3:创建 FairDelegate

新建一个类,继承 FairDelegate:

class FairWellSampleDelegate extends FairDelegate {

  ......
}

然后把 @FairWell 标注的方法,完整的拷贝到 FairDelegate 中:

import 'package:fair/fair.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class FairWellSampleDelegate extends FairDelegate {

  void onTapShowToast() {
    Fluttertoast.showToast(
        msg: "This is Center Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0
    );
  }
}

重写 bindFunction 方法,并在里面注册 @FairWell() 的 tag,和对应的 Function:

import 'package:fair/fair.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class FairWellSampleDelegate extends FairDelegate {

  
  Map<String, Function> bindFunction() {
    var functions = super.bindFunction();
    functions.addAll({
      'onTapShowToast': onTapShowToast,
    });
    return functions;
  }

  void onTapShowToast() {
    Fluttertoast.showToast(
        msg: "This is Center Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0
    );
  }
}

step4:在 FairApp 中注册我们自定义的 FairDelegate

void main() {
  // runApp(MyApp());

  WidgetsFlutterBinding.ensureInitialized();

  FairApp.runApplication(
    FairApp(
      child: MyApp(),
      delegate: {
        ///此处delegate注册的key名必须与Fairwidget页面name的名字一致,
        'fair_well_sample': (ctx, _) => FairWellSampleDelegate(),
      },
    ),
    ......
  );
}

step5:执行 build_runner 命令生成 bundle 文件

flutter pub run build_runner build

step6:使用 FairWidget 加载 bundle 资源

FairWidget(
  //注意:FairWidget 的 name 必须和 delegate 注册的 key 值一一对应。
  name: 'fair_well_sample',
  path: 'assets/fair/lib_fair_widget_fairwell_fair_well_sample.fair.json',
  data: {
     'title': 'FairDelegate Page',
  },
)

注意:FairWidget 的 name 必须和 delegate 注册的 key 值一一对应。

上次编辑于:
贡献者: sunzhe03