HarmonyOS 鸿蒙Next XComponet 组件是否支持 expandSafeArea？

可以使用 setXComponentSurfaceRect + expandSafeArea 来实现

参考 demo

import { BusinessError } from '@kit.BasicServicesKit';
import { camera } from '@kit.CameraKit';
import { abilityAccessCtrl, common } from '@kit.AbilityKit';
import { image } from '@kit.ImageKit';
import { display, window } from '@kit.ArkUI';
const context = this as common.UIAbilityContext;

@Entry
@Component
struct GetFrontCameraImage {
  private xComponentController: XComponentController = new XComponentController();
  private previewOutput?: camera.PreviewOutput
  private photoOutput?: camera.PhotoOutput
  @State pixmap?: image.PixelMap = undefined
  private surfaceId : string | undefined = undefined
  private buffer: ArrayBuffer | undefined = undefined

  async getCameraImage() {
    // 1、使用系统相机框架camera模块获取物理摄像头信息。
    let cameraManager = camera.getCameraManager(context);
    let camerasInfo: Array<camera.CameraDevice> = cameraManager.getSupportedCameras();
    let cameraDevice: camera.CameraDevice = camerasInfo[0];
    // 检测相机状态
    cameraManager.on('cameraStatus', (err: BusinessError, cameraStatusInfo: camera.CameraStatusInfo) => {
      console.log(`camera : ${cameraStatusInfo.camera.cameraId}`);
      console.log(`status : : ${cameraStatusInfo.status}`);
    });
    // 2、创建并启动物理摄像头输入流通道
    // 设置为前置摄像头 camera.CameraPosition.CAMERA_POSITION_FRONT
    let cameraInput = cameraManager.createCameraInput(camera.CameraPosition.CAMERA_POSITION_BACK, camera.CameraType.CAMERA_TYPE_DEFAULT);
    await cameraInput.open();
    // 3、拿到物理摄像头信息查询摄像头支持预览流支持的输出格式，结合XComponent提供的surfaceId创建预览输出通道
    let outputCapability = cameraManager.getSupportedOutputCapability(cameraDevice, camera.SceneMode.NORMAL_PHOTO);
    let previewProfile = outputCapability.previewProfiles[0];
    let surfaceId = this.xComponentController.getXComponentSurfaceId();
    this.previewOutput = cameraManager.createPreviewOutput(previewProfile, surfaceId);
    this.photoOutput = cameraManager!.createPhotoOutput(outputCapability.photoProfiles[0]);
    this.photoOutput!.on('photoAvailable', (errCode: BusinessError, photo: camera.Photo): void => {
      if (errCode) {
        console.error(`${errCode}`)
      }
      let imageObj = photo.main;
      imageObj.getComponent(image.ComponentType.JPEG, async (errCode: BusinessError, component: image.Component) => {
        if (errCode || component === undefined) {
          return;
        }
        if (component.byteBuffer) {
          this.buffer = component.byteBuffer;
          console.log("buffer::" + this.buffer.byteLength)
          if (component.byteBuffer as ArrayBuffer) {
            let sourceOptions: image.SourceOptions = {
              sourceDensity: 120,
              sourcePixelFormat: 0, // NV21
              sourceSize: {
                height: outputCapability.previewProfiles[0].size.height,
                width: outputCapability.previewProfiles[0].size.width
              },
            }
            try {
              let imageResource = image.createImageSource(component.byteBuffer, sourceOptions);
              imageResource.createPixelMap().then(res=>{
                this.pixmap = res;
              });
            } catch (error) {
              let err = error as BusinessError;
              console.error('Failed to addOutput(photoOutput). errorCode = ' + err.code);
            }
          }
        } else {
          console.error('byteBuffer is null');
          return;
        }
      })
      imageObj.release();
    })
    // 4、创建相机会话，在会话中添加摄像头输入流和预览输出流，然后启动会话，预览画面就会在XComponent组件上送显。
    let captureSession = cameraManager.createSession(camera.SceneMode.NORMAL_PHOTO);
    captureSession.beginConfig();
    captureSession.addInput(cameraInput);
    captureSession.addOutput(this.previewOutput);
    captureSession.addOutput(this.photoOutput);
    captureSession.commitConfig()
    captureSession.start();
  }

  build() {
    Column(){
      XComponent({ id: 'xComponentId1', type: 'surface', controller: this.xComponentController })
        .onLoad(() => {
          // 在调用前确保已经获得相机权限
          this.surfaceId = this.xComponentController.getXComponentSurfaceId();
          display.getAllDisplays((err, data) => {
            let screenWidth : number = data[0].width
            let screenHeight : number = data[0].height
            let surfaceRect: SurfaceRect = { offsetX: 0, offsetY: 0, surfaceWidth: screenWidth, surfaceHeight: screenHeight }
            this.xComponentController.setXComponentSurfaceRect(surfaceRect)
          })
          abilityAccessCtrl.createAtManager().requestPermissionsFromUser(getContext(this), ['ohos.permission.CAMERA']).then(() => {
            this.getCameraImage();
          })
        })
        .width('100%')
        .expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM])
    }
  }
}

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-xcomponent-V5#setxcomponentsurfacerect12