鸿蒙里面的TextInput组件登录注册简单案例

import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct LoginPage {
  @State username: string = "用户名"
  private controller = new TextInputController()
  @State password: string = "密码"
  build() {
    Column({ space: 20 }) {

      TextInput({ placeholder: "请输入你的账号", text: this.username, controller: this.controller })
        .type(InputType.Normal).margin(10)//type用来设置输入方式
      TextInput({ placeholder: "请输入你的密码", text: this.password, controller: this.controller })
        .type(InputType.Password).margin(10)
      Row() {
        Text("忘记密码").layoutWeight(2)
        Text("立即注册")
      }.width("100%").height("2%").padding({ left: 20, right: 20 }).margin(15)

      Button("登录")
        .fontColor(Color.White)
        .borderRadius(4)
        .onClick(() => {
          promptAction.showToast({message:"登录按钮"})
        })
        .width("90%")
        .height(30)
        .margin(15)
      Column(){
        Image($r("app.media.th1")).width(50)
        Text("指纹登录")
      }
      Row(){
        Text('').backgroundColor(Color.Blue).width(80).height(1)
        Text('第三方登录').layoutWeight(1).textAlign(TextAlign.Center)
        Text('').backgroundColor(Color.Blue).width(80).height(1)
      }.justifyContent(FlexAlign.SpaceEvenly).width('100%').padding(10)
      Row(){
          Image($r("app.media.th2")).width(50)
          Image($r("app.media.th3")).width(50)
          Image($r("app.media.th4")).width(50)
      }.justifyContent(FlexAlign.SpaceAround)
      .width("100%")
    }.height('100%')
    .width('100%')
    .margin({ top: 200 })
  }
}