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

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

3 回复

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

通过设置setXComponentSurfaceRect实现。

参考这个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() {
    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}`);
    });

    let cameraInput = cameraManager.createCameraInput(camera.CameraPosition.CAMERA_POSITION_BACK, camera.CameraType.CAMERA_TYPE_DEFAULT);
    await cameraInput.open();

    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();
    })

    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])
    }
  }
}

更多关于HarmonyOS鸿蒙Next中XComponet组件是否支持expandSafeArea的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,XComponent组件支持expandSafeArea属性。该属性用于控制组件是否扩展到安全区域之外,默认值为false。当设置为true时,组件可以扩展到安全区域之外,适用于需要全屏显示的场景。开发者可以通过设置expandSafeArea属性来调整组件的显示范围,以适应不同的UI需求。

在HarmonyOS鸿蒙Next中,XComponent组件主要用于渲染图形和视频内容,目前官方文档中并未明确提到直接支持expandSafeArea属性。expandSafeArea通常用于处理安全区域布局,确保内容不被遮挡。建议使用SafeArea组件或LayoutConstraint来实现类似功能。具体实现可参考鸿蒙官方文档或示例代码。

回到顶部