概述

组件化又叫模块化，即基于可重用的目的，将一个大型App按照关注点分离的方式，拆分成多个独立的组件或模块。每个独立的组件都是一个单独App，可以单独维护、升级甚至直接替换。

SOLD原则

1. 单一功能(SRP)：对象应该仅具有一种单一功能
2. 开闭原则(OCP)：程序应该是对于扩展开放的，但是对于修改封闭的
3. 里氏替换(LSP)：程序中的对象应该是可以在不改变程序正确性的前提下被它的子类所替换的
4. 接口隔离(ISP)：多个特定客户端接口要好于一个宽泛用途的接口
5. 依赖反转(DIP)：一个方法应该遵从“依赖于抽象而不是一个实例“

解决项目中的可维护性、代码复用性

可维护性

功能改动风险大、依赖严重

代码复用性

同一功能，在不同项目中拷贝，由于后期迭代，展示和交互逻辑不一致

方案

Flutter package

每个业务或者功能，按照package方式创建

flutter create -t package --org com.example.flutter.network

其中，network.dart的代码:

library network;



/// A Calculator.

class Calculator {

 /// Returns [value] plus 1.

 int addOne(int value) => value + 1;

}

所有的功能基于Dart实现，文件放在在lib目录中。

如果需要一个用于测试的App项目，在组件工程根目录中，创建一个测试的App项目:

flutter create example

在App中引入组件，在pubspec.yaml中:

dependencies:

  flutter:

    sdk: flutter

  network:

    path: ../

然后在需要的地方，导入:

import 'package:network/network.dart';

综上所述，基于Flutter package的方案：

优点：

1、集成方式简单，和使用第三方库一样

2、开发和编译效率也快，不需要编译整个业务App

缺点：

1、需要单独维护组件版本和代码仓库(可以使用Melos，单仓库管理)

2、资源文件的引入路径不一样，当被嵌入业务App之后，路径前面多了packages/组件名。

Flutter module

在iOS或Android原生工程中集成Flutter。

flutter create --template module my_flutter

.ios和.android为自动生成，每次build都会重新生成。

Flutter plugin

交互图:

flutter create -t plugin --org com.example.flutter network

cd network

# 添加特定平台支持 iOS

flutter create -t plugin --platforms ios .

# 添加特定平台支持 android

flutter create -t plugin --platforms android .

1. ios/Classes/：实现iOS平台的功能
2. android/src/main/java/com/example/network/：实现Android平台的功能
3. lib：Dart层实现
4. example：自带的示例工程

pubspec.yaml

name: crm_network

description: A new flutter plugin project.

version: 0.0.1

homepage:



environment:

 sdk: ">=2.12.0 <3.0.0"

 flutter: ">=1.20.0"



dependencies:

 flutter:

  sdk: flutter


dev_dependencies:

 flutter_test:

  sdk: flutter


flutter:

  plugin:

  platforms:

   ios:

    pluginClass: NetworkPlugin

   android:

    package: com.example.network

    pluginClass: NetworkPlugin

lib/network.dart

import 'dart:async';



import 'package:flutter/services.dart';



class Network {

 static const MethodChannel _channel =

   const MethodChannel('crm_network');

 static Future<String?> get platformVersion async {

  final String? version = await _channel.invokeMethod('getPlatformVersion');

  return version;

 }

}

组件通信

• Callback

• Notification

class CustomNotification extends Notification {

  CustomNotification(this.msg);

  final String msg;

}



class CustomChild extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return RaisedButton(

      //按钮点击时分发通知

      onPressed: () => CustomNotification("Hi").dispatch(context),

      child: Text("Fire Notification"),

    );

  }

}





class _MyHomePageState extends State<MyHomePage> {

  String _msg = "通知：";

  @override

  Widget build(BuildContext context) {

    return NotificationListener<CustomNotification>(

        onNotification: (notification) {

          setState(() {_msg += notification.msg+"  ";});//收到子Widget通知，更新msg

        },

        child:Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: <Widget>[Text(_msg),CustomChild()],//将子Widget加入到视图树中

        )

    );

  }

}

页面

• Dart Stream

// 发射

this.emit('Event');

// 订阅

this.subscribe('Event', (event){});