ArkTS+UI登录页面

#鸿蒙前端登录页面
功能：没啥功能，没有数据库（假的也没有），登录时需要同时满足username和password有值，否则会弹窗提示（AlertDialog.show），
输入后会弹窗并显示用户名
背景是一张图片，然后用了属性backgroundBlurStyle(BlurStyle.Thick)来增加模糊感
@State声明状态变量，当变量更改时也会刷新页面UI当前变量渲染
onChange方法会在inputText组件的内容发生改变的时候即时更新到声明的变量中

效果

代码

@Entry
@Component
struct firstPage {

  @State users:string[] = ['admin']

  // 选择的登录类型
  @State loginType: number = 0
  // 输入的username
  @State username: string = ''
  // 输入的密码
  @State password: string = ''
  // 点击登录的回调
  private loginUser = async () => {
    console.log('username',this.username)
    console.log('password',this.password)
    if (!this.username || !this.password) {
      // 弹框组件 自带的 不需要引入
      AlertDialog.show(
        {
          title: '温馨提示',
          message: '请输入用户名或者密码',
          autoCancel: true,
          alignment: DialogAlignment.Center,
          gridCount: 3,
          confirm: {
            value: '确认',
            action: () => {
              console.info('Button-clicking callback')
            }
          },
          cancel: () => {
            console.info('Closed callbacks')
          }
        }
      )
    } else {
      // 发送请求
      AlertDialog.show({
        message:`欢迎您,用户${this.username}`
      })
    }
  }

  build() {
    Column({ space:10}) {

      Image($r('app.media.img9'))
        .height(200)
        .width(200)
        .margin({
          top:250
        })
        .borderRadius(100)
      TextInput({
        text:this.username,
        placeholder:'username'
      })
        .onChange((e) => { // 必须要写这个才能实现啊数据绑定
          this.username = e
        })
        .type(InputType.Normal)
        .id('username')
      TextInput({
        text:this.password,
        placeholder:'password'
      })
        .type(InputType.Password)
        .id('password')
        .onChange((e) => { // 必须要写这个才能实现啊数据绑定
          this.password = e
        })
      Button('Login')
        .id('loginBtn')
        .width(200)
        .onClick(this.loginUser)
      Row({space:10}){
        Text('前往注册')
          .id('goRegister')
        Text('忘记密码')
          .id('forgetPassword')
      }
      Image($r('app.media.ic_public_quit'))
        .height(30)
        .fillColor(Color.Gray)
        .id('quitBtn')
        .position({right:0,bottom:0})
    }
    .height('100%')
    .padding({ left:20,right:20 })
    .backgroundImage($r('app.media.ying_and_shenlilinghua'))
    .backgroundBlurStyle(BlurStyle.Thick)
    .backgroundImageSize(ImageSize.Cover)

  }
}