FairWell 注解和 FairDelegate 的介绍和使用
2022年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 值一一对应。