鸿蒙开发笔记05----渲染控制

最新推荐文章于 2024-08-28 18:50:24 发布

FCC998

最新推荐文章于 2024-08-28 18:50:24 发布

阅读量175

点赞数 2

分类专栏：鸿蒙开发笔记文章标签：鸿蒙系统

本文链接：https://blog.csdn.net/m0_64346512/article/details/137376889

版权

鸿蒙开发笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、简介

2、代码示例

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 ItemPage {
//商品数据

  private  items: Array<Item> = [

     new Item('华为Mate60',$r('app.media.phone1'),6999),
     new Item('华为Mate60',$r('app.media.phone1'),7999),
     new Item('华为Mate60',$r('app.media.phone1'),8999),
     new Item('华为Mate60',$r('app.media.phone1'),5999),
     new Item('华为Mate60',$r('app.media.phone1'),6569),

  ]


build(){
  Column({space:8}){
    Row(){
      Text('商品列表')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .margin({bottom:20})

    ForEach(
      this.items,
      (item:Item )=>{
        Row({space:10}){
          Image(item.image)
            .width(100)
          Column({space:4}){
            Text('华为Mater40')
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
            Text('￥'+item.price)
              .fontColor('#F36')
              .fontSize(18)
          }

        }
        .width('100%')
        .height(120)
        .backgroundColor('#FFF')
        .borderRadius(20)
        .padding(10)
      }
    )


  }
  .width('100%')
  .height('100%')
  .backgroundColor('#EFEFEFF')
  .padding(20)
}
}

3、效果展示

4、需求升级

4.1 简介

4.2 代码示例

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 ItemPage {
//商品数据

  private  items: Array<Item> = [

     new Item('华为Mate60',$r('app.media.phone1'),6999,500),
     new Item('华为Mate60',$r('app.media.phone1'),7999),
     new Item('华为Mate60',$r('app.media.phone1'),8999),
     new Item('华为Mate60',$r('app.media.phone1'),5999),
     new Item('华为Mate60',$r('app.media.phone1'),6569),

  ]


build(){
  Column({space:8}){
    Row(){
      Text('百亿补贴')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .fontColor('red')
    }
    .width('100%')
    .margin({bottom:20})

    ForEach(
      this.items,
      (item:Item )=>{
        Row({space:10}){
          Image(item.image)
            .width(100)
          Column({space:4}){
            if(item.discount){
              Text('华为Mater40')
                .fontSize(20)
                .fontWeight(FontWeight.Bold)
              Text('原价：￥'+item.price)
                .fontColor('#ccc')
                .fontSize(14)
                .decoration({type:TextDecorationType.LineThrough})
              Text('折扣价：￥'+(item.price-item.discount))
                .fontColor('#F36')
                .fontSize(18)
              Text('补贴￥'+item.discount)
                .fontColor('#F36')
                .fontSize(18)

            }else{
              Text('华为Mater40')
                .fontSize(20)
                .fontWeight(FontWeight.Bold)
              Text('￥'+item.price)
                .fontColor('#F36')
                .fontSize(18)
            }

          }

        }
        .width('100%')
        .height(120)
        .backgroundColor('#FFF')
        .borderRadius(20)
        .padding(10)
      }
    )


  }
  .width('100%')
  .height('100%')
  .backgroundColor('#EFEFEFF')
  .padding(20)
}
}