鸿蒙--登入案例

​

实现要求：

在账户和密码的输入框输入账号或密码时，提交按钮下方同步出现输入的账户和密码

​编辑

@Entry
@Component
struct login {
  @State username:string = ''
  @State password:string = ''
  build() {
    Column(){
      //  图标
      Image($r('app.media.app_icon'))
        .width(100)
        .height(100)
        .margin({top:50})
      //  输入框-账户
      TextInput({placeholder:'请输入账户：'})
        .type(InputType.Normal)
        .margin({top:30})
        .width(300)
        .onChange((e)=>{
          console.log(e)
          this.username = e
        })
      //  输入框-密码
      TextInput({placeholder:'请输入账户：'})
        .type(InputType.Normal)
        .margin({top:10})
        .width(300)
        .onChange((e)=>{
          console.log(e)
          this.password = e
        })

      //  提交按钮
      Button('提交',{type:ButtonType.Capsule})
        .width(200)
        .margin({top:30})

      Text(this.username)
      Text(this.password)
      
    }
    .width('100%')
    .height('100%')
  }
}

​