05.HarmonyOS-页面渲染

2023-12-289

1.循环控制


//创一个类
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("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55,10.5),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55)
  ]

  build() {
    Column() {
      Row() {
        Text("商品展示")
          .fontSize(16)
      }
      .width("100%")
      .margin({ top: 10 })

      ForEach(this.items, (item: Item) => {

        Row() {
          Image(item.image)
            .width("40")
            .margin({ right: 5 })

          Column() {
            Text(item.name)
              .fontSize(10)
            if(item.discount){
              Text("原价：￥" + item.price)
                .fontSize(10)
                .fontColor("#ccc")
                .decoration({type:TextDecorationType.LineThrough})

              Text("补贴：￥" + item.discount)
                .fontSize(10)
                .fontColor("#f36")

              Text("￥" + (item.price-item.discount))
                .fontSize(10)
                .fontColor("#f36")

            }else{
              Text("￥" + item.price)
                .fontSize(10)
                .fontColor("#f36")
            }
          }
          .alignItems(HorizontalAlign.Start)
          .justifyContent(FlexAlign.Start)
        }
        .width("100%")
        .borderRadius(10)
        .padding(10)
        .backgroundColor("#fff")
        .margin({ top: 5 })

      })


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

查看布局

2.List提供页面滚动


//创一个类
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("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55,10.5),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55)
  ]

  build() {
    Column() {
      Row() {
        Text("商品展示")
          .fontSize(16)
      }
      .width("100%")
      .height(30)
      .margin({ top: 10 })
      .layoutWeight(0)

      List(){
        ForEach(this.items, (item: Item) => {

          ListItem(){

            Row() {
              Image(item.image)
                .width("40")
                .margin({ right: 5 })

              Column() {
                Text(item.name)
                  .fontSize(10)
                if(item.discount){
                  Text("原价：￥" + item.price)
                    .fontSize(10)
                    .fontColor("#ccc")
                    .decoration({type:TextDecorationType.LineThrough})

                  Text("补贴：￥" + item.discount)
                    .fontSize(10)
                    .fontColor("#f36")

                  Text("￥" + (item.price-item.discount))
                    .fontSize(10)
                    .fontColor("#f36")

                }else{
                  Text("￥" + item.price)
                    .fontSize(10)
                    .fontColor("#f36")
                }
              }
              .alignItems(HorizontalAlign.Start)
              .justifyContent(FlexAlign.Start)
            }
            .width("100%")
            .borderRadius(10)
            .padding(10)
            .backgroundColor("#fff")
            .margin({ top: 5 })


          }

        })

      }
      .width("100%")
      //权重数越大权重越小，数小的占完剩下的给数大的，数字一样大进行平分
      .layoutWeight(1)




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

3.自定义组件

组件



@Component
//如果是页内组件，不需要使用export
export struct Header {
  private title: ResourceStr
  build() {
    Row() {
      Text("< ")
        .fontSize(16)
      Text(this.title)
        .fontSize(16)
      //没用的地方使用 Blank填满
      Blank()
      Text(" 刷新")
        .fontSize(16)
    }
    .width("100%")
    .height(30)
    .margin({ top: 10 })
    .layoutWeight(0)
  }
}

使用


//创一个类
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
  }
}

import {Header} from '../../common/Common'

//自定义函数（全局）
@Builder function Card(item:Item){
  Row() {
    Image(item.image)
      .width("40")
      .margin({ right: 5 })

    Column() {
      Text(item.name)
        .fontSize(10)
      if(item.discount){
        Text("原价：￥" + item.price)
          .fontSize(10)
          .fontColor("#ccc")
          .decoration({type:TextDecorationType.LineThrough})

        Text("补贴：￥" + item.discount)
          .fontSize(10)
          .fontColor("#f36")

        Text("￥" + (item.price-item.discount))
          .fontSize(10)
          .fontColor("#f36")

      }else{
        Text("￥" + item.price)
          //组件特有样式
          .textStyle()
      }
    }
    .alignItems(HorizontalAlign.Start)
    .justifyContent(FlexAlign.Start)
  }
  //公共样式
  .fillScreen()
}

//公共样式
@Styles function fillScreen(){
  .width("100%")
  .borderRadius(10)
  .padding(10)
  .backgroundColor("#fff")
  .margin({ top: 5 })
}
//继承模式样式
@Extend(Text) function textStyle(){
  .fontSize(10)
  .fontColor("#f36")
}

@Entry
@Component
struct Index {

  //创建一个变量
  private items: Array<Item> = [
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55,10.5),
    new Item("李宁健身衣服男运动专业高弹紧身衣", "https://img.alicdn.com/bao/uploaded/O1CN01SBAgM31CvXQ6ALKEU_!!6000000000143-0-yinhe.jpg", 55),
  ]

  build() {
    Column() {
      //组件使用
      Header({title:"商品列表"})
      List(){
        ForEach(this.items, (item: Item) => {

          ListItem(){
            //调用函数（全局）
            Card(item);
            //函数调用（内部）
            this.Card(item)
          }

        })

      }
      .width("100%")
      //权重数越大权重越小，数小的占完剩下的给数大的，数字一样大进行平分
      .layoutWeight(1)




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



  //自定义函数（内部）
  @Builder Card(item:Item){
    Row() {
      Image(item.image)
        .width("40")
        .margin({ right: 5 })

      Column() {
        Text(item.name)
          .fontSize(10)
        if(item.discount){
          Text("原价：￥" + item.price)
            .fontSize(10)
            .fontColor("#ccc")
            .decoration({type:TextDecorationType.LineThrough})

          Text("补贴：￥" + item.discount)
            .fontSize(10)
            .fontColor("#f36")

          Text("￥" + (item.price-item.discount))
            .fontSize(10)
            .fontColor("#f36")

        }else{
          Text("￥" + item.price)
            .fontSize(10)
            .fontColor("#f36")
        }
      }
      .alignItems(HorizontalAlign.Start)
      .justifyContent(FlexAlign.Start)
    }
    .width("100%")
    .borderRadius(10)
    .padding(10)
    .backgroundColor("#fff")
    .margin({ top: 5 })
  }


}

赏

相关文章