ForEach渲染控制功能
语法
ForEach(数组,(数组)=>{
// 需要渲染的代码部分
}keyGenerator?:(item:any,index:number):string=>{
// 键生成函数,为数组每一项生成一个唯一的标识,组件是否重新渲染的判断标准
})
// 键生成函数是可选的参数,可以不用写
示例
class Item{ // 声明一个内部类Item
name:string
price:string
// 构造函数
constructor(name:string ,price:string) {
this.name = name
this.price = price
}
}
private items:Array<Item> = [ // 创建对象
new Item('华为','1000$'),
new Item('菠萝','2000$'),
new Item('小米','3000$'),
new Item('荣耀','4000$'),
new Item('聯想','5000$'),
new Item('Vivo','6000$'),
new Item('苹果','7000$')
]
ForEach(this.items,(items:Item)=>{
Row(){
Column(){
Text(items.name)
Text(items.price)
}
.alignItems(HorizontalAlign.Start) // 左对齐
.width(300)
}
})
if……else条件渲染功能
如果有一项商品价格有折扣,但是其他商品没有,又不想单独渲染,怎么办?
可以借助条件渲染语句
语法:
ForEach(this.items,(items:Item)=>{
Row(){
Column(){
if (items.discount){ // 写上条件渲染语句,通过discount折扣判断渲染方式
Text(items.name)
Text(items.price)
Text(`惊喜折扣价:${items.discount}`)
}
else{
Text(items.name)
Text(items.price)
}
} .alignItems(HorizontalAlign.Start) // 左对齐
.width(300)
}
})