FairBinding 注解的介绍和使用

本文将为你介绍 @FairBinding 注解。

我们在日常开发中，经常会遇到这样的情况，在某个 Widget 中引用了另一个本地自定义的 Widget。

对于这样的情况，我们需要使用 @FairBinding 注解，为本地 Widget 生成映射关系。

下面我们来讲解一下具体使用步骤。

假设有一个动态页面：FairBindingSample，我在 FairBindingSample 里面引用了一个本地 Widget 叫 FairBindingWidget。

import 'package:example/fair_widget/fairbinding/fair_binding_widget.dart';
import 'package:fair/fair.dart';
import 'package:flutter/material.dart';

@FairPatch()
class FairBindingSample extends StatelessWidget {
  const FairBindingSample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FairBinding 注解演示'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Hello World！',
            ),
            // 引用本地自定义的 FairBindingWidget
            FairBindingWidget(),
          ],
        ),
      )
    );
  }
}

此时，需要使用 @FairBinding 注解，并传入 FairBindingWidget 的路径：

@FairBinding(packages: [
  'package:example/fair_widget/fairbinding/fair_binding_widget.dart',
])
void main() {
  // runApp(MyApp());

  WidgetsFlutterBinding.ensureInitialized();

  FairApp.runApplication(
    FairApp(
      child: MyApp(),
      ......
    )
  );
}

然后，我们需要执行一个 build_runner 命令，用于生成自定义组件 FairBindingWidget 的映射关系：

flutter pub run build_runner build

执行完命令后，在源码中会生成一个 src 目录，在 src 目录下会生成一个 generated.fair.dart 文件：

打开文件，可以看到 FairBindingWidget 的映射关系：

class AppGeneratedModule extends GeneratedModule {
  @override
  Map<String, dynamic> components() {
    return {
      'FairBindingWidget': (props) => FairBindingWidget(
        key: props['key'],
      ),
    };
  }
  
  @override
  Map<String, bool> mapping() {
    return const {
      'FairBindingWidget': true,
    };
  }
}

然后，我们需要将生成的 AppGeneratedModule 注册到 FairApp 中：

import 'src/generated.fair.dart' as g;

void main() {
  // runApp(MyApp());
  
  WidgetsFlutterBinding.ensureInitialized();
  
  FairApp.runApplication(
    FairApp(
      child: MyApp(),
      // 注册 AppGeneratedModule
      generated: g.AppGeneratedModule(),
    )
  );
}

注册完成后，动态页面就可以正常运行了。

另外，如果引用的是一个第三方 SDK 中的 Widget，也可以用将路径传递给 @FairBinding 生成映射关系。