当前位置：首页 > news >正文

HarmonyOS 开发基础（九）forEach

news 2025/8/18 10:51:33

HarmonyOS 开发基础（九）forEach

在这里插入图片描述

一、基础使用

在这里插入图片描述

@Entry
@Component
struct Index {// 创建一个变量，用来存储图片网络网址imageUrl: string = 'https://gw.alicdn.com/imgextra/i2/2201227850912/O1CN01B7gVvP1Ibk6HMiDRz_!!2201227850912.jpg_Q75.jpg_.webp'// private：修饰符，不能被外部访问，创建一个变量，存储不同手机型号数据private items: Array<Object> = [{name: '红米k70', image: this.imageUrl, price: 2499},{name: '红米k70', image: this.imageUrl, price: 2499},{name: '红米k70', image: this.imageUrl, price: 2499},{name: '红米k70', image: this.imageUrl, price: 2499},{name: '红米k70', image: this.imageUrl, price: 2499},{name: '红米k70', image: this.imageUrl, price: 2499},]build() {Column({space: 15}) {Row() {Text('商品列表').fontSize(30).fontWeight(600)}.width('100%').justifyContent(FlexAlign.Start)// ForEach：循环渲染，用来循环渲染页面组件ForEach(// arr 参数一：遍历循环的数据数组this.items,// itemGenerator 参数二：页面组件生成函数(item) => {// 循环渲染的组件Row() {Column() {// 图片路径数据为循序出来的数据的 image 数据Image(item.image).width(60).height(90).interpolation(ImageInterpolation.High)}Column() {// 文本名字数据为循序出来的数据的 name 数据Text(item.name).fontSize(20).fontWeight(600).margin({bottom: 5})// 文本名字数据为循序出来的数据的 price 数据Text(`￥${item.price}`).fontColor('#F36')}.margin({left: 25}).alignItems(HorizontalAlign.Start)}.width('100%').padding(10).alignItems(VerticalAlign.Top).borderRadius('8').backgroundColor('#ffffff')},// keyGenerator 参数三：可不填 键生成函数，为数组每一项生成一个唯一标识，组件是否重新渲染的判断标准(item, index): string => {return item + index})}.width('100%').height('100%').padding(20).backgroundColor('#f0eef0')}
}