diff --git a/customappbar/interfaces/custom_app_bar.js b/customappbar/interfaces/custom_app_bar.js
index b7eda8782c4b9b84e23366d06b81f4c519504873..56937fb36e3d596b31784d7d54f6e7c5f2fbdb3e 100644
--- a/customappbar/interfaces/custom_app_bar.js
+++ b/customappbar/interfaces/custom_app_bar.js
@@ -706,20 +706,6 @@ export class CustomAppBar extends ViewPU {
     set labelName(newValue) {
         this.__labelName.set(newValue);
     }
-    aboutToAppear() {
-        if (this.isHalfScreen) {
-            this.contentBgColor = Color.Transparent;
-            this.titleHeight = EYELASH_HEIGHT + 2 * TITLE_MARGIN_TOP + this.statusBarHeight;
-            this.halfScreenShowAnimation();
-        }
-        else {
-            this.containerHeight = '100%';
-            this.containerWidth = '100%';
-        }
-        this.updateStringByResource();
-        this.getDeviceRadiusConfig();
-        this.subscribePrivacyState();
-    }
     aboutToDisappear() {
         this.smListener.off('change');
         this.mdListener.off('change');
@@ -1462,6 +1448,19 @@ export class CustomAppBar extends ViewPU {
             Stack.backgroundColor(ObservedObject.GetRawObject(this.contentBgColor));
             Stack.hitTestBehavior(HitTestMode.Transparent);
             Stack.id('AtomicServiceContainerId');
+            Stack.onAppear(() => {
+                if (this.isHalfScreen) {
+                    this.contentBgColor = Color.Transparent;
+                    this.titleHeight = EYELASH_HEIGHT + 2 * TITLE_MARGIN_TOP + this.statusBarHeight;
+                    this.halfScreenShowAnimation();
+                } else {
+                    this.containerHeight = '100%';
+                    this.containerWidth = '100%';
+                }
+                this.updateStringByResource();
+                this.getDeviceRadiusConfig();
+                this.subscribePrivacyState();
+            })
         }, Stack);
         this.observeComponentCreation2((elmtId, isInitialRender) => {
             If.create();
diff --git a/customappbar/source/custom_app_bar.ets b/customappbar/source/custom_app_bar.ets
index 0743ec6ea38a1ea539fec35ffa1fc0c5f88e89f9..9671da3ea9579cc968768cae477a14dcfadd4dfd 100644
--- a/customappbar/source/custom_app_bar.ets
+++ b/customappbar/source/custom_app_bar.ets
@@ -198,20 +198,6 @@ export struct CustomAppBar {
     events: ['usual.event.PRIVACY_STATE_CHANGED']
   };
 
-  aboutToAppear(): void {
-    if (this.isHalfScreen) {
-      this.contentBgColor = Color.Transparent;
-      this.titleHeight = EYELASH_HEIGHT + 2 * TITLE_MARGIN_TOP + this.statusBarHeight;
-      this.halfScreenShowAnimation();
-    } else {
-      this.containerHeight = '100%';
-      this.containerWidth = '100%';
-    }
-    this.updateStringByResource();
-    this.getDeviceRadiusConfig();
-    this.subscribePrivacyState();
-  }
-
   aboutToDisappear(): void {
     this.smListener.off('change');
     this.mdListener.off('change');
@@ -945,6 +931,19 @@ export struct CustomAppBar {
       .backgroundColor(this.contentBgColor)
       .hitTestBehavior(HitTestMode.Transparent)
       .id('AtomicServiceContainerId')
+      .onAppear(() => {
+        if (this.isHalfScreen) {
+          this.contentBgColor = Color.Transparent;
+          this.titleHeight = EYELASH_HEIGHT + 2 * TITLE_MARGIN_TOP + this.statusBarHeight;
+          this.halfScreenShowAnimation();
+        } else {
+          this.containerHeight = '100%';
+          this.containerWidth = '100%';
+        }
+        this.updateStringByResource();
+        this.getDeviceRadiusConfig();
+        this.subscribePrivacyState();
+      })
     }
     .height('100%')
     .width('100%')