指南

    资料

    # # 编写组件映射表 通过编写组件映射表，Fair可以支持更多的Widget，既可以是Flutter框架的，也可以是三方组件。 ## # 手工编写 执行createBinding创建Binding对象，用于注册： 
    1. FairApp(
    2.   manual: createBinding(
    3.     widget: {
    4.         "MyWidget": CustomTag(key: props['key'], text: props['text']),
    5.     },
    6.   ),
    7. ));
    9. // 自定义组件
    10. class CustomTag extends StatelessWidget {
    11.   final String text;
    13.   const CustomTag({Key key, this.text}) : super(key: key);
    15.   @override
    16.   Widget build(BuildContext context) {
    17.     return Text(text);
    18.   }
    19. }
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 然后在DSL中可以使用： 
    1. {
    2.   "className": "CustomTag",
    3.   "na":{ "text":" Hello World"}
    4. }
    1 2 3 4 ## # 自动生成 如果组件比较多，或者构造比较复杂，手写的效率较低。可以使用@FairBinding()注解为你自动生成代码。 首先为组件添加好注解 
    1. import 'package:fair/fair.dart';
    2. import 'package:flutter/widgets.dart';
    4. @FairBinding()
    5. class CustomTag extends StatelessWidget {
    6.   final String text;
    8.   const CustomTag({Key key, this.text}) : super(key: key);
    10.   @override
    11.   Widget build(BuildContext context) {
    12.     return Text(text);
    13.   }
    14. }
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 接着执行 
    1. flutter pub run build_runner build
    1 生成代码位于src/generated.fair.dart内； 最后绑定自动生成的代码。 
    1. import 'src/generated.fair.dart' as g;
    3. FairApp(
    4.   generated: g.p(),
    5. ));
    1 2 3 4 5 ## # 为三方组件 在实际开发中，我们会使用很多三方的Widget，如何为他们生成组件呢？ 最直接的办法是按需手工编写，也可以借助我们的框架自动生成。 在FairBinding注解上绑定三方组件的package路径，此时，Fair在为组件生成映射表时，也可以同步生成绑定的三方组件映射。 例如我们为convex_bottom_bar生成组件表： 
    1. @FairBinding(resource: 'package:convex_bottom_bar/src/bar.dart',)
    2. class VideoCard extends StatelessWidget {
    3. }
    1 2 3 编写组件映射表 - 图1 ← 模板格式 Bundle资源 →