diff --git a/shell/platform/ohos/flutter_embedding/flutter/src/main/ets/embedding/ohos/FlutterPage.ets b/shell/platform/ohos/flutter_embedding/flutter/src/main/ets/embedding/ohos/FlutterPage.ets
index 390bd370c6790e5a04fd9bb6002ecadd5a2cc69b..4e5cdbf062163ccf854f5cd79aba2293e6f6e2bb 100644
--- a/shell/platform/ohos/flutter_embedding/flutter/src/main/ets/embedding/ohos/FlutterPage.ets
+++ b/shell/platform/ohos/flutter_embedding/flutter/src/main/ets/embedding/ohos/FlutterPage.ets
@@ -31,47 +31,58 @@ export struct FlutterPage {
 
   @Builder doNothingBuilder() {}
   @BuilderParam splashScreenView: () => void = this.doNothingBuilder;
-  @State showSplashScreen: boolean = true;
-
-  @State checkFullScreen: boolean = true;
-  @State checkKeyboard: boolean = true;
-  @State checkGesture: boolean = true;
-
-  @StorageLink('nodeWidth') storageLinkWidth: number = 0;
-  @StorageLink('nodeHeight') storageLinkHeight: number = 0;
-
-  @State rootDvModel: DVModelChildren | undefined = undefined
-
-  @State isNeedUpdate: boolean = false;
+  @Builder defaultPage() {
+    Stack() {
+      ForEach(this.rootDvModel!!, (child: ESObject) => {
+        DynamicView({
+          model: child as DVModel,
+          params: child.params,
+          events: child.events,
+          children: child.children,
+          customBuilder: child.builder
+        })
+      }, (child: ESObject) => `${child.id_}`)
 
-  private flutterView?: FlutterView | null
-  private lastArea?: Area;
-  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Up | PanDirection.Down });
 
-  aboutToAppear() {
-    this.flutterView = FlutterManager.getInstance().getFlutterView(this.viewId);
-    this.flutterView?.addFirstFrameListener(this)
+      Text('')
+        .id('emptyFocusText' + this.viewId)
+        .size({ width: 0, height: 0 })
+        .opacity(0)
+        .focusable(true)
 
-    this.flutterView?.setCheckFullScreen(this.checkFullScreen)
-    this.flutterView?.setCheckKeyboard(this.checkKeyboard)
-    this.flutterView?.setCheckGesture(this.checkGesture)
+      XComponent({ id: this.viewId, type: this.xComponentType, libraryname: 'flutter' })
+        .focusable(true)
+        .onLoad((context) => {
+          this.flutterView?.onSurfaceCreated()
+          Log.d(TAG, "XComponent onLoad ");
+        })
+        .onDestroy(() => {
+          Log.d(TAG, "XComponent onDestroy ");
+          this.flutterView?.onSurfaceDestroyed()
+        })
+        .backgroundColor(Color.Transparent)
 
-    this.rootDvModel = this.flutterView!!.getDVModel().children
-    getContext().eventHub.on(OHOS_FLUTTER_PAGE_UPDATE, () => {
-      this.isNeedUpdate = true;
+      if (this.showSplashScreen) {
+        this.splashScreenView();
+      }
+    }
+    .defaultFocus(true)
+    .onAreaChange((oldValue: Area, newValue: Area) => {
+      if (!this.lastArea || oldValue.width != newValue.width
+        || oldValue.height != newValue.height) {
+        Log.d(TAG, "onAreaChange, old=" + JSON.stringify(oldValue));
+        Log.d(TAG, "onAreaChange, new=" + JSON.stringify(newValue));
+        this.lastArea = newValue;
+        this.flutterView?.onAreaChange(newValue)
+      }
+    })
+    .onKeyPreIme((event: KeyEvent) => {
+      Log.d(TAG, "onKeyEvent " + event.type);
+      this.flutterView?.onKeyEvent(event);
+      return false;
     })
   }
-
-  aboutToDisappear() {
-    this.flutterView?.removeFirstFrameListener(this);
-    getContext().eventHub.off(OHOS_FLUTTER_PAGE_UPDATE)
-  }
-
-  onFirstFrame() {
-    this.showSplashScreen = false;
-  }
-
-  build() {
+  @Builder defaultPage() {
     Stack() {
       ForEach(this.rootDvModel!!, (child: ESObject) => {
         DynamicView({
@@ -136,4 +147,51 @@ export struct FlutterPage {
         })
     )
   }
+  @State showSplashScreen: boolean = true;
+
+  @State checkFullScreen: boolean = true;
+  @State checkKeyboard: boolean = true;
+  @State checkGesture: boolean = true;
+
+  @StorageLink('nodeWidth') storageLinkWidth: number = 0;
+  @StorageLink('nodeHeight') storageLinkHeight: number = 0;
+
+  @State rootDvModel: DVModelChildren | undefined = undefined
+
+  @State isNeedUpdate: boolean = false;
+
+  private flutterView?: FlutterView | null
+  private lastArea?: Area;
+  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Up | PanDirection.Down });
+
+  aboutToAppear() {
+    this.flutterView = FlutterManager.getInstance().getFlutterView(this.viewId);
+    this.flutterView?.addFirstFrameListener(this)
+
+    this.flutterView?.setCheckFullScreen(this.checkFullScreen)
+    this.flutterView?.setCheckKeyboard(this.checkKeyboard)
+    this.flutterView?.setCheckGesture(this.checkGesture)
+
+    this.rootDvModel = this.flutterView!!.getDVModel().children
+    getContext().eventHub.on(OHOS_FLUTTER_PAGE_UPDATE, () => {
+      this.isNeedUpdate = true;
+    })
+  }
+
+  aboutToDisappear() {
+    this.flutterView?.removeFirstFrameListener(this);
+    getContext().eventHub.off(OHOS_FLUTTER_PAGE_UPDATE)
+  }
+
+  onFirstFrame() {
+    this.showSplashScreen = false;
+  }
+
+  build() {
+    if (this.checkMouseWheel) {
+      this.mouseWheelPage();
+    } else {
+      this.defaultPage();
+    }
+  }
 }