28、鸿蒙/组件/实现登录界面

案例

@Component
export struct Login {
  //
  @State username: string = ''
  @State password: string = ''
  build() {
    Column({ space: 10 }){
      //
      TextInput({
        placeholder: '请输入用户名'
      }).onChange((value)=>{
        this.username = value
      })
      //
      TextInput({
        placeholder: '请输入密码'
      }).type(InputType.Password)
        .onChange((value)=>{
          this.password = value
        })
      //
      Button('登录').width(200).onClick(()=>{
        console.log('登录===', this.username, this.password)
      }).width('100%')
      //
      Row({ space: 15 }){
        Text('立刻注册')
        Text('忘记密码')
      }
    }.padding(20)
  }
}