HarmonyOS学习——组件篇

张豆豆94

已于 2024-02-05 17:58:42 修改

阅读量532

点赞数 10

分类专栏：【HarmonyOS学习篇】文章标签：学习 harmonyos

于 2024-02-05 17:43:55 首次发布

本文链接：https://blog.csdn.net/weixin_42735261/article/details/136045501

版权

【HarmonyOS学习篇】专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HarmonyOS基础组件

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:'忘记密码'})
    }
  }
}

只在当前页面使用

@Entry
@Component
struct ForgetPwd {

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

  }

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

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

}