學習筆記（四十六）：$$語法：內建元件雙向同步

听着music睡發表於2024-11-25
筆記元件

概述：

$$運算子為系統內建元件提供TS變數的引用，使得TS變數和系統內建元件的內部狀態保持同步

使用規則：

1、當前$$支援基礎型別變數，以及@State、@Link和@Prop裝飾的變數

2、$$繫結的變數變化時，會觸發UI的同步重新整理

3、支援的元件

使用示例：

@Entity
@Component
export struct LoginAccount {
  @State userName:string = ""; // 使用者名稱
  @State passWord:string = ""; // 密碼

  submit(){
    console.log('submit')
    console.log('userName->'+this.userName)
    console.log('passWord->'+this.passWord)
  }
  build() {
    Column() {
      Image($r('app.media.logo'))
        .width(150)
        .margin({ top:120 })
      Text().layoutWeight(1)
      TextInput({text:$$this.userName,placeholder:'請輸入賬號'})
        .padding(10)
        .width('70%')
        .borderWidth(0)
        .margin({bottom:16})
        .borderRadius(4)
        .maxLength(64)
      TextInput({text:$$this.passWord,placeholder:'請輸入密碼'})
        .padding(10)
        .width('70%')
        .borderWidth(0)
        .type(InputType.Password)
        .borderRadius(4)
        .margin({bottom:20})
        .maxLength(64)
      Button('登入')
        .type(ButtonType.Normal)
        .borderRadius(4)
        .width('70%')
        .backgroundColor($r('app.color.main_color'))
        .margin({top:20,bottom:40})
        .onClick(()=>this.submit())
    }
    .backgroundColor(0x50000000)
    .width('100%')
    .height('100%')
  }
}

相關文章