HarmonyOS个人项目案例——综合开发过程记录2

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、登录界面设计
• 二、相关代码
  • 1.代码部分
  • 2.效果图
• 总结

---

前言

        在当今的数字时代，登录界面成为了我们与各种网络平台进行互动和交互的第一关。一个好的登录界面设计是用户体验的重要组成部分，可以决定用户是否愿意继续使用该平台或应用。因此，一个简洁、直观且易于使用的登录界面设计至关重要。

---

一、登录界面设计

        登录界面设计应该符合用户习惯和认知，提供简单明了的操作流程。在设计登录界面时，应该考虑到用户的主要目标是填写准确的登录信息以便能够顺利登录。因此，登录界面的元素和页面布局应该简洁明了，不应该有过多的花哨效果和复杂的操作流程。

二、相关代码

1.代码部分

登录界面代码：

import router from '@ohos.router'
@Extend(Text) function opacityWhitetext(opacity: number,fontSize: number=10){
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}
@Entry
@Component
struct Index {
  build() {
    Column({ space: 10 }) {
      Row() {
      }

      Row() {
      }

      Row() {
        Image($r('app.media.ic_main')).width(150)
      }

      Row() {
        Text('用户登录').opacityWhitetext(1.5, 35)
      }

      Row() {
        Text('登录账号以提供更多服务').opacityWhitetext(1, 18)
      }

      Row() {
        TextInput({ placeholder: "邮箱/手机号/用户名" })
          .backgroundColor('#ffffff')
          .width(300)
          .type(InputType.Normal)
      }

      Row() {
        TextInput({ placeholder: "密码" })
          .backgroundColor('#ffffff')
          .width(300)
          .type(InputType.Password)
      }

      Row() {
        Button('登录').width(150).backgroundColor('#808080').onClick(()=>{
          router.pushUrl({
            url:'pages/page1'
          })
        })

      }
      Row() {
        Button('忘记密码').onClick(()=>{
          router.pushUrl({
            url:'pages/forget'
          })
        })
          .fontColor(Color.Black)
          .backgroundColor($r('app.color.welcome_color'))
        Button('注册').onClick(()=>{
          router.pushUrl({
            url:'pages/zhuce'
          })
        })
          .fontColor(Color.Black)
          .backgroundColor($r('app.color.welcome_color'))
      }
    }

        .width('100%')
        .height('100%')
        .backgroundColor($r('app.color.welcome_color'))
    }
  }

注册成功界面代码：

import router from '@ohos.router'
@Extend(Text) function opacitytext(opacity: number,fontSize: number=10){
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}
@Entry
@Component
struct zhuce {
  build() {
    Column() {
      Row() {
        Image($r("app.media.ic_public_back"))
          .width(24)
          .height(24)
          .onClick(() => {
            router.back();
          })
        Text('注册成功').opacitytext(0.8, 20)
          .fontColor(Color.Black)
      }
      Row(){
        Image($r("app.media.ic_registration_success"))
          .objectFit(ImageFit.Contain)
          .width(72)
          .height(72)
          .position({x:130,y:300})
      }
      Row(){
          Text('注册成功').textAlign(TextAlign.Center).position({y:400,x:130})
      }
      Row(){
        Button('点我返回首页').position({y:420,x:105}).onClick(()=>{
          router.back();
        })
          .fontColor(Color.Black)
          .backgroundColor(Color.White)
      }
    }
  }
}

忘记密码界面代码：

import router from '@ohos.router'
@Extend(Text) function opacitytext(opacity: number,fontSize: number=10){
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}
@Entry
@Component
struct forget {
  build() {
    Column({space:10}) {
      Row() {
        Image($r("app.media.ic_public_back"))
          .width(24)
          .height(24)
          .onClick(() => {
            router.back();
          })
        Text('忘记密码').opacitytext(0.8, 20)
          .fontColor(Color.Black)
      }
      .alignSelf(ItemAlign.Start)
      Row(){}
      Row() {
        TextInput({ placeholder: "邮箱/手机号/用户名" })
          .backgroundColor('#ffffff')
          .width(300)
          .type(InputType.Normal)
      }
      Row() {
        TextInput({ placeholder: "更改密码" })
          .backgroundColor('#ffffff')
          .width(300)
          .type(InputType.Password)
      }
      Row() {
        Button('提交').width(150).backgroundColor('#808080').onClick(()=>{
          router.pushUrl({
            url:'pages/changepassword'
          })
        })

      }
    }
  }
}

更改密码成功代码：

import router from '@ohos.router'
@Extend(Text) function opacitytext(opacity: number,fontSize: number=10){
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}
@Entry
@Component
struct changepassword {
  build() {
    Column() {
      Row() {
        Image($r("app.media.ic_public_back"))
          .width(24)
          .height(24)
          .onClick(() => {
            router.back();
          })
        Text('更改成功').opacitytext(0.8, 20)
          .fontColor(Color.Black)
      }
      Row(){
        Image($r("app.media.ic_registration_success"))
          .objectFit(ImageFit.Contain)
          .width(72)
          .height(72)
          .position({x:130,y:300})
      }
      Row(){
        Text('更改成功').textAlign(TextAlign.Center).position({y:400,x:130})
      }
      Row(){
        Button('点我返回首页').position({y:420,x:105}).onClick(()=>{
          router.pushUrl({
            url:'pages/Index'
          });
        })
          .fontColor(Color.Black)
          .backgroundColor(Color.White)
      }
    }
  }
}

2.效果图

登录界面效果图：

注册成功效果图：

忘记密码效果图：

更改密码成功效果图：

---

总结

        一个好的登录界面设计需要考虑到用户的操作习惯、安全需求和体验感受。通过简洁明了的设计和用户友好的操作流程，登录界面能够为用户提供一个方便、安全和愉快的登录体验。