[ohos]使用Navigation，解决半透明弹窗不透底的问题

CHANGELOG.md

@@ -3,6 +3,7 @@
 2. [ohos]简化鸿蒙示例代码
 3. [ohos]非官方认可的联合插件，需要在pubspec中单独指定
 4. [ohos]修复WebView示例代码
+5. [ohos]使用Navigation，解决半透明弹窗不透底的问题
 
 ## 4.5.4
 1. [ohos]支持传入启动参数和dart入口参数

example/ohos/entry/src/main/ets/constants/RouterConstants.ets

@@ -0,0 +1,5 @@
+export class RouterNameConstants {
+  static readonly FLUTTER_DIALOG: string = 'pages/FlutterUIDialog';
+  static readonly FLUTTER_PAGE: string = 'pages/FlutterUIPage';
+  static readonly NATIVE_PAGE: string = 'pages/NativePage';
+}

example/ohos/entry/src/main/ets/entryability/EntryAbility.ets

@@ -31,35 +31,29 @@ import {
   FlutterBoost,
   FlutterBoostDelegate,
   FlutterBoostRouteOptions,
-  FlutterBoostAbility,
-  FlutterBoostSetupOptions,
   FlutterBoostSetupOptionsBuilder
 } from '@ohos/flutter_boost';
 import FlutterManager from '@ohos/flutter_ohos/src/main/ets/embedding/ohos/FlutterManager';
 
-import router from '@ohos.router';
+import { RouterModule, RouterOptions } from '../router/RouterModule';
+import { RouterNameConstants } from '../constants/RouterConstants';
 
