HarmonyOS学习组件篇
目录
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){
}