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

1、HarmonyOS promptAction在显示自定义弹窗的时候，底部会有一个固定宽度的白色底？

参考demo：

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
@Component
struct 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%')}
}

promptAction.openCustomDialog弹窗宽度固定在设备竖屏时默认为4个栅格，横屏时为5个栅格。如果咱们想要自定义弹窗样式建议使用customDialogController

参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-custom-dialog-box-V5

2、HarmonyOS 有没有状态管理V2的优秀实践或者优先案例？

有没有状态管理V2的优秀实践或者优先案例

参考以下代码：

@ObservedV2
class BasicPickData {@Trace fundName: string = ''@Trace plateName: string = ''
}@ObservedV2
class SubPickData {@Trace subCardData: string = ''@Trace cell: BasicPickData[] = []
}@ObservedV2
class MergeCellData {@Trace title: string = ''key: string = ''@Trace items: SubPickData[] = []
}@Entry
@Component
struct 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'+ ifor (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%')}
}@Component
struct ListCom {listData?: SubPickDatabuild() {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%')}}
}@Component
struct 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 + '')}}}
}

3、HarmonyOS 获取底部安全高度，bottomRect.height为0？

获取底部安全高度，bottomRect.height为0

使用下面的类型:windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE\_NAVIGATION\_INDICATOR)

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#ZH-CN_TOPIC_0000001884757714__avoidareatype7

4、HarmonyOS OCR的结果uri如何转换为 image.PixelMap显示在页面上？

参考以下demo：

import { CardRecognition, CallbackParam, CardType, CardSide } from "@kit.VisionKit";
import { image } from '@kit.ImageKit'
import fs from '@ohos.file.fs';@Entry
@Component
struct Index {@State showOCR:boolean = false@State src?: image.PixelMap = undefinedbuild() {Stack() {Column(){Button('click me').onClick(()=>{this.showOCR = true})Image(this.src)}if(this.showOCR) {this.CardOCRPage()}}.width('100%').height('100%')}@BuilderCardOCRPage() {// Stack({ alignContent: Alignment.Top }) {CardRecognition({// 此处选择身份证类型作为示例supportType: CardType.CARD_ID,cardSide:CardSide.FRONT,callback: async (params:CallbackParam)=>{this.showOCR = falseif(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%')}
}

5、HarmonyOS Grid如何设置分割线？

Grid如何设置分割线

目前Grid没有专门的一个分割线设置。 可以通过给GridItem设置边框来实现分割效果，或者在GridItem中使用Divider分隔器组件来设置。

• 给GridItem设置边框：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-grid-V5#%E7%A4%BA%E4%BE%8B6
• Divider分隔器组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-divider-V5