HarmonyOS 鸿蒙Next 想要优化如下代码，有什么好的实现方式嘛
HarmonyOS 鸿蒙Next 想要优化如下代码，有什么好的实现方式嘛 目前的代码行数太多，且很多地方都是重复使用的，请问可以怎么优化一下～
- 这里的 screenHeight 是屏幕高度(去掉啦状态栏的) 这里给个默认值2594
@Entry
@Component
struct HollowPage {
@State handlePopup: boolean = false
@State num: number = 0
@State indicatorTypes: string[] = ['KLINE', 'KDJ', 'BOLL']
@State indicatorTypesMore: string[] = ['SAR', 'K线', 'BOLL', 'SAR', 'K线', 'BOLL', 'SAR', 'K线', 'BOLL', 'SAR', 'K线', 'BOLL',
'SAR', 'K线', 'BOLL', 'SAR', 'K线', 'BOLL', 'SAR', 'K线', 'BOLL', 'SAR', 'K线', 'BOLL',]
// 状态栏高度
@StorageLink("screenHe") screenHeight: number = 2594
// 记录当前指标选择框距离屏幕底部的距离
@State targetBottomHeight_1: number = 0
@State targetBottomHeight_2: number = 0
@State targetBottomHeight_3: number = 0
// 设置指标类型列表的高度
@State targetListHeight_1: number | null = null
@State targetListHeight_2: number | null = null
@State targetListHeight_3: number | null = null
// 控制指标类型的列表是否展示
@State handlePopup_1: boolean = false
@State handlePopup_2: boolean = false
@State handlePopup_3: boolean = false
// 展示当前指标类型的索引值
@State targetIndex_1: number = 0
@State targetIndex_2: number = 0
@State targetIndex_3: number = 0
// 展示当前指标类型的索引值
@State newTargetListHeight_1: number = 0
@State newTargetListHeight_2: number = 0
@State newTargetListHeight_3: number = 0
@Builder
popupBuilder(indicatorType: string) {
if (indicatorType == this.indicatorTypes[0]) {
Scroll() {
Column() {
ForEach(this.indicatorTypes, (item: string, index: number) => {
Column() {
Text(item).margin({ top: 10, bottom: 10 }).fontColor(this.targetIndex_1 == index ? '#ff5500' : '#000000')
if (index !== this.indicatorTypes.length - 1) {
Divider().strokeWidth(0.5).color('#2E000000').margin({ left: 15, right: 15 })
}
}.onClick(() => {
this.handlePopup_1 = !this.handlePopup_1
this.targetIndex_1 = index
})
})
}.onAreaChange((oldArea: Area, newArea: Area) => {
this.newTargetListHeight_1 = newArea.height as number
this.targetListHeight_1 = this.newTargetListHeight_1 > this.targetBottomHeight_1 ? this.targetBottomHeight_1 : this.newTargetListHeight_1
})
}.scrollable(ScrollDirection.Vertical).scrollBar(BarState.Off)
.height(this.targetListHeight_1)
} else if (indicatorType == this.indicatorTypes[1]) {
Scroll() {
Column() {
ForEach(this.indicatorTypesMore, (item: string, index: number) => {
Column() {
Text(item).margin({ top: 10, bottom: 10 }).fontColor(this.targetIndex_2 == index ? '#ff5500' : '#000000')
if (index !== this.indicatorTypesMore.length - 1) {
Divider().strokeWidth(0.5).color('#2E000000').margin({ left: 15, right: 15 })
}
}.onClick(() => {
this.handlePopup_2 = !this.handlePopup_2
this.targetIndex_2 = index
})
})
}.onAreaChange((oldArea: Area, newArea: Area) => {
this.newTargetListHeight_2 = newArea.height as number
this.targetListHeight_2 = this.newTargetListHeight_2 > this.targetBottomHeight_2 ? this.targetBottomHeight_2 - 10 : this.newTargetListHeight_2
})
}.scrollable(ScrollDirection.Vertical).scrollBar(BarState.Off)
.height(this.targetListHeight_2)
} else if (indicatorType == this.indicatorTypes[2]) {
Scroll() {
Column() {
ForEach(this.indicatorTypesMore, (item: string, index: number) => {
Column() {
Text(item).margin({ top: 10, bottom: 10 }).fontColor(this.targetIndex_3 == index ? '#ff5500' : '#000000')
if (index !== this.indicatorTypesMore.length - 1) {
Divider().strokeWidth(0.5).color('#2E000000').margin({ left: 15, right: 15 })
}
}.onClick(() => {
this.handlePopup_3 = !this.handlePopup_3
this.targetIndex_3 = index
})
})
}.onAreaChange((oldArea: Area, newArea: Area) => {
this.newTargetListHeight_3 = newArea.height as number
this.targetListHeight_3 = this.newTargetListHeight_3 > this.targetBottomHeight_3 ? this.targetBottomHeight_3 - 10 : this.newTargetListHeight_3
})
}.scrollable(ScrollDirection.Vertical).scrollBar(BarState.Off)
.height(this.targetListHeight_3)
}
}
build() {
Column() {
ForEach(this.indicatorTypes, (indicatorType: string, index: number) {
if (indicatorType == this.indicatorTypes[0]) {
Text() {
Span(this.indicatorTypes[this.targetIndex_1])
ImageSpan($r('app.media.ic_trangle_top')).rotate({ angle: 180 })
.width(8)
.verticalAlign(ImageSpanAlignment.CENTER)
.margin({ left: 5 })
}
.fontSize(12)
.align(Alignment.TopStart)
.backgroundColor('#F5F5F5')
.margin({ left: 10, top: 5 })
.padding({ top: 2, bottom: 2, left: 4, right: 4 })
.borderRadius(5)
.onAreaChange((oldArea: Area, newArea: Area) => {
this.targetBottomHeight_1 = (px2vp(this.screenHeight) - (newArea.height as number) - (newArea.globalPosition.y as number))
})
.onClick(() => {
this.handlePopup_1 = !this.handlePopup_1
})
.bindPopup(this.handlePopup_1, {
builder: this.popupBuilder(indicatorType),
width: 90,
radius: 5, //边框圆角
mask: { color: '#99C0C0C0' }, //遮罩层颜色
shadow: ShadowStyle.OUTER_DEFAULT_XS, //设置阴影
placement: Placement.Bottom, //popup组件相对目标的显示位置
})
} else if (indicatorType == this.indicatorTypes[1]) {
Text() {
Span(this.indicatorTypesMore[this.targetIndex_2])
ImageSpan($r('app.media.ic_trangle_top')).rotate({ angle: 180 })
.width(8)
.verticalAlign(ImageSpanAlignment.CENTER)
.margin({ left: 5 })
}
.fontSize(12)
.align(Alignment.TopStart)
.backgroundColor('#F5F5F5')
.margin({ left: 10, top: 5 })
.padding({ top: 2, bottom: 2, left: 4, right: 4 })
.borderRadius(5)
.onAreaChange((oldArea: Area, newArea: Area) => {
this.targetBottomHeight_2 = (px2vp(this.screenHeight) - (newArea.height as number) - (newArea.globalPosition.y as number))
})
.onClick(() => {
this.handlePopup_2 = !this.handlePopup_2
})
.bindPopup(this.handlePopup_2, {
builder: this.popupBuilder(indicatorType),
width: 90,
radius: 5, //边框圆角
mask: { color: '#99C0C0C0' }, //遮罩层颜色
shadow: ShadowStyle.OUTER_DEFAULT_XS, //设置阴影
placement: Placement.Bottom, //popup组件相对目标的显示位置
})
} else if (indicatorType == this.indicatorTypes[2]) {
Text() {
Span(this.indicatorTypesMore[this.targetIndex_3])
ImageSpan($r('app.media.ic_trangle_top')).rotate({ angle: 180 })
.width(8)
.verticalAlign(ImageSpanAlignment.CENTER)
.margin({ left: 5 })
}
.fontSize(12)
.align(Alignment.TopStart)
.backgroundColor('#F5F5F5')
.margin({ left: 10, top: 5 })
.padding({ top: 2, bottom: 2, left: 4, right: 4 })
.borderRadius(5)
.onAreaChange((oldArea: Area, newArea: Area) => {
this.targetBottomHeight_3 = (px2vp(this.screenHeight) - (newArea.height as number) - (newArea.globalPosition.y as number))
})
.onClick(() => {
this.handlePopup_3 = !this.handlePopup_3
})
.bindPopup(this.handlePopup_3, {
builder: this.popupBuilder(indicatorType),
width: 90,
radius: 5, //边框圆角
mask: { color: '#99C0C0C0' }, //遮罩层颜色
shadow: ShadowStyle.OUTER_DEFAULT_XS, //设置阴影
placement: Placement.Bottom, //popup组件相对目标的显示位置
})
}
Column() {
Text(this.targetBottomHeight_1.toString())
Text(this.targetBottomHeight_2.toString())
Text(this.targetBottomHeight_3.toString())
}.width('100%').height(100).backgroundColor('#C0C0C0')
}, (item: string) => item.toString())
}.width('100%').height('100%')
}
}更多关于HarmonyOS 鸿蒙Next 想要优化如下代码，有什么好的实现方式嘛的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
7 回复
几个推荐：
1、引用传递要用专门格式：文档示例如下
[@Builder](/user/Builder) function overBuilder($: { paramA1: string }) {
Row() {
Text(`UseStateVarByReference: ${$$.paramA1} `)
}
}2、.bindPopup中builder赋值方式：
无参数的@Builder可直接：builer: this.builder_func 不带括号
有参数的@Builder，builder: () => {this.builder(params…);}, 如用引用传递，则：
builder: () => {this.builder({ paramA1: xxx }...);}3、ForEach循环渲染中数组元素有无更新UI需求，加上元素被作为@Builder的参数，
状态更新UI可能会有挑战，不行则需考虑用@Observed + @ObjectLink, 将字符串数组转换成对象数组，
用对象封装字符串。
组合比较复杂，是否可行只能测试来看。
更多关于HarmonyOS 鸿蒙Next 想要优化如下代码，有什么好的实现方式嘛的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，优化代码可以通过以下几种方式实现：
-
使用ArkTS语言特性：ArkTS是鸿蒙Next推荐的语言，支持类型推断、异步编程等特性，能够提升代码的可读性和性能。
-
减少不必要的UI更新：通过
@State、@Prop等装饰器管理组件状态，避免不必要的UI重绘。 -
合理使用异步任务：使用
TaskDispatcher进行异步任务调度，避免阻塞主线程，提升应用响应速度。 -
优化资源加载：使用
ResourceManager进行资源管理，避免重复加载和内存泄漏。 -
减少组件嵌套：减少不必要的组件嵌套，降低渲染层级，提升渲染效率。
-
使用高效的数据结构：根据场景选择合适的数据结构，如
List、Map等，提升数据操作效率。 -
避免频繁的GC操作：减少临时对象的创建，避免频繁触发垃圾回收，影响性能。
-
使用性能分析工具：通过DevEco Studio的性能分析工具，定位性能瓶颈，进行针对性优化。
以上方法可以帮助你在鸿蒙Next中优化代码，提升应用性能。
