HarmonyOS Next 教育应用之登录视图开发（二）

3. 登录界面布局与交互
   • 功能：使用 Row、Column、Text、Image、TextInput、Checkbox 和 Button 等组件构建登录界面。处理输入框的输入变化、复选框的选择变化以及按钮的点击事件。
   • 代码段：

build() {
  Row() {
    NavDestination() {
      Row() {
        Column() {
          // 标题
          Text('账号密码登录')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
            .margin({
              top: 30,
              bottom: 60,
              left: '4%'
            })
            .alignSelf(ItemAlign.Start)

          // 手机号输入框
          Row() {
            Image($r('app.media.username'))
              .width(20)
              .height(20)
            TextInput({ placeholder: '请输入手机号', text: this.phone })
              .type(InputType.PhoneNumber)
              .margin({
                top: 10,
                bottom: 10
              })
              .width('calc(100% - 30vp)')
              .height(AccountCommonConstants.FULL_HEIGHT)
              .backgroundColor(Color.White)
              .onChange((value: string) => {
                this.phone = value
              })
          }
          .width('92%')
          .height(56)
          .border({
            width: { bottom: 1 },
            color: { bottom: '#eeeeee' },
            style: {
              bottom: BorderStyle.Solid
            }
          })

          // 密码输入框
          Row() {
            Image($r('app.media.password'))
              .width(20)
              .height(20)
            TextInput({ placeholder: '请输入密码', text: this.password })
              .type(InputType.Password)
              .margin({
                top: 10,
                bottom: 10
              })
              .width('calc(100% - 30vp)')
              .height(AccountCommonConstants.FULL_HEIGHT)
              .backgroundColor(Color.White)
              .onChange((value: string) => {
                this.password = value
              })
          }
          .width('92%')
          .height(56)
          .border({
            width: { bottom: 1 },
            color: { bottom: '#eeeeee' },
            style: {
              bottom: BorderStyle.Solid
            }
          })

          // 记住密码与忘记密码
          Row() {
            Row() {
              Checkbox()
                .select(this.rememberPassword == 0 ? false : true)
                .shape(CheckBoxShape.ROUNDED_SQUARE)
                .onChange((value: boolean) => {
                  this.rememberPassword = value ? 1 : 0
                })
              Text(`记住密码`)
                .onClick(() => {
                  if (this.rememberPassword === 0) {
                    this.rememberPassword = 1
                  } else if (this.rememberPassword === 1) {
                    this.rememberPassword = 0
                  }
                })
            }
            Text('忘记密码？')
              .blueTextStyle()
          }
          .width('92%')
          .height(56)
          .justifyContent(FlexAlign.SpaceBetween)

          // 登录按钮
          Button('登录')
            .width('92%')
            .margin({
              top: 50,
            })
            .enabled(isLoginClickable(this.phone, this.password, this.readPrivacy))
            .onClick(async () => {
              //登录仅为示例，不校验真实登录逻辑
              this.pathStack.pop();
            })

          // 隐私政策复选框
          Row() {
            Checkbox()
              .select(this.readPrivacy)
              .shape(CheckBoxShape.ROUNDED_SQUARE)
              .onChange((value: boolean) => {
                this.readPrivacy = value
              })
            Text('我已阅读并同意')
            Text('《隐私政策》')
              .blueTextStyle()
              .onClick(() => {
                this.pathStack.pushPathByName('PolicyAgreement', null);
              })
          }
          .width('92%')
          .height(56)
          .justifyContent(FlexAlign.Center)
        }
        .width(AccountCommonConstants.FULL_WIDTH)
        .height(AccountCommonConstants.FULL_HEIGHT)
      }.width(AccountCommonConstants.FULL_WIDTH)
      .height(AccountCommonConstants.FULL_HEIGHT)
      .backgroundColor(Color.White)
    }
    .size({ width: AccountCommonConstants.FULL_WIDTH, height: AccountCommonConstants.FULL_HEIGHT })
  }
}

4. 辅助函数与扩展方法
   • 功能：blueTextStyle 扩展方法用于设置文本颜色为蓝色，isLoginClickable 函数用于判断登录按钮是否可点击。
   • 代码段：

@Extend(Text)
function blueTextStyle() {
  .fontColor($r('app.color.login_blue_text_color'))
}

function isLoginClickable(account: string, password: string, readPrivacy: boolean): boolean {
  return account !== '' && password !== '' && readPrivacy;
}

总结

通过以上代码的实现，我们在 HarmonyOS Next 中成功构建了一个简单的登录视图。利用 HarmonyOS 提供的组件化开发、状态管理和窗口操作 API，我们可以实现安全且易用的登录界面。该登录视图包含了输入验证、隐私保护和页面跳转等功能，为教育类应用的用户登录提供了基础支持。同时，代码结构清晰，易于维护和扩展，有助于开发者在 HarmonyOS Next 平台上快速开发出高质量的教育应用。