鸿蒙：自定义组件、自定义函数、自定义样式

一、自定义组件

1.新建组件文件夹，新建自定义组件文件

.

2.编辑自定义组件，并通过

@Component //声明组件
export  struct PageHeader { //结构体
  private title: string
  build() { //ui
    Row() {
      Image($rawfile('左返回.png')).width('15%')
      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Blank()
      Image($rawfile('刷新.png')).width('15%')
    }.width('100%')
  }
}

 3.导入自定义组件

import {PageHeader} from '../components/PageHeader'

4.使用自定义组件 

 PageHeader({"title":"商品名称"});

5.测试：成功 

 

二、自定义函数 

1.自定义函数，注意：内部自定义函数不能有fuction关键字

// 外部自定义函数
@Builder function cardList( 参数){
 
//函数体自定义
  }
}
 
 
 
 
// 内部自定义函数
@Builder cardList( 参数){
 
//函数体自定义
  }
}

 

2.使用自定义函数

cardList(参数)//外部自定义函数使用
 
this.cardList(参数)//内部自定义函数

 三、自定义样式

定义方式和自定义函数差不多只需将注解换为@Styles

@Styles function listStyle(){ //定义方式和自定义函数差不多只需将注解换为@Styles
  .width('100%')
}

使用共函数使用一样即可，也区分内部外部