ArkTS 循环控制

最新推荐文章于 2024-07-19 10:42:57 发布

Web阿成

最新推荐文章于 2024-07-19 10:42:57 发布

阅读量590

点赞数 5

分类专栏： HarmonyOS 文章标签： java 前端 javascript 华为 HarmonyOS DevEcoStudio

本文链接：https://blog.csdn.net/a_strong_pig/article/details/134924473

版权

HarmonyOS 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

本文介绍了如何在ArkTS开发中使用ForEach和if-else控制页面布局，展示了如何通过这两个方法分别进行数组商品列表的循环渲染，以及如何实现基于折扣条件的不同展示方式。

摘要由CSDN通过智能技术生成

在ArkTS开发中，我们使用ForEach / if-else 来控制页面的循环布局。

ForEach

ForEach(

arr:Array, //数组

(item:any,index?:number)=>{

Row(){

...

}

},

keyGenerator?:(item: any,index?: number): string => {。 // 非常重要大多数情况下不传

// 键生成函数为数组每一项生成一个唯一标识，作为组件是否重新渲染的判断标准。

}

)

使用foreach 循环渲染一个商品页

这里我们构建一个类，写出一个数组来，将数组作为参数穿入下面的foreach中，完成循环渲染出一个商品列表。

class Item {
  name: string
  image: ResourceStr
  price: number

  constructor(name: string, image: ResourceStr, price: number){
    this.name = name
    this.image = image
    this.price = price
  }
}
@Entry
@Component
struct Index {
  private items: Array<Item> = [
    new Item('os1',$r('app.media.hongmeng'),2000),
    new Item('os2',$r('app.media.hongmeng'),3000),
    new Item('os3',$r('app.media.hongmeng'),4000),
    new Item('os4',$r('app.media.hongmeng'),5000),
    new Item('os5',$r('app.media.hongmeng'),6000)
  ]
  build() {
    Column({space:8}){
      Row(){
        Text('商品列表')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .margin({bottom: 20})

      // 循环控制
      ForEach(
        this.items,
        item=>{
          Row({space:10}){
            Image(item.image)
              .width(100)
            Column({space: 4}){
              Text(item.name)
                .fontSize(20)
                .fontWeight(FontWeight.Bold)
              Text('¥' + item.price)
                .fontSize(18)
                .fontColor('#ff0000')
            }
            .height('100%')
            .alignItems(HorizontalAlign.Start)
          }
          .width('100%')
          .backgroundColor('#fff')
          .borderRadius(20)
          .height(120)
          .padding(10)
        }
      )
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#efefef')
    .padding(20)
  }
}

if-else

if(判断条件){

//内容

}else{

//内容

}

通过判断条件决定使用哪种方式渲染

通过if-else来完成折扣价格的实现

class Item {
  name: string
  image: ResourceStr
  price: number
  discount: number

  constructor(name: string, image: ResourceStr, price: number,discount: number = 0){
    this.name = name
    this.image = image
    this.price = price
    this.discount = discount
  }
}
@Entry
@Component
struct Index {
  private items: Array<Item> = [
    new Item('os1',$r('app.media.hongmeng'),2000,500),
    new Item('os2',$r('app.media.hongmeng'),3000),
    new Item('os3',$r('app.media.hongmeng'),4000,300),
    new Item('os4',$r('app.media.hongmeng'),5000),
    new Item('os5',$r('app.media.hongmeng'),6000)
  ]
  build() {
    Column({space:8}){
      Row(){
        Text('商品列表')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .margin({bottom: 20})

      // 循环控制
      ForEach(
        this.items,
        item=>{
          Row({space:10}){
            Image(item.image)
              .width(100)
            Column({space: 4}){
              if(item.discount){
                // 名字
                Text(item.name)
                  .fontSize(20)
                  .fontWeight(FontWeight.Bold)
                // 原价
                Text('原价： ¥ ' + item.price)
                  .fontSize(16)
                  .fontColor('#ccc')
                  // 装饰效果
                  .decoration({type:TextDecorationType.LineThrough})
                // 折扣价
                Text('折扣价： ¥ '+(item.price - item.discount))
                  .fontSize(18)
                  .fontColor('#ff0000')
                // 补贴信息
                Text('补贴： ¥ ' + item.discount)
                  .fontSize(18)
                  .fontColor('#ff0000')
              }else{
                Text(item.name)
                  .fontSize(20)
                  .fontWeight(FontWeight.Bold)
                Text('¥' + item.price)
                  .fontSize(18)
                  .fontColor('#ff0000')
              }

            }
            .height('100%')
            .alignItems(HorizontalAlign.Start)
          }
          .width('100%')
          .backgroundColor('#fff')
          .borderRadius(20)
          .height(120)
          .padding(10)
        }
      )
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#efefef')
    .padding(20)
  }
}