鴻蒙頁(yè)面示例

@Component

標(biāo)簽修飾UI，相當(dāng)于Android的view，所有的UI組件都要使用@Component標(biāo)簽

@Entry標(biāo)簽

表明當(dāng)前是一個(gè)頁(yè)面，不是一個(gè)視圖。多個(gè)組件組合時(shí)只能有一個(gè)@Entry標(biāo)簽，被該標(biāo)簽修飾后頁(yè)面才會(huì)有生命周期

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

  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("錯(cuò)誤="+err.code +" message="+err.message)
          }
        })
      }
    }.width('100%')
  }

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

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

  onBackPress(){
    //用戶點(diǎn)擊返回按鈕時(shí)觸發(fā)
  }

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

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

@Builder標(biāo)簽

使用該標(biāo)簽的方法會(huì)自動(dòng)構(gòu)建一個(gè)組件

• 全局方式

@Builder function xxx{}

• 組件內(nèi)方式

@Builder xx{}

需要傳遞參數(shù)時(shí)采用引用傳遞 $$

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

@BuilderParam標(biāo)簽

對(duì)應(yīng)@Builder標(biāo)簽，類似于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()
    }
  }
}


//頁(yè)面入口
@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("組件內(nèi)方法")
      .fontSize(15)
      .fontColor("#999999")
      .margin({top:20})
  }

  build(){

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

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

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

      testBuildParam({param:this.builderSelf})

    }

  }
}

審核編輯 黃宇

HTML 1800 字?jǐn)?shù) 121 段落