ArkUI-10-自定义构建函数

最新推荐文章于 2024-10-01 14:53:57 发布

追风小老头折腾程序

最新推荐文章于 2024-10-01 14:53:57 发布

阅读量470

点赞数 19

分类专栏： Harmonyos-ArkUI教程文章标签： harmonyos

本文链接：https://blog.csdn.net/weixin_43980468/article/details/141870145

版权

Harmonyos-ArkUI教程专栏收录该内容

18 篇文章 0 订阅

订阅专栏

构建函数分两种：

1.全局构建函数

//全局自定义构建函数
@Builder
function ItemCard(item:Item) {
  Row({space:10}) {
    Image(item.image)
      .width(100)

    Column({space:4}){
      if(item.discount != 0){
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)

        Text('原价：￥ '+ item.price)
          .fontColor('#CCC')
          .fontSize(18)
          .decoration({type: TextDecorationType.LineThrough})

        Text('折扣价：￥ '+ (item.price-item.discount))
          .fontColor('#F36')
          .fontSize(18)
        Text('补贴：￥ '+ item.discount)
          .fontColor('#F36')
          .fontSize(18)
      }else{
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)

        Text('$ '+ item.price)
          .fontColor('#F36')
          .fontSize(18)
      }

    }
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }.padding(10)
  .width('80%')
  .height(120)
  .backgroundColor('#ffffffff')
  .borderRadius(15)
}

2.内部构建函数

放到当前页面的build()方法后

@Builder
ItemCard(item:Item) {
  Row({space:10}) {
    Image(item.image)
      .width(100)

    Column({space:4}){
      if(item.discount != 0){
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)

        Text('原价：￥ '+ item.price)
          .fontColor('#CCC')
          .fontSize(18)
          .decoration({type: TextDecorationType.LineThrough})

        Text('折扣价：￥ '+ (item.price-item.discount))
          .fontColor('#F36')
          .fontSize(18)
        Text('补贴：￥ '+ item.discount)
          .fontColor('#F36')
          .fontSize(18)
      }else{
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)

        Text('$ '+ item.price)
          .fontColor('#F36')
          .fontSize(18)
      }

    }
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }.padding(10)
  .width('80%')
  .height(120)
  .backgroundColor('#ffffffff')
  .borderRadius(15)
}

调用时↓

——————————————————

全局样式
@Styles
function fillScreen() {
   .width('100%')
   .height('100%')
   .backgroundColor('#EFEFEF')
   .padding(20)
   .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

}

使用方法在需要加样式的容器后面 .fillScreen()就可以

————————————————————

局部样式

@Styles fillScreen() {
  .width('100%')
  .height('100%')
  .backgroundColor('#EFEFEF')
  .padding(20)
  .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

}

使用方法：和全局样式一样。