鸿蒙疑难杂症解决方法

1. 设置点击区域
   responseRegion

2. Utf8字符串解码
   decodeURIComponent

3. text设置行间距
   .lineSpacing(LengthMetrics.vp(8))

3.1 设置text文本位置
.textAlign(TextAlign.Start) //水平方向
.align(Alignment.Top)//垂直方向

3.2 text省略位置设置，如结尾省略
.textOverflow({overflow:TextOverflow.Ellipsis})

4. imagespan与文字居中设置
   .verticalAlign(ImageSpanAlignment.CENTER)

5. String的slice方法参数说明
   slice(start?: number, end?: number): string;
   start表示实际起始index，end表示实际终止index+1
   let a = ‘abc’
   a.slice(0,2) 结果为‘ab’
   a.slice(1,3)结果为‘bc’

6.快捷创建弹框实例
@Builder
function customDialogBuilder(pageController: xxxController) {
XXXPage({
pageController: pageController
})
}
export class xxxController {
//弹框控制相关
contentNode?: ComponentContent<object> //component节点
promption?: PromptAction //弹框控制实例
show() {
window.getLastWindow(getContext()).then((win: window.Window) => {
let contentNode = new ComponentContent(win.getUIContext(), wrapBuilder(customDialogBuilder), this);
this.contentNode = contentNode
try {
let promptAction = win.getUIContext().getPromptAction();
this.promption = promptAction
promptAction.openCustomDialog(contentNode, {
autoCancel: false, //禁止点击背景关闭
alignment: DialogAlignment.Bottom
});
} catch (error) {
let message = (error as BusinessError).message;
let code = (error as BusinessError).code;
console.error(OpenCustomDialog args error code is ${code}, message is ${message})
}
})
}

close() {
if (this.contentNode) {
this.promption?.closeCustomDialog(this.contentNode)
}
}
}

7.延迟执行方法参考 Timer (定时器)

8.可换行的标签功能，使用flex{text}的结构可以实现，效果如下**

![图片1.png(https://img.haomeiwen.com/i4106106/260f197cd1cc8ea8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

9.设置导航栏颜色**
//设置导航栏颜色
@State systemUi: PageSystemUi = new PageSystemUi()
.orientation(Orientation.PORTRAIT)
.transparentSystemBarLightContent()
.enableInThisPage()

10.设置角标
使用Badge组件

11.正则表达式的使用
let reg = new RegExp('<.*?>','g')
value.description = value.description.replaceAll(reg,'')

12.获取状态栏高度,屏幕高度

/* 获取导航栏高度

• uicontext ui实例
  */

export function getStatusBarHeight(uicontext: Object): Promise<number> {
return new Promise((resolve: Function, reject: Function) => {
window.getLastWindow(getContext(uicontext), (error, topWindow) => {
if (topWindow) {
let area = topWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
let statusBarHeight = area.topRect.height
resolve(px2vp(statusBarHeight))
} else {
reject(error);
}
})
})
}

//获取屏幕高度
export function getScreenWidth():number {
return px2vp(display.getDefaultDisplaySync().width)
}

13.防止1s内重复请求数据
//防止1s内重复请求
let currentInterval = systemDateTime.getTime(false)
if (currentInterval-this.lastRequestTime < 1000) return
this.lastRequestTime = currentInterval

14.一些动画专场，卡片轮播定制的官方demo
<u>HarmonyOS_Samples/AnimationCollection</u>

15.如果需要使用更精确的相对布局推荐使用RelativeContainer组件

16.如果使用lazyforeach实现加载列表数据，则数据源如下

class MyDataSource implements IDataSource {
private list: CBDHomeBannerBaseModel[] = []
private listeners: DataChangeListener[] = []
constructor(list: CBDHomeBannerBaseModel[]) {
this.list = list
}

totalCount(): number {
return this.list.length
}

getData(index: number): CBDHomeBannerBaseModel {
return this.list[index]
}

appendData(item: CBDHomeBannerBaseModel) {
this.list.push(item)
this.notifyDataAdd(this.list.length - 1)
}

insertData(item:CBDHomeBannerBaseModel,index: number) {
this.list.splice(index,0,item)
this.notifyDataAdd(index)
}

removeData(index: number) {
this.list.splice(index, 1)
this.notifyDataDelete(index)
}

registerDataChangeListener(listener: DataChangeListener): void {
if (this.listeners.indexOf(listener) < 0) {
this.listeners.push(listener)
}
}

unregisterDataChangeListener(listener: DataChangeListener) {
if (this.listeners.indexOf(listener) >= 0) {
this.listeners.splice(this.listeners.indexOf(listener), 1)
}
}

notifyDataReload() {
this.listeners.forEach(listener => {
listener.onDataReloaded()
})
}

notifyDataAdd(index: number) {
this.listeners.forEach(listener => {
listener.onDataAdd(index)
})
}

notifyDataChange(index: number) {
this.listeners.forEach(listener => {
listener.onDataChange(index)
})
}

notifyDataDelete(index: number) {
this.listeners.forEach(listener => {
listener.onDataDelete(index)
})
}

notifyDataMove(from: number, to: number) {
this.listeners.forEach(listener => {
listener.onDataMove(from, to)
})
}
}

17.在某个容器中涉及到各个方向的相对布局的子控件推荐使用RelativeContainer，可以设置精确设置子控件的相对位置，示例如下

.alignRules(
{
top:{anchor:"container",align:VerticalAlign.Top},
right:{anchor:"container",align:HorizontalAlign.End}
})