文章目录
- 前言
- Repeat的介绍
- 效果截图
- 总结
一、前言
记得拉倒底看效果图。
鸿蒙的更新还是很快的，一不注意，就有性能提升的组件或者api 出现。
从一开始api9，一直到现在，其实经历了很多，比如List是最明显的，这个组件是用来列表展示的，最开始使用的是ForEach来循环子组件，接着如果是长列表为了更好的性能，就需要使用LazyForEach，不过它有点难用，直到后面又出现了新的 Repeat。
所以呢，如果是新开发的页面，如果是列表，直接用Repeat，使用起来也非常简单。
这就好比，以前我们在android开发的时候，使用ListView 和 使用 Recyclerview的感觉。当有了RecyclerView，可以直接放弃ListView，因为RecyclerView 性能更好，而且覆盖了ListView的功能。
同理，鸿蒙有了Repeat，新开发的直接用List + Repeat 即可。
最后呢，我会把代码附上。另外最后有页面的效果截图，看完再看代码，这样会更加直观。
二、简介
Repeat 主要是为了提升开发效率，简化重复性UI逻辑，并优化动态列表性能。
1、简化重复UI的构建
通过数据源直接生成重复的UI布局
cpp
Repeat<number>(this.mNumberLists)
.each((item: RepeatItem<number>)=>{//组件生成函数，为每一个数据生成一个Text组件。
ListItem(){
// 默认布局
Text('' + item.item)
.textAlign(TextAlign.Center)
.width('90%')
.height(72)
.backgroundColor('#FFFFFF')
.borderRadius(24)
}
})
.key((item: number)=> item.toString())2、模板使用
根据templateId 返回值，在 template 中作区分，显示不同的模板
cpp
//不同的模板id
.templateId((item: number, index: number)=>{
if (index < 3) {
return 'templeA'
}else if (index < 10){
return 'templeB'
}else{
return ''
}
})
//不同的模板
.template('templeA', (ri: RepeatItem<number>)=>{
ListItem(){
Text('我是A模板' + ri.item)
.textAlign(TextAlign.Center)
.width('90%')
.height(72)
.backgroundColor('#FFFFFF')
.borderRadius(24)
}
})
.template('templeB', (ri: RepeatItem<number>)=>{
ListItem(){
Text('我是B模板' + ri.item)
.textAlign(TextAlign.Center)
.width('90%')
.height(72)
.backgroundColor(Color.Blue)
.borderRadius(24)
}
})3、条件渲染
通过if/else 在each中可显示不同模板，实现条件化渲染
cpp
.each((item: RepeatItem<number>)=>{
ListItem(){
//条件渲染，不同的条件显示不同的布局
if (item.index % 2 === 0) {
Text('' + item.item)
.textAlign(TextAlign.Center)
.width('90%')
.height(72)
.backgroundColor('#FFFFFF')
.borderRadius(24)
}else{
Text('我是奇数布局' + item.item)
.textAlign(TextAlign.Center)
.width('90%')
.height(72)
.backgroundColor('#FFFFFF')
.borderRadius(24)
}
}
})4、Repeat 性能上的优化
cpp
1、key函数确保列表高效复用
2、virtualScroll 启用懒加载，提升长列表性能
3、模板复用5、注意事项
使用Repeat 确保是在V2中使用，避免出现问题
三、效果截图
以上全部代码
cpp
@Entry
@ComponentV2
struct RepeatTestPage{
@Local mNumberLists: Array<number> = new Array()
aboutToAppear(): void {
for (let i = 0; i < 50; i++) {
this.mNumberLists.push(i)
}
}
build() {
Column(){
List({space: 12}){
Repeat<number>(this.mNumberLists)
.each((item: RepeatItem<number>)=>{//组件生成函数，为每一个数据生成一个Text组件。（默认渲染的模板)
ListItem(){
//条件渲染，不同的条件显示不同的布局
// if (item.index % 2 === 0) {
// Text('' + item.item)
// .textAlign(TextAlign.Center)
// .width('90%')
// .height(72)
// .backgroundColor('#FFFFFF')
// .borderRadius(24)
// }else{
// Text('我是奇数布局' + item.item)
// .textAlign(TextAlign.Center)
// .width('90%')
// .height(72)
// .backgroundColor('#FFFFFF')
// .borderRadius(24)
// }
// 默认布局
Text('' + item.item)
.textAlign(TextAlign.Center)
.width('90%')
.height(72)
.backgroundColor('#FFFFFF')
.borderRadius(24)
}
})
.key((item: number)=> item.toString())//指定key，避免ui渲染问题
.virtualScroll({totalCount: this.mNumberLists.length})//打开懒加载，totalCount为预期的懒加载数据长度
.templateId((item: number, index: number)=>{
if (index < 3) {
return 'templeA'
}else if (index < 10){
return 'templeB'
}else{
return ''
}
})
.template('templeA', (ri: RepeatItem<number>)=>{
ListItem(){
Text('我是A模板' + ri.item)
.textAlign(TextAlign.Center)
.width('90%')
.height(72)
.backgroundColor('#FFFFFF')
.borderRadius(24)
}
})
.template('templeB', (ri: RepeatItem<number>)=>{
ListItem(){
Text('我是B模板' + ri.item)
.textAlign(TextAlign.Center)
.width('90%')
.height(72)
.backgroundColor(Color.Blue)
.borderRadius(24)
}
})
}
.alignListItem(ListItemAlign.Center)
.cachedCount(2)//容器组件的预加载区域大小
}
.width('100%')
.height('100%')
.backgroundColor('#F1F3F5')
}
}总结
1、Repeat 简介
2、Repeat 使用
3、效果截图
如果对你有一点点帮助，那是值得高兴的事情。：)
我的csdn：blog.csdn.net/shenshizhon...