【每日学点 HarmonyOS Next 知识】自定义弹窗背景、状态管理 V2 实践、底部安全高度、OCR 识别结果处理、Grid 分割线

import promptAction from '@ohos.promptAction'@Builder function HWUIToastBuilder() {  Column() {    Text('弹窗')      .fontSize(16)      .fontWeight(FontWeight.Medium)      .fontColor(Color.White)      .textAlign(TextAlign.Center)      .padding(16)  }  .constraintSize({    minWidth: 100,    maxWidth: 200,    minHeight: 56  })  .backgroundColor(Color.Black)  .borderRadius(8)}@Entry@Componentstruct Index {  @State message: string = 'Hello World'  build() {    Row() {      Column() {        Text(this.message)          .fontSize(50)          .fontWeight(FontWeight.Bold)          .onClick(() => {            promptAction.openCustomDialog({              builder: HWUIToastBuilder.bind(this),              // isModal: false,              alignment: DialogAlignment.Center            }).then((id: number) => {              // HWUIToast.toastId = id            })          })      }      .width('100%')    }    .height('100%')  }}

@ObservedV2class BasicPickData {  @Trace fundName: string = ''  @Trace plateName: string = ''}
@ObservedV2class SubPickData {  @Trace subCardData: string = ''  @Trace cell: BasicPickData[] = []}
@ObservedV2class MergeCellData {  @Trace title: string = ''  key: string = ''  @Trace items: SubPickData[] = []}
@Entry@Componentstruct HomeMainPage {  @State testListData: MergeCellData[] = []
  aboutToAppear() {    let mergeCellData: MergeCellData = new MergeCellData()    mergeCellData.title = 'swiper 0'    mergeCellData.key = 'swiperKey'    for (let i = 0; i < 4; i++) {      let swiperItem: SubPickData = new SubPickData()      swiperItem.subCardData = 'subCardData'+ i      for (let j = 0; j < 4;j++) {        let cellData: BasicPickData = new BasicPickData()        cellData.fundName = 'cell_' + j + '_fundName'        cellData.plateName = 'cell_' + j + '_plateName'        swiperItem.cell.push(cellData)      }      mergeCellData.items.push(swiperItem)    }    this.testListData.push(mergeCellData)  }
  // 生成1-100的随机数  getRandomVal() {    const min = 1;    const max = 100;    const randomInt = Math.floor(Math.random() * (max - min + 1)) + min;    return randomInt  }
  build() {    Column() {      Button('refresh').onClick(() => {        setTimeout(() => {          this.testListData[0].title = 'new swiper' + this.getRandomVal()          for (let i = 0; i < this.testListData.length; i++) {            this.testListData[i].title = 'new swiper' + this.getRandomVal()            for (let j = 0; j < this.testListData[i].items.length; j++) {              this.testListData[i].items[j].subCardData = 'new subCardData'+ j + this.getRandomVal()              for (let x = 0; x < this.testListData[i].items[j].cell.length; x++) {                this.testListData[i].items[j].cell[x].fundName = 'cell_' + x + 'new fundName' + x+ this.getRandomVal()                this.testListData[i].items[j].cell[x].plateName = 'cell_' + j + 'new plateName' + j + this.getRandomVal()              }            }          }        }, 1000)      })
      List() {        ForEach(this.testListData, (item: MergeCellData) => {          ListItem() {            SwiperCom({swiperData: item})          }        }, (item: MergeCellData, index: number) => item.key + index)      }      .width('100%')      .height('calc(100% - 56vp - 32vp)')      .padding({ left: 14, right: 14 })    }    .width('100%')    .height('100%')  }}
@Componentstruct ListCom {  listData?: SubPickData
  build() {    Column() {      Text(this.listData?.subCardData)
      List() {        ForEach(this.listData?.cell, (item: BasicPickData, index: number) => {          ListItem() {            Text(item?.fundName)          }        }, (item: BasicPickData, index: number) => index + '')      }      .width('100%')    }  }}
@Componentstruct SwiperCom {  swiperData: MergeCellData = new MergeCellData()
  build() {    Column() {      Text(this.swiperData?.title)
      Swiper() {        ForEach(this.swiperData?.items, (item: SubPickData, index: number) => {          ListCom({listData: item})        }, (item: SubPickData, index: number) => index + '')      }    }  }}

import { CardRecognition, CallbackParam, CardType, CardSide } from "@kit.VisionKit";import { image } from '@kit.ImageKit'import fs from '@ohos.file.fs';

@Entry@Componentstruct Index {
  @State showOCR:boolean = false  @State src?: image.PixelMap = undefined  build() {    Stack() {      Column(){        Button('click me')          .onClick(()=>{            this.showOCR = true          })        Image(this.src)      }      if(this.showOCR) {        this.CardOCRPage()      }    }    .width('100%')    .height('100%')  }  @Builder  CardOCRPage() {    // Stack({ alignContent: Alignment.Top }) {    CardRecognition({      // 此处选择身份证类型作为示例      supportType: CardType.CARD_ID,      cardSide:CardSide.FRONT,      callback: async (params:CallbackParam)=>{        this.showOCR = false        if(params.cardInfo) {          let imageUri = params.cardInfo['front']['cardImageUri'];          let file = fs.openSync(imageUri, fs.OpenMode.READ_ONLY);          console.info('file fd:' + file.fd);          const imageSource: image.ImageSource = image.createImageSource(file.fd);          let decodingOptions: image.DecodingOptions = {            editable: true,            desiredPixelFormat: 3,          }          this.src = await imageSource.createPixelMap(decodingOptions);        }      }    })      // }      .width('100%')      .height('100%')  }}