HarmonyOs学习 实验四：开发一个登录界面

一、实验目的

使用image、text、textinput、button、loadingprogress等基础组件，完成一个开发页面

二、实验设备与环境

• 开发软件：DevEco Studio
• 操作系统：HarmonyOS
• API版本：API9

三、实验步骤

1.点击Creat Project创建一个项目

2.按图示步骤点击

3.填写项目名、api版本、Model和Node

4.在entry/src/main/resources/base/media下添加这些图片，图片名一致，可以自己找图片

5.在entry/src/main/resources/base/element下添加以下文件

color.json

{
  "color": [
    {
      "name": "start_window_background",
      "value": "#FFFFFF"
    },
    {
      "name": "title_color",
      "value": "#333333"
    },
    {
      "name": "subtitle_color",
      "value": "#666666"
    },
    {
      "name": "input_textColor",
      "value": "#333333"
    },
    {
      "name": "input_backgroundColor",
      "value": "#F5F5F5"
    },
    {
      "name": "button_textColor",
      "value": "#FFFFFF"
    },
    {
      "name": "button_backgroundColor",
      "value": "#1890ff"
    },
    {
      "name": "link_color",
      "value": "#1890ff"
    },
    {
      "name": "divider_color",
      "value": "#EEEEEE"
    },
    {
      "name": "other_login_color",
      "value": "#666666"
    },
    {
      "name": "background_color",
      "value": "#FFFFFF"
    },
    {
      "name": "error_color",
      "value": "#FF4444"
    }
  ]
}

float.json

{
  "float": [
    {
      "name": "title_fontSize",
      "value": "24fp"
    },
    {
      "name": "subtitle_fontSize",
      "value": "14fp"
    },
    {
      "name": "input_height",
      "value": "48vp"
    },
    {
      "name": "input_fontSize",
      "value": "16fp"
    },
    {
      "name": "input_borderRadius",
      "value": "24vp"
    },
    {
      "name": "button_height",
      "value": "48vp"
    },
    {
      "name": "button_fontSize",
      "value": "18fp"
    },
    {
      "name": "button_borderRadius",
      "value": "24vp"
    },
    {
      "name": "link_fontSize",
      "value": "14fp"
    },
    {
      "name": "other_login_fontSize",
      "value": "14fp"
    }
  ]
}

string.json

{
  "string": [
    {
      "name": "module_desc",
      "value": "module description"
    },
    {
      "name": "EntryAbility_desc",
      "value": "description"
    },
    {
      "name": "EntryAbility_label",
      "value": "label"
    },
    {
      "name": "login_title",
      "value": "登录界面"
    },
    {
      "name": "login_subtitle",
      "value": "登录帐号以使用更多服务"
    },
    {
      "name": "account_placeholder",
      "value": "请输入账号"
    },
    {
      "name": "password_placeholder",
      "value": "请输入密码"
    },
    {
      "name": "sms_login",
      "value": "短信验证码登录"
    },
    {
      "name": "forget_password",
      "value": "忘记密码"
    },
    {
      "name": "login_button",
      "value": "登录"
    },
    {
      "name": "register",
      "value": "注册帐号"
    },
    {
      "name": "other_login_methods",
      "value": "其他方式登录"
    },
    {
      "name": "method_one",
      "value": "方式一"
    },
    {
      "name": "method_two",
      "value": "方式二"
    },
    {
      "name": "method_three",
      "value": "方式三"
    }
  ]
}

6.最后在entry/src/main/ets/pages/Index.ets文件编写页面

// LoginPage.ets
@Entry
@Component
struct LoginPage {
  // 定义状态变量
  @State account: string = '' // 账号输入框内容
  @State password: string = '' // 密码输入框内容
  @State isPasswordVisible: boolean = false // 是否显示密码
  @State isLoading: boolean = false // 是否正在加载
  @State errorMessage: string = '' // 提示信息

  // 处理登录按钮点击事件
  handleLogin() {
    if (this.account.trim() === '' || this.password.trim() === '') {
      // 账号或密码为空，提示用户
      this.errorMessage = '请输入账号和密码';
      return;
    }
    // 清空提示信息
    this.errorMessage = '';
    // 模拟登录加载
    this.isLoading = true;
    setTimeout(() => {
      console.log('登录成功');
      this.isLoading = false;
    }, 2000);
  }

  // 切换密码可见性
  togglePasswordVisibility() {
    this.isPasswordVisible = !this.isPasswordVisible;
  }

