HarmonyOS 鸿蒙Next 如何用arkts语言优化以下多个list和foreach组合的代码

HarmonyOS 鸿蒙Next 如何用arkts语言优化以下多个list和foreach组合的代码

请问,如下代码,可以优化一下吗,我感觉三个list有些重复,要是再多几个list,代码量太大了,我用@builder装饰器修改了一下,但是没改明白,请大家帮忙看一下!

import { getStock, QuotationStockData } from '../QuotationStockData'
@Entry
@Componentstruct Section6 {
  @State stockResult: Array<QuotationStockData> = getStock()
  
  build() {
    Row() {
      List() {
        ForEach(this.stockResult, (item: QuotationStockData) => {
          ListItem() {
            Row() {
              Text(item.market.toString()).width(120).height(150).textAlign(TextAlign.Center)
            }
          }
        })
      }.width(120) //111
      List() {
        ForEach(this.stockResult, (item: QuotationStockData) => {
          ListItem() {
            Row() {
              Text(item.stockName.toString()).width(120).height(150).textAlign(TextAlign.Center)
            }
          }
        })
      }.width(120) //222
      List() {
        ForEach(this.stockResult, (item: QuotationStockData) => {
          ListItem() {
            Row() {
              Text(item.timestamp.toString()).width(120).height(150).textAlign(TextAlign.Center)
            }
          }
        })
      }.width(120) //333
    }
  }
}

// QuotationStockData.ts
export class QuotationStockData {
  market: number;
  stockName: string;
  timestamp: number;
}

export function getStock() {
  return [
    {
      market: 1,
      stockName: "11",
      timestamp: 111
    },
    {
      market: 2,
      stockName: "22",
      timestamp: 222
    },
    {
      market: 3,
      stockName: "33",
      timestamp: 333
    },
    {
      market: 4,
      stockName: "44",
      timestamp: 444
    },
    {
      market: 5,
      stockName: "55",
      timestamp: 555
    }
  ]
}

更多关于HarmonyOS 鸿蒙Next 如何用arkts语言优化以下多个list和foreach组合的代码的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复 
@Entry
@Componentstruct Section_6 {
  @State stockResult: Array<QuotationStockData> = getStock()
  build() {
    Row(){
      List() {
        ForEach(this.stockResult, (item: QuotationStockData) => {
          ListItem() {
            Row(){
              Text(item.market.toString())
              Text(item.stockName)
              Text(item.timestamp.toString())
            }
            .width('100%')
            .height('20%')
            .justifyContent(FlexAlign.SpaceAround)
          }
        })
      }
    }}
}

// QuotationStockData.ets
class QuotationStockData {
  market: number;
  stockName: string;
  timestamp: number;
}

export function getStock() {
  return [
    {
      market: 1,
      stockName: "11",
      timestamp: 111
    },
    {
      market: 2,
      stockName: "22",
      timestamp: 222
    },
    {
      market: 3,
      stockName: "33",
      timestamp: 333
    },
    {
      market: 4,
      stockName: "44",
      timestamp: 444
    },
    {
      market: 5,
      stockName: "55",
      timestamp: 555
    }
  ]
}

更多关于HarmonyOS 鸿蒙Next 如何用arkts语言优化以下多个list和foreach组合的代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我真笨啊!!!

在HarmonyOS的ArkTS语言中，可以通过使用@State和@Builder装饰器来优化多个List和forEach组合的代码。以下是一个示例，展示如何通过状态管理和构建器来简化代码：

@Entry
@Component
struct MyComponent {
  @State list1: number[] = [1, 2, 3];
  @State list2: number[] = [4, 5, 6];

  @Builder
  buildList(items: number[]) {
    Column() {
      ForEach(items, (item: number) => {
        Text(`Item: ${item}`)
          .fontSize(20)
          .margin(5)
      })
    }
  }

  build() {
    Column() {
      this.buildList(this.list1)
      this.buildList(this.list2)
    }
  }
}

在这个示例中，@State装饰器用于声明两个状态变量list1和list2，它们分别存储两个列表的数据。@Builder装饰器用于定义一个构建器方法buildList，该方法接受一个数组并生成相应的UI组件。最后，在build方法中调用buildList来构建两个列表的UI。

这种方法可以减少重复代码，并使代码更易于维护和扩展。

回到顶部