鸿蒙开发相关知识(一)【自定义构建函数@Builder、公共样式函数@Styles@Extend】

文章目录

  • 一、自定义构建函数 `@Builder`
    • 1、全局
      • (1)定义
      • (2)使用
    • 2、局部
      • (1)定义
      • (2)使用
  • 二、公共样式函数
    • 1、全局:@Styles 仅可封装组件通用属性
      • (1)定义
      • (2)使用
    • 2、局部:@Styles 仅可封装组件通用属性
      • (1)定义
      • (2)使用
    • 3、设置组件特有属性:@Extend 继承模式,只能写在全局,
      • (1)定义
      • (2)使用


一、自定义构建函数 @Builder

1、全局

(1)定义

  • 定义:全局需要 function
  • @Builder function 函数名(){ }
  • 示例代码中有传参,根据实际需要调整
@Builder function ItemCard(item: Item){
  Row({space: 10}){
  
    Image(item.image)
      .width(100)
      
    Column({space: 4}){
    ...
    }
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }
  .width('100%')
  .backgroundColor('#FFF')
  .borderRadius(20)
  .height(120)
  .padding(10)

}

(2)使用

  • 函数名()
 List({space: 8}){
    ForEach(
      this.items,
      (item: Item) => {
        ListItem(){
         ItemCard(item)
        }
      }
    )
  }

2、局部

(1)定义

  • 局部不需要 function
  • @Builder 函数名(){ }
  • 示例代码中有传参,根据实际需要调整
@Builder ItemCard(item: Item){
  Row({space: 10}){
  
    Image(item.image)
      .width(100)
      
    Column({space: 4}){
    ...
    }
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }
  .width('100%')
  .backgroundColor('#FFF')
  .borderRadius(20)
  .height(120)
  .padding(10)

}

(2)使用

  • this.函数名()
 List({space: 8}){
    ForEach(
      this.items,
      (item: Item) => {
        ListItem(){
         this.ItemCard(item)
        }
      }
    )
  }

二、公共样式函数

1、全局:@Styles 仅可封装组件通用属性

(1)定义

  • 定义:全局需要 function
  • @Styles function 函数名((){ }
  • 仅可封装组件通用属性
@Styles function fillScreen(){
  .width('100%')
  .height('100%')
  .backgroundColor('#EFEFEF')
  .padding(20)
}

(2)使用

  • .函数名()
 Column({ space: 8 }) {
	...
 }
 .fillScreen()

2、局部:@Styles 仅可封装组件通用属性

(1)定义

  • 局部不需要 function
  • @Styles 函数名((){ }
  • 仅可封装组件通用属性
@Styles fillScreen(){
  .width('100%')
  .height('100%')
  .backgroundColor('#EFEFEF')
  .padding(20)
}

(2)使用

  • .函数名()
 Column({ space: 8 }) {
	...
 }
 .fillScreen()

3、设置组件特有属性:@Extend 继承模式,只能写在全局,

(1)定义

  • @Extend(组件名) function 函数名() {
@Extend(Text) function priceText() {
  .fontColor('#F36')
  .fontSize(18)
}

(2)使用

  • .函数名()
Text('补贴:¥' + item.discount)
  .priceText()

你可能感兴趣的:(鸿蒙开发,鸿蒙开发)