鴻蒙頁面示例

@Component

標簽修飾UI，相當于Android的view，所有的UI組件都要使用@Component標簽

@Entry標簽

表明當前是一個頁面，不是一個視圖。多個組件組合時只能有一個@Entry標簽，被該標簽修飾后頁面才會有生命周期

import router from '@ohos.router'
@Entry
@Component
struct Login {
  @State title: string = '登錄頁面'

  build() {
    Row() {

      Column() {

        Text(this.title).fontSize(20)
          .fontWeight(FontWeight.Bold)
          .textAlign(TextAlign.Center)
          .width('100%').margin({top:10})

        Button() {
          Text('返回')
            .fontSize(18)
            .fontWeight(FontWeight.Bold)
        }.type(ButtonType.Capsule)
        .padding({top:5,bottom:5,left:10,right:10})
        .margin({top:20})
        .onClick(()=>{
          try{
            router.back()
          }catch (err){
            console.error("錯誤="+err.code +" message="+err.message)
          }
        })
      }
    }.width('100%')
  }

  onPageShow(){
    //頁面每次顯示時觸發(fā)
  }

  onPageHide(){
    //頁面每次隱藏時觸發(fā)
  }

  onBackPress(){
    //用戶點擊返回按鈕時觸發(fā)
  }

  aboutToAppear(){
    //在執(zhí)行build函數之前執(zhí)行
  }

  aboutToDisappear(){
    //組件即將銷毀時執(zhí)行
  }
}

@Builder標簽

使用該標簽的方法會自動構建一個組件

• 全局方式

@Builder function xxx{}

• 組件內方式

@Builder xx{}

需要傳遞參數時采用引用傳遞 $$

//方法
@Builder function builderFunc($$:{showText:string}){
  Text('全局 builder方法 '+$$.showText)
    .fontSize(18)
    .fontColor("#333333")
}
//調用
builderFunc({showText:'全局豬頭'})

@BuilderParam標簽

對應@Builder標簽，類似于java的接口傳遞

/**
 * 全局styles樣式
 */
@Styles function globalFancy(){
  .width(100)
  .height(150)
  .backgroundColor(Color.Pink)
}

@Builder function builderFunc($$:{showText:string}){
  Text('全局 builder方法 '+$$.showText)
    .fontSize(18)
    .fontColor("#333333")
}

@Component
struct testBuildParam{

  @BuilderParam param:()=>void

  build(){
    Column(){
      this.param()
    }
  }
}


//頁面入口
@Entry
@Component
struct StylesPage{

  @State heightNum:number = 100

  @Styles selfFancy(){
    .width(120)
    .height(this.heightNum)
    .backgroundColor(Color.Yellow)
    .onClick(()=>{
      this.heightNum = 180
    })
  }

  @Builder builderSelf(){
    Text("組件內方法")
      .fontSize(15)
      .fontColor("#999999")
      .margin({top:20})
  }

  build(){

    Column({space:10}){
      Text("全局引用styles")
        .globalFancy()
        .fontSize(25)

      Text("組件內的style")
        .selfFancy()
        .fontSize(18)

      this.builderSelf()
      builderFunc({showText:'全局豬頭'})

      testBuildParam({param:this.builderSelf})

    }

  }
}

審核編輯 黃宇

HTML 1800 字數 121 段落