支持FlutterView · Pull Request !104 · OpenHarmony-SIG/flutter_engine

# 现状：
原来的XComponent与flutterEngine的绑定方案实现是 通过把flutterNapi.shellHolderId作为id
然后再XComponet的生命周期中将id还原转成shellHolder指针，最后通过shell调用引擎相关的接口

```cpp
void XComponentBase::OnSurfaceCreated(OH_NativeXComponent* component, void* window)
{
      PlatformViewOHOSNapi::SurfaceCreated(std::stoll(id_), window);
}
```

弊端：

1. XComponentyu引擎强绑定
2. 无法控制XComponet的与任意的flutterEngine的绑定、解绑（这是flutterEngine的特性）
3. flutterEngine无法绑定到不同的XComponet（因为Id是flutterNapi.shellHolderId传入的）

# 方案

## 实现Flutterview

实现attachToFlutterEngine和detachFromFlutterEngine

```typescript
export class FlutterView {
 public attachToFlutterEngine(flutterEngine: FlutterEngine) {
    this.flutterEngine = flutterEngine;

// 1.给XComponent赋值id
    let params: DVModelParameters = new DVModelParameters();
    (params as Record<string, ESObject>)["xComponentId"] = this.xcomponentId.toString()
    let xComponentModel: DVModel =
      new DVModel("xComponent", params, new DVModelEvents(), new DVModelChildren(), BuildXComponentStruct);
    RootDvModeManager.addDvModel(xComponentModel);

//2.xcomponent绑定engine
    // 将shellHolder传递到C++侧，用于将Xcomponent和FlutterEngine绑定
    this.flutterNapi.xComponentAttachFlutterEngine(this.xcomponentId);
    this.isAttach = true;
  }
    public detachFromFlutterEngine() {
    this.flutterNapi.xComponentDetachFlutterEngine(this.xcomponentId);
    this.flutterEngine = null
    this.isAttach = false
  }
}
```

其中attachToFlutterEngine主要的作用有2

1. 给xComponent赋一个随机的id，用作为唯一标识
2. 新增flutterNapi.xComponentAttachFlutterEngine函数，将xComponent与当前flutterEngine绑定起来（其实就是flutterNapi.shellholderID）

### attachToFlutterEngine

FlutterAbility的loadContent函数中调用创建FlutterView，并attachToFlutterEngine

```typescript
export class FlutterAbility extends UIAbility implements Host {

loadContent() {

//1.创建flutterView
      if (!this.flutterView) {
        if (this.delegate) {
          this.flutterView = this.delegate?.onCreateView();
        }
      }
  }
}
```

```typescript 
//FlutterAbilityDelegate.ets 调用attachToFlutterEngine绑定engine
  onCreateView(): FlutterView | null {
    if (this.getFlutterNapi()) {
      this.flutterView = new FlutterView(this.getFlutterNapi()!);
      if (this.flutterEngine) {
        this.flutterView?.attachToFlutterEngine(this.flutterEngine!)
      }else{
          throw new Error('this.flutterEngine() is null!');
      }
      return this.flutterView;
    } else {
      return null;
    }
  }
```

### detachFromFlutterEngine

其中detachFromFlutterEngine的操作就是将一些数据置空

在FlutterAbility的onDestory函数调用FlutterAbilityDelegate.onDestroyView,最后调用flutterView.

FlutterAbility
```
  onDestroy() {
    this.context.eventHub.off(EVENT_BACK_PRESS);
    if (this.stillAttachedForEvent("onDestroy")) {
      this?.delegate?.onDestroyView();
      this?.delegate?.onDestroy();
    }
  }
```

FlutterAbilityDelegate
```
  onDestroyView() {
    Log.i(TAG, "onDestroyView()");
    this.ensureAlive();
    this.flutterView?.detachFromFlutterEngine()
  }
```

类型	指派人员	状态
审查	zjzhu aibin lihui	进行中 (0/1人)
测试	openharmony_ci	进行中 (0/1人)

OpenHarmony-SIG/flutter_engine关闭 .gitee-modal { width: 500px !important; }

搜索帮助

OpenHarmony-SIG/flutter_engine
关闭