ArkTS如何进行循环渲染
现有数据如下
class Item{
name:string
image:Resource
price:number
dicount:number
constructor(name:string,image:Resource,price:number,dicount?:number) {
this.name = name
this.image = image
this.price = price
this.dicount = dicount
}
}
private items:Array
new Item('商品1',$r('app.media.phone1'),6999,500),
new Item('商品2',$r('app.media.phone2'),10999,1000),
new Item('商品3',$r('app.media.phone3'),999),
new Item('商品4',$r('app.media.phone4'),1699),
new Item('商品5',$r('app.media.phone5'),2699),
new Item('商品6',$r('app.media.phone6'),1699,100),
new Item('商品7',$r('app.media.phone7'),699),
new Item('商品8',$r('app.media.phone8'),16999),
]
直接使用ForEach遍历渲染
ForEach(arr:Array,(item:any,index?:number) => {//结构},keyGenerator?:(item:any,index?:number):string => {})
分析三个参数
arr 需要遍历的数组 (item:any,index?:number) => {// 结构} 页面组件生成函数 item默认类型为any，index为可选参数（数组角标），函数内部放结构体部分。 keyGenerator?:(item:any,index?:number):string => {} 键生成函数，为数组每一项生成一个唯一标识，组件是否重新渲染的判断标准（如果只有一项发生改变，不会重新渲染其他元素）。
ForEach(
this.items,
(item:Item)=>{
Row({space:20}){
Image(item.image).width(100)
Column({space:4}){
if(item.dicount && item.dicount > 0){
Text(item.name).fontSize(20).fontWeight(FontWeight.Bold)
Text("原价：￥"+item.price).fontColor('#ccc').fontSize(16).decoration({type:TextDecorationType.LineThrough})
Text("折扣价：￥"+(item.price-item.dicount)).fontColor('#f36').fontSize(18)
Text("补贴：￥"+item.dicount).fontColor('#f36').fontSize(16)
}else{
Text(item.name).fontSize(20).fontWeight(FontWeight.Bold)
Text("￥"+item.price).fontColor('#f36').fontSize(18)
}
}
.height('100%')
.alignItems(HorizontalAlign.Start)
}
.width('100%')
.height(120)
.backgroundColor("#FFF")
.borderRadius(20)
.padding(10)
}
)
问题
直接使用ForEach循环控制，如果元素内容超过视口高度，不会自动生成滚动条，如果超出部分需要滚动条，可以使用List组件。
List组件
List组件相比ForEach，如果元素遍历后元素高度超过视口高度后，会自动产生滚动条。
List(){
ListItem(){
// 结构
}
}
将ForEach和List组件结合使用即可
需要注意的是，使用List组件时，必须通过ListItem才能渲染结构
List(){
ForEach(
arr,
(item:Item) => {
ListItem(){
// 结构
}
}
)
}
相关阅读
发表评论