We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ForEach( arr: Array, (item: any, index?: number) => { }, keyGenerator?: (item: any, index?: number): string => { } )
arr: Array
要遍历的数据数组
比如我们有一组2024春节档新片票房的数据:
private items = [ { name: '热辣滚烫', image: '1.', box_office: '13.41亿' }, { name: '飞驰人生2', image: '', box_office: '11.90亿' }, { name: '熊出没·逆转时空', image: '', box_office: '7.26亿' }, { name: '第二十条', image: '', box_office: '5.50亿' }, { name: '我们一起摇太阳', image: '', box_office: '5835.6万' } ]
这个 item 就可以作为第一个参数 arr 传进来,ForEach 就会去遍历这个数组,拿到里面的每一个电影数据。
(item: any, index?: number) => { }
页面组件生成的函数
item 是数组中的元素,由于数组中元素的类型是不确定的,所以类型是 Any; index 是数组的角标,为可选参数。
keyGenerator?: (item: any, index?: number): string => { }
键生成函数,为数组每一项生成一个唯一标示,组件是否重新渲染的判断标准
键
假如我们以电影名称作为唯一标示,现在向这个数组中插入一条新的数据,在遍历的过程中,发现前面的N条数据的标示没有发生变化,因为名字没变,那这时候就不需要去重复渲染,只有最后插入的这条新数据,它的名字跟之前比是不存在的,是新的,这时候只需把这条新的渲染出来就可以了。这样就减少了不必要的渲染,提高了整个页面渲染效率。
首先自定义一个类 Item
class Item { name: string image: ResourceStr box_office: string constructor(name: string, image: ResourceStr, box_office: string) { this.name = name this.image = image this.box_office = box_office } }
在结构体 Index 里定义 items 成员变量,也就是电影的数组
private items: Array<Item> = [ { name: '热辣滚烫', image: $r('app.media.1'), box_office: '13.41亿' }, { name: '飞驰人生2', image: $r('app.media.2'), box_office: '11.90亿' }, { name: '熊出没·逆转时空', image: $r('app.media.3'), box_office: '7.26亿' }, { name: '第二十条', image: $r('app.media.4'), box_office: '5.50亿' }, { name: '我们一起摇太阳', image: $r('app.media.5'), box_office: '5835.6万' } ]
使用 ForEach 循环遍历数组
build() { Column({ space: 8 }) { ForEach( this.items, (item: Item) => { Row({ space: 8 }) { Image(item.image) .width(157) .height(220) Column() { Text(item.name) .fontSize(20) .fontWeight(FontWeight.Bold) Text(item.box_office) .fontSize(18) } .height('100%') .alignItems(HorizontalAlign.Start) } .width('100%') .height(220) } ) } .width('100%') .height('100%') .padding(8) }
效果展示
The text was updated successfully, but these errors were encountered:
No branches or pull requests
一、语法
arr: Array
比如我们有一组2024春节档新片票房的数据:
这个 item 就可以作为第一个参数 arr 传进来,ForEach 就会去遍历这个数组,拿到里面的每一个电影数据。
(item: any, index?: number) => { }
item 是数组中的元素,由于数组中元素的类型是不确定的,所以类型是 Any;
index 是数组的角标,为可选参数。
keyGenerator?: (item: any, index?: number): string => { }
假如我们以电影名称作为唯一标示,现在向这个数组中插入一条新的数据,在遍历的过程中,发现前面的N条数据的标示没有发生变化,因为名字没变,那这时候就不需要去重复渲染,只有最后插入的这条新数据,它的名字跟之前比是不存在的,是新的,这时候只需把这条新的渲染出来就可以了。这样就减少了不必要的渲染,提高了整个页面渲染效率。
二、示例代码
首先自定义一个类 Item
在结构体 Index 里定义 items 成员变量,也就是电影的数组
使用 ForEach 循环遍历数组
效果展示
![循环控制](https://private-user-images.githubusercontent.com/13990136/304338514-89d021f0-007e-45f9-a05c-5965ffda5b7b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNjU4NjUsIm5iZiI6MTcyNjE2NTU2NSwicGF0aCI6Ii8xMzk5MDEzNi8zMDQzMzg1MTQtODlkMDIxZjAtMDA3ZS00NWY5LWEwNWMtNTk2NWZmZGE1YjdiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEyVDE4MjYwNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU4MWYyZTBiNTM5NTlkNmM2ZGZhMmE4MDU0ZjMwY2M1NWM4NGRiMjRkYWYwMzY3YTAzYTZiZWYyNTMyYmVkZDAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.0emHl-QZT0cuZxuWY0b60Nb7cJxLrxXYKgokGLd3EiA)
The text was updated successfully, but these errors were encountered: