From a5919a8f59480b3c68e682b2de1ae715d0e81809 Mon Sep 17 00:00:00 2001
From: liugang9704 <2745340733@qq.com>
Date: Fri, 17 Oct 2025 14:19:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9EFAQ=E5=90=8C=E6=BA=90?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ets/pages/ComponentOcclusionSceneOne.ets  | 80 +++++++++++++++++++
 .../ets/pages/ComponentOcclusionSceneTwo.ets  | 80 +++++++++++++++++++
 2 files changed, 160 insertions(+)
 create mode 100644 ArkUI/entry/src/main/ets/pages/ComponentOcclusionSceneOne.ets
 create mode 100644 ArkUI/entry/src/main/ets/pages/ComponentOcclusionSceneTwo.ets

diff --git a/ArkUI/entry/src/main/ets/pages/ComponentOcclusionSceneOne.ets b/ArkUI/entry/src/main/ets/pages/ComponentOcclusionSceneOne.ets
new file mode 100644
index 0000000..0f1bdc9
--- /dev/null
+++ b/ArkUI/entry/src/main/ets/pages/ComponentOcclusionSceneOne.ets
@@ -0,0 +1,80 @@
+/*
+* Copyright (c) 2024 Huawei Device Co., Ltd.
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+/*
+* FAQ：如何判断组件遮挡情况，并主动隐藏被遮挡的组件
+*/
+
+// [Start component_occlusion_scene_one]
+import { inspector, UIInspector } from '@kit.ArkUI';
+
+@Entry
+@Component
+struct ComponentHide {
+  uiInspector: UIInspector = this.getUIContext().getUIInspector();
+  listener: inspector.ComponentObserver = this.uiInspector.createComponentObserver('inspectTarget');
+  @State x: number = 170;
+  @State button1Visibility: Visibility = Visibility.Visible;
+
+  aboutToAppear(): void {
+    let shouldShow: () => void = (): void => {
+      let button1Info = this.getUIContext().getFrameNodeById('button1')?.getPositionToWindowWithTransform(); // vp
+      let button1Size = this.getUIContext().getFrameNodeById('button1')?.getMeasuredSize(); // px
+      let button1TopLeftX = this.getUIContext().vp2px(button1Info?.x); // The x-coordinate of the upper left corner of button1, with the unit of px
+      let button1TopLeftY = this.getUIContext().vp2px(button1Info?.y); // The y-coordinate of the upper left corner of button1, with the unit of px
+      let button1BottomRightX = button1TopLeftX + (button1Size?.width ?? 0); // The x-coordinate at the lower right corner of button1, with the unit of px
+      let button1BottomRightY = button1TopLeftY + (button1Size?.height ?? 0); // The y-coordinate of the lower right corner of button1, with the unit of px
+
+      let button2Info = this.getUIContext().getFrameNodeById('button2')?.getPositionToWindowWithTransform(); // vp
+      let button2Size = this.getUIContext().getFrameNodeById('button2')?.getMeasuredSize(); // px
+      let button2TopLeftX = this.getUIContext().vp2px(button2Info?.x); // The x-coordinate of the upper left corner of button2, with the unit of px
+      let button2TopLeftY = this.getUIContext().vp2px(button2Info?.y); // The y-coordinate of the upper left corner of button2, with the unit of px
+      let button2BottomRightX = button2TopLeftX + (button2Size?.width ?? 0); // The x-coordinate at the lower right corner of button2, with the unit being px
+      let button2BottomRightY = button2TopLeftY + (button2Size?.height ?? 0); // The y-coordinate of the lower right corner of button2, with the unit of px
+
+      let xOverlap = (button1TopLeftX < button2BottomRightX) && (button2TopLeftX < button1BottomRightX);
+      let yOverlap = (button1TopLeftY < button2BottomRightY) && (button2TopLeftY < button1BottomRightY);
+      if (xOverlap && yOverlap) {
+        this.button1Visibility = Visibility.Hidden;
+      } else {
+        this.button1Visibility = Visibility.Visible;
+      }
+      this.listener.on('layout', shouldShow);
+    }
+  }
+
+  build() {
+    Column() {
+      Column() {
+        Button('button1')
+          .position({ x: 200, y: 200 })
+          .id('button1')
+          .visibility(this.button1Visibility)
+      }
+
+      Column() {
+        Button('button2')
+          .position({ x: this.x, y: 200 })
+          .onClick(() => {
+            this.x = 200 - this.x; // If the component position changes, the layout will not be reconfigured and the registered shouldShow callback will not be called
+          })
+          .id('button2')
+      }
+    }
+    .id('inspectTarget')
+  }
+}
+
+// [End component_occlusion_scene_one]
\ No newline at end of file
diff --git a/ArkUI/entry/src/main/ets/pages/ComponentOcclusionSceneTwo.ets b/ArkUI/entry/src/main/ets/pages/ComponentOcclusionSceneTwo.ets
new file mode 100644
index 0000000..db79043
--- /dev/null
+++ b/ArkUI/entry/src/main/ets/pages/ComponentOcclusionSceneTwo.ets
@@ -0,0 +1,80 @@
+/*
+* Copyright (c) 2024 Huawei Device Co., Ltd.
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+/*
+* FAQ：如何判断组件遮挡情况，并主动隐藏被遮挡的组件
+*/
+
+// [Start component_occlusion_scene_two]
+import { inspector, UIInspector } from '@kit.ArkUI';
+
+@Entry
+@Component
+struct ComponentHide {
+  uiInspector: UIInspector = this.getUIContext().getUIInspector();
+  listener: inspector.ComponentObserver = this.uiInspector.createComponentObserver('button2');
+  @State x: number = 170;
+  @State button1Visibility: Visibility = Visibility.Visible;
+
+  aboutToAppear(): void {
+    let shouldShow: () => void = (): void => {
+      let button1Info = this.getUIContext().getFrameNodeById('button1')?.getPositionToWindowWithTransform(); // vp
+      let button1Size = this.getUIContext().getFrameNodeById('button1')?.getMeasuredSize(); // px
+      let button1TopLeftX = this.getUIContext().vp2px(button1Info?.x); // The x-coordinate of the upper left corner of button1, with the unit of px
+      let button1TopLeftY = this.getUIContext().vp2px(button1Info?.y); // The y-coordinate of the upper left corner of button1, with the unit of px
+      let button1BottomRightX = button1TopLeftX + (button1Size?.width ?? 0); // The x-coordinate at the lower right corner of button1, with the unit of px
+      let button1BottomRightY = button1TopLeftY + (button1Size?.height ?? 0); // The y-coordinate of the lower right corner of button1, with the unit of px
+
+      let button2Info = this.getUIContext().getFrameNodeById('button2')?.getPositionToWindowWithTransform(); // vp
+      let button2Size = this.getUIContext().getFrameNodeById('button2')?.getMeasuredSize(); // px
+      let button2TopLeftX = this.getUIContext().vp2px(button2Info?.x); // The x-coordinate of the upper left corner of button2, with the unit of px
+      let button2TopLeftY = this.getUIContext().vp2px(button2Info?.y); // The y-coordinate of the upper left corner of button2, with the unit of px
+      let button2BottomRightX = button2TopLeftX + (button2Size?.width ?? 0); // The x-coordinate at the lower right corner of button2, with the unit being px
+      let button2BottomRightY = button2TopLeftY + (button2Size?.height ?? 0); // The y-coordinate of the lower right corner of button2, with the unit of px
+
+      let xOverlap = (button1TopLeftX < button2BottomRightX) && (button2TopLeftX < button1BottomRightX);
+      let yOverlap = (button1TopLeftY < button2BottomRightY) && (button2TopLeftY < button1BottomRightY);
+      if (xOverlap && yOverlap) {
+        this.button1Visibility = Visibility.Hidden;
+      } else {
+        this.button1Visibility = Visibility.Visible;
+      }
+      this.listener.on('draw', shouldShow); // The listener callbacks after the drawing is completed, with frequent calls, poor performance and high universality
+    }
+  }
+
+  build() {
+    Column() {
+      Column() {
+        Button('button1')
+          .position({ x: 200, y: 200 })
+          .id('button1')
+          .visibility(this.button1Visibility)
+      }
+
+      Column() {
+        Button('button2')
+          .position({ x: this.x, y: 200 })
+          .onClick(() => {
+            this.x = 200 - this.x; // If the component position changes, the layout will not be reconfigured and the registered shouldShow callback will not be called
+          })
+          .id('button2')
+      }
+    }
+    .id('inspectTarget')
+  }
+}
+
+// [End component_occlusion_scene_two]
\ No newline at end of file
-- 
Gitee