ArkTS循环控制与List的使用

ArkTS如何进行循环渲染

现有数据如下

ts 复制代码
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<Item> = [
  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 => {})

分析三个参数

  1. arr

    需要遍历的数组

  2. (item:any,index?:number) => {// 结构}

    页面组件生成函数

    item默认类型为any,index为可选参数(数组角标),函数内部放结构体部分。

  3. keyGenerator?:(item:any,index?:number):string => {}

    键生成函数,为数组每一项生成一个唯一标识,组件是否重新渲染的判断标准(如果只有一项发生改变,不会重新渲染其他元素)。

ts 复制代码
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才能渲染结构

ts 复制代码
List(){
	ForEach(
		arr,
		(item:Item) => {
			ListItem(){
				// 结构
			}
		}
	)
}
相关推荐
coder_pig9 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
simple丶9 小时前
【HarmonyOS】鸿蒙蓝牙连接与通信技术
harmonyos·arkts·arkui
前端世界11 小时前
HarmonyOS开发实战:鸿蒙分布式生态构建与多设备协同发布全流程详解
分布式·华为·harmonyos
Jalor12 小时前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
zhanshuo13 小时前
开发者必看!如何在HarmonyOS中快速调用摄像头功能
harmonyos
HMSCore13 小时前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
harmonyos
zhanshuo13 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
HarmonyOS小助手13 小时前
闯入鸿蒙:浪漫、理想与「草台班子」
harmonyos·鸿蒙·harmonyos next·鸿蒙生态
xq952714 小时前
flutter 鸿蒙化插件开发横空出世
harmonyos
HarmonyOS_SDK14 小时前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
harmonyos