  build() {
    Column() {
      // Logo 图片
      Image($r('app.media.logo'))
        .width('100vp')
        .height('100vp')
        .margin({ top: '50vp' })

      // 标题文本
      Text($r('app.string.login_title'))
        .fontSize($r('app.float.title_fontSize'))
        .fontColor($r('app.color.title_color'))
        .margin({ top: '20vp' })

      // 副标题文本
      Text($r('app.string.login_subtitle'))
        .fontSize($r('app.float.subtitle_fontSize'))
        .fontColor($r('app.color.subtitle_color'))
        .margin({ top: '10vp' })

      // 账号输入框
      TextInput({ placeholder: $r('app.string.account_placeholder') })
        .width('90%')
        .height($r('app.float.input_height'))
        .margin({ top: '30vp' })
        .fontColor($r('app.color.input_textColor'))
        .fontSize($r('app.float.input_fontSize'))
        .borderRadius($r('app.float.input_borderRadius'))
        .backgroundColor($r('app.color.input_backgroundColor'))
        .onChange((value) => {
          this.account = value;
        })

      // 密码输入框
      TextInput({ placeholder: $r('app.string.password_placeholder') })
        .width('90%')
        .height($r('app.float.input_height'))
        .margin({ top: '20vp' })
        .fontColor($r('app.color.input_textColor'))
        .fontSize($r('app.float.input_fontSize'))
        .borderRadius($r('app.float.input_borderRadius'))
        .backgroundColor($r('app.color.input_backgroundColor'))
        .type(this.isPasswordVisible ? InputType.Normal : InputType.Password)
        .onChange((value) => {
          this.password = value;
        })

      // 密码可见性切换按钮
      Button() {
        Text('切换可见性')
          .width('200vp')
          .height('20vp')
          .fontColor($r('app.color.button_textColor')) // 设置字体颜色
          .textAlign(TextAlign.Center)
      }
      .width('200vp')
      .height('50vp')
      //.margin({ left: '75%' })
      .margin({ top: '20vp' })
      .onClick(() => {
        this.togglePasswordVisibility();
      })

      // 辅助链接行
      Row() {
        Text($r('app.string.sms_login'))
          .fontSize($r('app.float.link_fontSize'))
          .fontColor($r('app.color.link_color'))
        Text($r('app.string.forget_password'))
          .fontSize($r('app.float.link_fontSize'))
          .fontColor($r('app.color.link_color'))
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
      .margin({ top: '20vp' })

      // 提示信息
      if (this.errorMessage) {
        Text(this.errorMessage)
          .fontSize($r('app.float.link_fontSize'))
          .fontColor($r('app.color.error_color'))
          .margin({ top: '10vp' })
      }

      // 登录按钮
      Button($r('app.string.login_button'))
        .width('90%')
        .height($r('app.float.button_height'))
        .margin({ top: '30vp' })
        .fontColor($r('app.color.button_textColor'))
        .fontSize($r('app.float.button_fontSize'))
        .borderRadius($r('app.float.button_borderRadius'))
        .backgroundColor($r('app.color.button_backgroundColor'))
        .onClick(() => {
          this.handleLogin();
        })

      // 注册账号链接
      Text($r('app.string.register'))
        .fontSize($r('app.float.link_fontSize'))
        .fontColor($r('app.color.link_color'))
        .margin({ top: '20vp' })

      // 底部分割线
      Divider()
        .strokeWidth(1)
        .color($r('app.color.divider_color'))
        .margin({ top: '40vp' })

      // 其他登录方式文本
      Text($r('app.string.other_login_methods'))
        .fontSize($r('app.float.other_login_fontSize'))
        .fontColor($r('app.color.other_login_color'))
        .margin({ top: '20vp' })

      // 其他登录方式按钮行
      Row() {
        Button($r('app.string.method_one'))
          .width('25vp')
          .height('25vp')
          .borderRadius('12.5vp')
        Button($r('app.string.method_two'))
          .width('25vp')
          .height('25vp')
          .borderRadius('12.5vp')
          .margin({ left: '20vp' })
        Button($r('app.string.method_three'))
          .width('25vp')
          .height('25vp')
          .borderRadius('12.5vp')
          .margin({ left: '20vp' })
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .margin({ top: '20vp' })
    }
    .width('100%')
    .height('100%')
    .padding({ left: '20vp', right: '20vp' })
    .backgroundColor($r('app.color.background_color'))
  }
}

7.实现效果

四、实验总结

本次实验通过实际开发一个登录界面，全面了解了 HarmonyOS 应用开发的基本流程和技巧。虽然在开发过程中遇到了一些问题，但通过查阅资料和实践摸索，成功解决了问题并完成了实验目标。未来将继续深入学习 HarmonyOS 开发，探索更多高级功能和优化方法，提升应用开发的质量和效率。