自定义界面扫码，满足应用个性化定制需求

import { scanCore, scanBarcode, customScan } from '@kit.ScanKit';// 导入功能涉及的权限申请、回调接口import { router, promptAction, display } from '@kit.ArkUI';import { AsyncCallback, BusinessError } from '@kit.BasicServicesKit';import { hilog } from '@kit.PerformanceAnalysisKit';import { common, abilityAccessCtrl } from '@kit.AbilityKit';

@Entry@Componentstruct CustomScanPage {  @State userGrant: boolean = false  @State surfaceId: string = ''  @State isShowBack: boolean = false  @State isFlashLightEnable: boolean = false  @State isSensorLight:boolean = false  // 设置预览流高度，默认单位：vp  @State cameraHeight: number = 640  // 设置预览流宽度，默认单位：vp  @State cameraWidth: number = 360  @State cameraOffsetX: number = 0  @State cameraOffsetY: number = 0  @State zoomValue: number = 1  @State setZoomValue: number = 1  @State scaleValue: number = 1  @State pinchValue: number = 1  @State displayHeight: number = 0  @State displayWidth: number = 0  private mXComponentController: XComponentController = new XComponentController()  private TAG: string = '[customScanPage]'
  async showScanResult(result: Array<scanBarcode.ScanResult>) {    if (result.length > 0) {      // 获取到扫描结果后暂停相机流      customScan.stop().then(() => {        hilog.info(0x0001, this.TAG, 'Succeeded in stopping customScan by promise!');      }).catch((error: BusinessError) => {        hilog.error(0x0001, this.TAG,          `Failed to stop customScan by promise. Code: ${error.code}, message: ${error.message}`);      })
      // 使用toast显示出扫码结果      promptAction.showToast({        message: JSON.stringify(result),        duration: 5000      });      this.isShowBack = true;     }  }
  async reqPermissionsFromUser(): Promise<number[]> {    hilog.info(0x0001, this.TAG, 'reqPermissionsFromUser start');    let context = getContext() as common.UIAbilityContext;    let atManager = abilityAccessCtrl.createAtManager();    let grantStatus = await atManager.requestPermissionsFromUser(context, ['ohos.permission.CAMERA']);    return grantStatus.authResults;  }
  // 申请相机权限  async requestCameraPermission() {    let grantStatus = await this.reqPermissionsFromUser();    for (let i = 0; i < grantStatus.length; i++) {      if (grantStatus[i] === 0) {        // 用户授权，可以继续访问目标操作        hilog.info(0x0001, this.TAG, 'Succeeded in getting permissions.');        this.userGrant = true;      }    }  }
  setDisplay() {    // 默认竖屏    let displayClass = display.getDefaultDisplaySync();    this.displayHeight = px2vp(displayClass.height);    this.displayWidth = px2vp(displayClass.width);    let maxLen: number = Math.max(this.displayWidth, this.displayHeight);    let minLen: number = Math.min(this.displayWidth, this.displayHeight);    const RATIO: number = 16 / 9;    this.cameraHeight = maxLen;    this.cameraWidth = maxLen / RATIO;    this.cameraOffsetX = (minLen - this.cameraWidth) / 2;  }
  async onPageShow() {    await this.requestCameraPermission();    let options: scanBarcode.ScanOptions = {      scanTypes: [scanCore.ScanType.ALL],      enableMultiMode: true,      enableAlbum: true    }    this.setDisplay();    // 自定义初始化接口    customScan.init(options);  }
  async onPageHide() {    // 页面消失或隐藏时，停止并释放相机流    this.userGrant = false;    this.isFlashLightEnable = false;    this.isSensorLight = false;    try {      customScan.off('lightingFlash');    } catch (error) {      hilog.error(0x0001, this.TAG, `Failed to off lightingFlash. Code: ${error.code}, message: ${error.message}`);    }    await customScan.stop();    // 自定义相机流释放接口    customScan.release().then(() => {      hilog.info(0x0001, this.TAG, 'Succeeded in releasing customScan by promise.');    }).catch((error: BusinessError) => {      hilog.error(0x0001, this.TAG,        `Failed to release customScan by promise. Code: ${error.code}, message: ${error.message}`);    })  }
  // 自定义扫码界面的顶部返回按钮和扫码提示  @Builder  TopTool() {    Column() {      Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {        Text('返回')          .onClick(async () => {            router.back();          })      }.padding({ left: 24, right: 24, top: 40 })
      Column() {        Text('扫描二维码/条形码')        Text('对准二维码/条形码，即可自动扫描')      }.margin({ left: 24, right: 24, top: 24 })    }    .height(146)    .width('100%')  }
  build() {    Stack() {      if (this.userGrant) {        Column() {          XComponent({            id: 'componentId',            type: 'surface',            controller: this.mXComponentController          })            .onLoad(async () => {              hilog.info(0x0001, this.TAG, 'Succeeded in loading, onLoad is called.');              // 获取XComponent组件的surfaceId              this.surfaceId = this.mXComponentController.getXComponentSurfaceId();              hilog.info(0x0001, this.TAG, `Succeeded in getting surfaceId: ${this.surfaceId}`);              let viewControl: customScan.ViewControl = {                width: this.cameraWidth,                height: this.cameraHeight,                surfaceId: this.surfaceId              };              // 启动相机进行扫码              // 通过Promise方式回调              customScan.start(viewControl)                .then(async (result: Array<scanBarcode.ScanResult>) => {                  // 处理扫码结果                  this.showScanResult(result);                });              customScan.on('lightingFlash', (error, isLightingFlash) => {              if (error) {                hilog.error(0x0001, this.TAG, `Failed to on lightingFlash. Code: ${error.code}, message: ${error.message}`);                return;              }              if (isLightingFlash) {                this.isFlashLightEnable = true;              } else {                if (!customScan.getFlashLightStatus()) {                  this.isFlashLightEnable = false;                }              }                this.isSensorLight = isLightingFlash;             });            })// XComponent宽、高，默认单位vp，支持px、lpx、vp            .width(this.cameraWidth)            .height(this.cameraHeight)            .position({ x: this.cameraOffsetX, y: this.cameraOffsetY })        }        .height('100%')        .width('100%')      }
      Column() {        this.TopTool()        Column() {        }        .layoutWeight(1)        .width('100%')
        Column() {          Row() {            // 闪光灯按钮，启动相机流后才能使用            Button('FlashLight')              .onClick(() => {                // 根据当前闪光灯状态，选择打开或关闭闪关灯                if (customScan.getFlashLightStatus()) {                  customScan.closeFlashLight();                  setTimeout(() => {                    this.isFlashLightEnable = this.isSensorLight;                  }, 200);                } else {                  customScan.openFlashLight();                }              })              .visibility((this.userGrant && this.isFlashLightEnable) ? Visibility.Visible : Visibility.None)
            // 重新扫码按钮            Button('Scan')              .onClick(() => {                // 点击按钮重启相机流，重新扫码                customScan.start({ width: 1920, height: 1080, surfaceId: this.surfaceId })                  .then(async (result: Array<scanBarcode.ScanResult>) => {                    // 处理扫码结果                    this.showScanResult(result);                  })                this.isShowBack = false;              })              .visibility(this.isShowBack ? Visibility.Visible : Visibility.None)          }
          Row() {            Button('缩放比例,当前比例:' + this.setZoomValue)              .onClick(() => {                // 设置相机缩放比例                if (!this.isShowBack) {                  if (!this.zoomValue || this.zoomValue === this.setZoomValue) {                    this.setZoomValue = customScan.getZoom();                  } else {                    this.zoomValue = this.zoomValue;                    customScan.setZoom(this.zoomValue);                    setTimeout(() => {                      if (!this.isShowBack) {                        this.setZoomValue = customScan.getZoom();                      }                    }, 1000);                  }                }              })          }          .margin({ top: 10, bottom: 10 })
          Row() {            TextInput({ placeholder: '输入缩放倍数' })              .type(InputType.Number)              .borderWidth(1)              .backgroundColor(Color.White)              .onChange(value => {                this.zoomValue = Number(value);              })          }        }        .width('50%')        .height(180)      }    }    // 建议相机流设置为全屏    .width('100%')    .height('100%')    .onClick((event: ClickEvent) => {      if (this.isShowBack) {        return;      }      let x1 = vp2px(event.displayY) / (this.displayHeight + 0.0);      let y1 = 1.0 - (vp2px(event.displayX) / (this.displayWidth + 0.0));        customScan.setFocusPoint({ x: x1, y: y1 });        hilog.info(0x0001, this.TAG, `Succeeded in setting focusPoint x1: ${x1}, y1: ${y1}`);      setTimeout(() => {          customScan.resetFocus();      }, 200);    }).gesture(PinchGesture({ fingers: 2 })      .onActionStart((event: GestureEvent) => {        hilog.info(0x0001, this.TAG, 'Pinch start');      })      .onActionUpdate((event: GestureEvent) => {        if (event) {          this.scaleValue = event.scale;        }      })      .onActionEnd((event: GestureEvent) => {        try {          let zoom = customScan.getZoom();          this.pinchValue = this.scaleValue * zoom;          customScan.setZoom(this.pinchValue);          hilog.info(0x0001, this.TAG, 'Pinch end');        } catch (error) {          hilog.error(0x0001, this.TAG, `Failed to setZoom. Code: ${error.code}, message: ${error.message}`);        }      }))  }}