HarmonyOS学习——组件篇

HarmonyOS基础组件

1.自定义组件

1. 多个页面共用

     1-1 自定义组件命名为TitleNav    

@Component
export default struct TitleNav {
  private titleTxt: string
  build() {
    Row(){
      Image($r('app.media.arrow_back'))
        .objectFit(ImageFit.Contain)
        .width($r('app.float.back_image_size'))
        .height($r('app.float.back_image_size'))
        .onClick(() => {
          router.back()
        })
 
      Text(this.titleTxt)
         .fontColor($r('app.color.title_text_color'))
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor($r('app.color.title_theme'))
    .width(CommonConstants.FULL_PARENT)
    .height($r('app.float.login_input_height'))
  }
}

     1-2 在其他页面引用组件

// 引入TitleNav
import TitleNav from '../view/TitleNav'
 
@Entry
@Component
struct ForgetPwd {
  build() {
    Column() {
      // 引用组件
      TitleNav({titleTxt:'忘记密码'})
    }
  }
}

1. 只在当前页面使用

      

@Entry
@Component
struct ForgetPwd {

  // 组件内定义TitleNav
  @Builder TitleNav(titleTxt:string){

  }

  build() {
    Column() {
      // 引用全局组件
      TitleNav({titleTxt:'忘记密码'})
      // 引用组件内定义的
      this.TitleNav({titleTxt:'忘记密码'})
    }
  }
}

// 全局定义组件TitleNav
@Builder function TitleNav(titleTxt:string){

}