HarmonyOS 鸿蒙Next 用arkts语言优化下面这段代码

HarmonyOS 鸿蒙Next 用arkts语言优化下面这段代码 这段代码的意思就是,三个组件,点击其中一个循环切换三张图片,同时其他两个恢复为默认值!问题:有什么办法可以优化一下这段代码,ForEach或者@prop等其他办法,我是真的不知道该怎么优化了!求助各位大佬!如果不优化的话,假如有十个组件的时候,代码数量太大了!

@Entry
@Componentstruct Section_9 {
  @State num1: number = 0
  @State num2: number = 0
  @State num3: number = 0
  private imgArray:Resource[]=[
    $r('app.media.icon'),
    $r('app.media.quotation_list_icon_rank_up'),
    $r('app.media.quotation_list_icon_rank_down')
  ]
  @Builder itemRank(item:string,n:number){
    if (n==1){
      Row () {
        Text(item).fontSize(21)
        Image(this.imgArray[this.num1%3]).width(20).height(20)
      }.onClick(() => {
        this.num1++
        this.num2=0
        this.num3=0
      })
    }
    else if (n==2){
      Row () {
        Text(item).fontSize(21)
        Image(this.imgArray[this.num2%3]).width(20).height(20)
      }.onClick(() => {
        this.num2++
        this.num1=0
        this.num3=0
      })
    }
    else if (n==3){
      Row () {
        Text(item).fontSize(21)
        Image(this.imgArray[this.num3%3]).width(20).height(20)
      }.onClick(() => {
        this.num3++
        this.num1=0
        this.num2=0
      })
    }
  }
  build() {
    Row () {
      this.itemRank("小",1)
      this.itemRank("飞",2)
      this.itemRank("人",3)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center)
  }
}

更多关于HarmonyOS 鸿蒙Next 用arkts语言优化下面这段代码的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

@Entry @Componentstruct TestPage { // 点击的图片 @Provide selectNumber: number = 0 // 要显示的组件大小 @Provide arr: number[] = [0,1,2,3,4,5,6,7,8,9]; // 需要循环显示的图片数组 @Provide imgArray:Resource[]=[$r(‘app.media.add’), $r(‘app.media.cut’)]

build() { Column(){ Row().height(500) ForEach( this.arr, (item:number) => { itemRank({myNumber:item}) }, (item: number) => item.toString() ) }.width(‘100%’).height(‘100%’) } }

@Componentstruct itemRank { // 自己的位置 @Prop myNumber:number; // 父组件选中的位置 @Consume selectNumber: number; // 需要循环显示的图片数组 @Consume imgArray:Resource[]; // 点击自己后图片地址下标 @State imgSelect:number = 0

build() { Row() { Text(位置：${this.myNumber}).fontSize(21) if (this.myNumber === this.selectNumber){ // 点击的为自己，自己开始切换图片 Image(this.imgArray[this.imgSelect%this.imgArray.length]).width(20).height(20) } else { // 点击的不是自己，显示默认图片 Image($r(‘app.media.icon’)).width(20).height(20) } }.onClick(() => { // 点击的为自己，自己开始切换图片 if (this.myNumber === this.selectNumber) { this.imgSelect = this.imgSelect+1 } // 点击的为自己，更换父组件选中的子组件序号 this.selectNumber = this.myNumber }) } }

抛砖引玉，不知道出来的效果是否为你想要的。思路就是把每个重复显示的组件封成一个，外层变化的状态上提到父组件，内层变化的状态下称到子组件。使用到了ArkTs中的父子组件跨层传递

参考文档： https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-provide-and-consume-0000001473857338-V3?catalogVersion=V3

更多关于HarmonyOS 鸿蒙Next 用arkts语言优化下面这段代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


感谢您的分享/解惑,有很大的帮助!

点击第一个按钮为向下
点击第二个按钮一次
此时第一个按钮恢复默认状态,再次点击第一个按钮,还是向下!

怎么能做到按钮恢复默认的时候不记录当前状态呀!

点击的如果不是当前图片的时候, 给 this.imgSelect=0，

在HarmonyOS中，使用ArkTS语言优化代码时，可以通过以下方式改进代码结构、性能和可读性。假设原始代码如下：

function calculateSum(arr: number[]): number {
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
        sum += arr[i];
    }
    return sum;
}

const numbers = [1, 2, 3, 4, 5];
const result = calculateSum(numbers);
console.log(result);

优化后的代码可以如下：

const calculateSum = (arr: number[]): number => arr.reduce((acc, curr) => acc + curr, 0);

const numbers = [1, 2, 3, 4, 5];
const result = calculateSum(numbers);
console.log(result);

优化点：

  1. 使用箭头函数简化函数定义。
  2. 使用reduce方法替代for循环，减少代码行数，提升可读性。
  3. 直接返回计算结果，避免不必要的变量声明。

这样优化后的代码更简洁，且功能保持不变。

回到顶部