HarmonyOS鸿蒙Next中怎样获取FrameNode含expandSafeArea的位置大小

HarmonyOS鸿蒙Next中怎样获取FrameNode含expandSafeArea的位置大小 使用getMeasuredSize和getPositionToWindow可以获取到FrameNode的大小和位置，但是不包含expandSafeArea扩展出来的区域，怎样才能获取到expandSafeArea扩展后的背景大小？就是包含了扩展安全区的组件的大小，能不能主动获取，而不是监听变化？

3 回复

可以通过获取扩展的安全区大小后自行计算

获取规避的区域高度的demo

// xxx.ets
import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct SafeAreaExample1 {
  @State text: string = ''
  controller: TextInputController = new TextInputController()

  build() {
    Row() {
      Column()
        .height('100%').width('100%')
        .backgroundImage($r('app.media.background')).backgroundImageSize(ImageSize.Cover)
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
        .onAreaChange((old:Area,newArea:Area)=>{
          console.info("新的Area:", JSON.stringify(newArea))
        })
        .onClick(()=>{
          console.info("进入点击事件")
          window.getLastWindow(getContext(this), (err: BusinessError, data) =>{
            let windowClass: window.Window  = data;
            let topAvoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
            let bottomAvoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
            let bottomRectHeight = px2vp(bottomAvoidArea.bottomRect.height)
            let topRectHeight = px2vp(topAvoidArea.topRect.height)
            console.info("topAvoidArea:",bottomRectHeight)
            console.info("bottomAvoidArea:",topRectHeight)
          })
        });
    }.height('100%')
  }
}

通过getRectangleById获取组件大小

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-uicontext-V5#getrectanglebyid

参考demo:

// xxx.ets
import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext';

@Entry
@Component
struct SafeAreaExample1 {
  @State text: string = ''
  controller: TextInputController = new TextInputController()
  getSafeArea(){
    console.info("进入点击事件")
    window.getLastWindow(getContext(this), (err: BusinessError, data) =>{
      let windowClass: window.Window  = data;
      let topAvoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
      let bottomAvoidArea = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
      let bottomRectHeight = px2vp(bottomAvoidArea.bottomRect.height)
      let topRectHeight = px2vp(topAvoidArea.topRect.height)
      console.info("topAvoidArea:",bottomRectHeight)
      console.info("bottomAvoidArea:",topRectHeight)
    })
  }
  getAreaById(){
    let context = this.getUIContext()
    let componentUtils:ComponentUtils = context.getComponentUtils();
    let modePosition = componentUtils.getRectangleById("out");
    let localOffsetWidth = modePosition.size.width;
    let localOffsetHeight = modePosition.size.height;
    console.info("localOffsetWidth:", px2vp(localOffsetWidth))
    console.info("localOffsetHeight:",px2vp(localOffsetHeight))
  }
  build() {
    Row() {
      Column()
        .id('out')
        .height('100%').width('100%')
        .backgroundImage($r('app.media.background')).backgroundImageSize(ImageSize.Cover)
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM])
        .onAreaChange((old:Area,newArea:Area)=>{
          console.info("新的Area:", JSON.stringify(newArea))
        })
        .onClick(()=>{
          this.getAreaById()
        });
    }.height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中怎样获取FrameNode含expandSafeArea的位置大小的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，获取FrameNode包含expandSafeArea的位置和大小可以通过FrameNode的getBounds方法实现。getBounds方法返回一个Rect对象，该对象包含了FrameNode的边界信息，包括其位置和大小。

具体步骤如下：

  1. 获取FrameNode对象：首先，你需要获取到目标FrameNode的实例。FrameNode通常是通过Component的getFrameNode方法获取的。

  2. 调用getBounds方法：使用FrameNode对象的getBounds方法，该方法会返回一个Rect对象，包含了FrameNode的边界信息。

  3. 处理expandSafeArea：expandSafeArea是鸿蒙系统中用于扩展安全区域的概念。getBounds方法返回的Rect已经包含了expandSafeArea的影响，因此无需额外处理。

示例代码如下：

const frameNode = component.getFrameNode();
const bounds = frameNode.getBounds();
const left = bounds.left;
const top = bounds.top;
const right = bounds.right;
const bottom = bounds.bottom;
const width = bounds.width;
const height = bounds.height;

在上述代码中，bounds对象包含了FrameNode的位置和大小信息，left、top、right、bottom分别表示FrameNode的边界位置，width和height表示其宽度和高度。

通过这种方式，你可以获取到FrameNode包含expandSafeArea的位置和大小信息。

在HarmonyOS鸿蒙Next中，获取FrameNode包含expandSafeArea的位置大小，可以通过FrameNode的getBounds方法结合expandSafeArea属性来实现。首先，使用getBounds获取FrameNode的原始边界矩形，然后通过expandSafeArea属性获取安全区域的扩展值，最后将两者结合计算出包含安全区域的实际位置和大小。具体代码如下：

Rect bounds = frameNode.getBounds();
Rect expandSafeArea = frameNode.getExpandSafeArea();
Rect finalBounds = new Rect(
    bounds.left - expandSafeArea.left,
    bounds.top - expandSafeArea.top,
    bounds.right + expandSafeArea.right,
    bounds.bottom + expandSafeArea.bottom
);

这样，finalBounds即为包含expandSafeArea的FrameNode的实际位置和大小。

回到顶部