+const TAG: string = "EntryAbility";
 export default class EntryAbility extends UIAbility implements FlutterBoostDelegate {
-  // 打开原生
+  // 打开原生页面
   pushNativeRoute(options: FlutterBoostRouteOptions) {
-    router.pushUrl({ url: 'pages/NativePage' })
+    RouterModule.push(RouterNameConstants.NATIVE_PAGE)
   }
 
-  // 打开flutter
+  // 打开flutter页面
   pushFlutterRoute(options: FlutterBoostRouteOptions) {
-    let pageName: string = 'pages/FlutterUIPage'
-    if (options.isOpaque() == false) {
-      pageName = 'pages/FlutterUITransparentPage'
+    let routerName: string = RouterNameConstants.FLUTTER_PAGE
+    if (!options.isOpaque()) {
+      routerName = RouterNameConstants.FLUTTER_DIALOG
     }
 
-    router.pushUrl({
-      url: pageName, params: {
-        uri: options.getPageName(),
-        params: options.getArguments(),
-      }
-    }).then(() => {
-      console.info('Succeeded in jumping to the second page.')
-    })
+    RouterModule.push(routerName, new RouterOptions(options.getPageName(),
+      options.getArguments()));
   }
 
   async onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
@@ -68,51 +62,51 @@ export default class EntryAbility extends UIAbility implements FlutterBoostDeleg
 
   onDestroy(): void {
     FlutterManager.getInstance().popUIAbility(this)
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
+    hilog.info(0x0000, TAG, '%{public}s', 'Ability onDestroy');
   }
 
   onWindowStageCreate(windowStage: window.WindowStage): void {
     // Main window is created, set main page for this ability
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
+    hilog.info(0x0000, TAG, '%{public}s', 'Ability onWindowStageCreate');
     FlutterManager.getInstance().pushWindowStage(this, windowStage)
 
     const optionsBuilder: FlutterBoostSetupOptionsBuilder = new FlutterBoostSetupOptionsBuilder()
       .setShellArgs(['--trace-systrace', '--user-authorization-code=QZvoUptODA+KDgeFUluhheYns7X7CnDu9YRv8YmU0GXQcKLzs4C2WgjblrAIhtkqqGg=='])
       .setDartEntrypointArgs(['I am from ohos!', '--for-test'])
 
     FlutterBoost.getInstance().setup(this, this.context, (engine) => {
-      hilog.info(0x0000, 'testTag', '%{public}s', '引擎初始化成功');
+      hilog.info(0x0000, TAG, '%{public}s', '引擎初始化成功');
 
       // register plugins
       GeneratedPluginRegistrant.registerWith(engine)
 
       windowStage.loadContent('pages/EntryPage', (err, data) => {
         if (err.code) {
-          hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
+          hilog.error(0x0000, TAG, 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
           return;
         }
-        hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
+        hilog.info(0x0000, TAG, 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
       });
 
     }, optionsBuilder.build())
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
+    hilog.info(0x0000, TAG, '%{public}s', 'Ability onCreate');
 
 
   }
 
   onWindowStageDestroy(): void {
     FlutterManager.getInstance().popWindowStage(this)
     // Main window is destroyed, release UI related resources
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
+    hilog.info(0x0000, TAG, '%{public}s', 'Ability onWindowStageDestroy');
   }
 
   onForeground(): void {
     // Ability has brought to foreground
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
+    hilog.info(0x0000, TAG, '%{public}s', 'Ability onForeground');
   }
 
   onBackground(): void {
     // Ability has back to background
-    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
+    hilog.info(0x0000, TAG, '%{public}s', 'Ability onBackground');
   }
 }

example/ohos/entry/src/main/ets/pages/EntryPage.ets

@@ -23,18 +23,23 @@
  */
 
 import hilog from '@ohos.hilog';
-import router from '@ohos.router';
 import { FlutterBoost } from '@ohos/flutter_boost';
-import { FlutterUIComponent } from './FlutterUIPage';
+import { FlutterUIComponent } from './FlutterUIComponent';
+import { FlutterUIPage } from './FlutterUIPage';
+import { FlutterUIDialog } from './FlutterUIDialog';
+import { NativePage } from './NativePage';
+import { RouterModule } from '../router/RouterModule';
+import { RouterNameConstants } from '../constants/RouterConstants';
 
-const TAG: string = "xlog-EntryPage";
+const TAG: string = "EntryPage";
 @Entry
 @Component
 struct EntryPage {
   @State message: string = 'FlutterBoost Example';
   @State fontColor: string = '#182431'
   @State selectedFontColor: string = '#007DFF'
   @State currentIndex: number = 0
+  @State routerStack: NavPathStack = new NavPathStack();
   private controller: TabsController = new TabsController()
 
   @Builder tabBuilder(index: number, name: string) {
@@ -52,83 +57,98 @@ struct EntryPage {
     }.width('100%')
   }
 
-  build() {
+  @Builder routerMap(builderName: string, param: object) {
+    if (builderName == RouterNameConstants.FLUTTER_PAGE) {
+      FlutterUIPage()
+    } else if (builderName == RouterNameConstants.FLUTTER_DIALOG) {
+      FlutterUIDialog()
+    } else {
+      NativePage()
+    }
+  }
+
+  @Builder homeContents() {
     Column() {
-      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
-        // 1. Home
-        TabContent() {
-          Row() {
-            Column() {
-              Text(this.message)
-                .fontSize(28)
-                .fontColor(Color.Red)
-                .fontWeight(FontWeight.Bold)
-                .decoration({ type: TextDecorationType.Underline, color: Color.Yellow })
-                .margin({ bottom: 70 })
-              Button('打开Flutter页面')
-                .margin({ bottom: 20 })
-                .onClick(() => {
-                  try {
-                    FlutterBoost.getInstance().open('flutterPage', {})
-                  } catch (err) {
-                    hilog.info(0x0000, TAG, '%{public}s', 'Failed to 打开Flutter页面');
-                  }
-                })
-              Button('打开Native页面')
-                .margin({ bottom: 20 })
-                .onClick(() => {
-                  try {
-                    router.pushUrl({ url: 'pages/NativePage' })
-                  } catch (err) {
-                    hilog.info(0x0000, TAG, '%{public}s', 'Failed to 打开Native页面');
-                  }
-                })
-              Button('打开Flutter半透明弹窗')
-                .margin({ bottom: 20 })
-                .onClick(() => {
-                  try {
-                    FlutterBoost.getInstance().open('transparentWidget', {})
-                  } catch (err) {
-                    hilog.info(0x0000, TAG, '%{public}s', 'Failed to 打开Flutter页面');
-                  }
-                })
-            }
-            .width('100%')
+      Text(this.message)
+        .fontSize(28)
+        .fontColor(Color.Red)
+        .fontWeight(FontWeight.Bold)
+        .decoration({ type: TextDecorationType.Underline, color: Color.Yellow })
+        .margin({ bottom: 70 })
+      Button('打开Flutter页面')
+        .margin({ bottom: 20 })
+        .onClick(() => {
+          try {
+            FlutterBoost.getInstance().open('flutterPage', {})
+          } catch (err) {
+            hilog.info(0x0000, TAG, '%{public}s', 'Failed to 打开Flutter页面');
+          }
+        })
+      Button('打开Native页面')
+        .margin({ bottom: 20 })
+        .onClick(() => {
+          try {
+            RouterModule.push(RouterNameConstants.NATIVE_PAGE);
+          } catch (err) {
+            hilog.info(0x0000, TAG, '%{public}s', 'Failed to 打开Native页面');
+          }
+        })
+      Button('打开Flutter半透明弹窗')
+        .margin({ bottom: 20 })
+        .onClick(() => {
+          try {
+            FlutterBoost.getInstance().open('transparentWidget', {}, false)
+          } catch (err) {
+            hilog.info(0x0000, TAG, '%{public}s', 'Failed to 打开Flutter页面');
           }
-          .height('100%')
-        }.tabBar(this.tabBuilder(0, 'Home'))
-        // 2. Index
-        TabContent() {
-          FlutterUIComponent({ uri: 'flutterPage' })
-        }.tabBar(this.tabBuilder(1, 'Index'))
-        // 3. MediaQuery
-        TabContent() {
-          FlutterUIComponent({ uri: 'mediaquery' })
-        }.tabBar(this.tabBuilder(2, 'MediaQuery'))
-        // 4. ArkUI
-        TabContent() {
-          Row() {
+        })
+    }.justifyContent(FlexAlign.Center).width('100%').height('100%')
+  }
+
+  aboutToAppear() {
+    RouterModule.setRouterStack(this.routerStack);
+  }
+
+  build() {
+    // Navigation关联NavPathStack路由栈
+    Navigation(this.routerStack) {
+      Column() {
+        Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
+          // 1. Home
+          TabContent() {
+            this.homeContents()
+          }.tabBar(this.tabBuilder(0, 'Home'))
+          // 2. Index
+          TabContent() {
+            FlutterUIComponent({ uri: 'flutterPage' })
+          }.tabBar(this.tabBuilder(1, 'Index'))
+          // 3. MediaQuery
+          TabContent() {
+            FlutterUIComponent({ uri: 'mediaquery' })
+          }.tabBar(this.tabBuilder(2, 'MediaQuery'))
+          // 4. ArkUI
+          TabContent() {
             Column() {
               Text("ArkUI")
                 .fontSize(50)
                 .fontWeight(FontWeight.Bold)
-            }
-            .width('100%')
-          }
-          .height('100%')
-        }.tabBar(this.tabBuilder(3, 'ArkUI'))
-      }
-      .vertical(false)
-      .barMode(BarMode.Fixed)
-      .barWidth('100%')
-      .barHeight(56)
-      .animationDuration(300)
-      .onChange((index: number) => {
-        this.currentIndex = index
-      })
-      .width('100%')
-      .height('100%')
-    }.width('100%')
+            }.justifyContent(FlexAlign.Center).width('100%').height('100%')
+          }.tabBar(this.tabBuilder(3, 'ArkUI'))
+        }
+        .vertical(false)
+        .barMode(BarMode.Fixed)
+        .barWidth('100%')
+        .barHeight(56)
+        .animationDuration(300)
+        .onChange((index: number) => {
+          this.currentIndex = index
+        })
+        .width('100%')
+        .height('100%')
+      }.width('100%').height('100%')
+    }
+    .navDestination(this.routerMap) // Navigation关联routerMap路由表
+    .hideTitleBar(true) // important
   }
 
   onBackPress(): boolean | void {

example/ohos/entry/src/main/ets/pages/FlutterUIComponent.ets

@@ -0,0 +1,56 @@
+import Curves from '@ohos.curves'
+import hilog from '@ohos.hilog';
+import { FlutterBoostEntry } from '@ohos/flutter_boost';
+import { FlutterPage, FlutterView } from '@ohos/flutter_ohos';
+
+const TAG: string = "FlutterUIComponent";
+@Component
+export struct FlutterUIComponent {
+  @Prop uri: string;
+  @Prop params: Record<string, Object>;
+
+  private flutterEntry: FlutterBoostEntry | null = null;
+  private flutterView?: FlutterView;
+  private effect: object =
+    TransitionEffect.OPACITY
+      .combine(TransitionEffect.move(TransitionEdge.END)).animation({curve: Curves.springMotion()});
+
+  aboutToAppear() {
+    this.flutterEntry = new FlutterBoostEntry(getContext(this), {
+      uri: this.uri,
+      params: this.params,
+    });
+    this.flutterEntry.aboutToAppear();
+    this.flutterView = this.flutterEntry.getFlutterView();
+    hilog.info(0x0000, TAG, 'Component(#%{public}s) aboutToAppear===', this.uri);
+  }
+
+  aboutToDisappear() {
+    hilog.info(0x0000, TAG, 'Component(#%{public}s) aboutToDisappear===', this.uri);
+    this.flutterEntry?.aboutToDisappear()
+  }
+
+  onPageShow() {
+    hilog.info(0x0000, TAG, 'Component(#%{public}s) onPageShow===', this.uri);
+    this.flutterEntry?.onPageShow()
+  }
+
+  onPageHide() {
+    hilog.info(0x0000, TAG, 'Component(#%{public}s) onPageHide===', this.uri);
+    this.flutterEntry?.onPageHide()
+  }
+
+  build() {
+    Stack() {
+      FlutterPage({ viewId: this.flutterView?.getId() })
+    }
+    .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
+      if (isVisible) {
+        this.onPageShow();
+      } else {
+        this.onPageHide();
+      }
+    })
+    .transition(this.effect)
+  }
+}