IT评测·应用市场-qidao123.com

标题: 鸿蒙实战开发教程-注册登录页面 [打印本页]
作者: 杀鸡焉用牛刀    时间: 2024-11-4 02:59
标题: 鸿蒙实战开发教程-注册登录页面
今天要和各人分享的是使用鸿蒙开发一个注册登录页面，结果如图：

这个页面结构比较简朴，非常得当新手友友们学习。大体上就是一个层叠结构，背景图片在下，内容部分在上，基础结构代码如下：

  1. Stack(){
  2.       //背景图片
  3.       Image($r('app.media.back_icon'))
  4.         .width('100%')
  5.         .height('100%')
  7.       Column(){
  8.         //内容部分
  9.         
  10.       }
  11.       .width('100%')
  12.       .height('100%')
  13.       .alignItems(HorizontalAlign.Start)
  14.       .padding({left:30,right:30,top:140})
  15. }
  16. .width('100%')
  17. .height('100%')
复制代码
内容部分也比较简朴，基本都是输入框和笔墨的纵向分列，有必要说一嘴的地方是验证码输入框我采用输入框组件和文本组件的组合方式来实现：
  2. Row(){
  3.           TextInput({placeholder:'请输入验证码'})
  4.             .placeholderColor('#8F959E')
  5.             .fontSize(15)
  6.             .fontColor(Color.Black)
  7.             .width('70%')
  8.             .height(50)
  9.             .backgroundColor(Color.White)
  11.           Row(){
  13.           }
  14.           .width(1)
  15.           .height(30)
  16.           .backgroundColor('rgba(216, 216, 216, 1)')
  17.           .borderRadius(0.5)
  19.           Text('获取验证码')
  20.             .width('30%')
  21.             .height(50)
  22.             .fontColor('rgba(20, 86, 240, 1)')
  23.             .fontSize(15)
  24.             .textAlign(TextAlign.Center)
  25.         }
  26.         .width('100%')
  27.         .height(50)
  28.         .borderRadius(10)
  29.         .borderWidth(1)
  30.         .borderColor('#D0D3D5')
  31.         .backgroundColor(Color.White)
  32.         .margin({top:25})
复制代码

在密码输入框中，只要设置TextInput的范例就可以实现带眼睛logo的密码输入框结果：
  2. TextInput({placeholder:'请输入密码'})
  3.           .type(InputType.Password)
复制代码

登录页面和注册页面雷同，把获取验证码部分去掉就可以了，完整代码如下：
  1. import { Font, router } from '@kit.ArkUI';@Entry@Componentstruct Index {  @State message: string = 'Hello World';  build() {    Stack(){      Image($r('app.media.back_icon'))        .width('100%')        .height('100%')      Column(){        Row(){          Image($r('app.media.logo'))            .width(33)            .height(33)          Text('码牛讲堂')            .fontSize(27)            .fontColor(Color.Black)            .fontWeight(FontWeight.Bolder)            .margin({left:10})        }        Text('注册账号')          .fontSize(18)          .fontColor('rgba(100, 106, 115, 1)')          .margin({top:8})        TextInput({placeholder:'请输入账号'})          .placeholderColor('#8F959E')          .fontSize(15)          .fontColor(Color.Black)          .width('100%')          .height(50)          .borderRadius(10)          .borderWidth(1)          .borderColor('#D0D3D5')          .backgroundColor(Color.White)          .margin({top:50})        
  2. Row(){
  3.           TextInput({placeholder:'请输入验证码'})
  4.             .placeholderColor('#8F959E')
  5.             .fontSize(15)
  6.             .fontColor(Color.Black)
  7.             .width('70%')
  8.             .height(50)
  9.             .backgroundColor(Color.White)
  11.           Row(){
  13.           }
  14.           .width(1)
  15.           .height(30)
  16.           .backgroundColor('rgba(216, 216, 216, 1)')
  17.           .borderRadius(0.5)
  19.           Text('获取验证码')
  20.             .width('30%')
  21.             .height(50)
  22.             .fontColor('rgba(20, 86, 240, 1)')
  23.             .fontSize(15)
  24.             .textAlign(TextAlign.Center)
  25.         }
  26.         .width('100%')
  27.         .height(50)
  28.         .borderRadius(10)
  29.         .borderWidth(1)
  30.         .borderColor('#D0D3D5')
  31.         .backgroundColor(Color.White)
  32.         .margin({top:25})        
  33. TextInput({placeholder:'请输入密码'})
  34.           .type(InputType.Password)          .enterKeyType(EnterKeyType.Done)          .placeholderColor('#8F959E')          .fontSize(15)          .fontColor(Color.Black)          .width('100%')          .height(50)          .borderRadius(10)          .borderWidth(1)          .borderColor('#D0D3D5')          .backgroundColor(Color.White)          .margin({top:25})        Column(){          Text('注册')            .width('100%')            .height(50)            .backgroundColor('rgba(20, 86, 240, 1)')            .fontColor(Color.White)            .fontSize(15)            .textAlign(TextAlign.Center)            .borderRadius(10)          Row(){            Text("已有账号？")              .fontColor('rgba(143, 149, 158, 1)')              .fontSize(14)            Text("立即登录")              .fontColor('rgba(20, 86, 240, 1)')              .fontSize(14)              .onClick(()=>{                router.back()              })          }          .margin({top:25})        }        .margin({top:75})        .width('100%')        .alignItems(HorizontalAlign.Center)      }      .width('100%')      .height('100%')      .alignItems(HorizontalAlign.Start)      .padding({left:30,right:30,top:140})    }    .width('100%')    .height('100%')  }}
复制代码
末了

如果你想快速提升鸿蒙技能，那么可以直接领取这份包含了：【OpenHarmony多媒体技能、Stage模子、ArkUI多端摆设、分布式应用开发、音频、视频、WebGL、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技能知识点。
鸿蒙Next全套VIP学习资料←点击领取！（安全链接，放心点击）
1.鸿蒙焦点技能学习门路

   

  
​

  2.大厂面试必问面试题

​
3.鸿蒙南向开发技能

​
 4.鸿蒙APP开发必备

​
 5.HarmonyOS Next 最新全套视频教程

​
 6.鸿蒙生态应用开发白皮书V2.0PDF

​
这份全套完整版的学习资料已经全部打包好，朋友们如果必要可以点击 鸿蒙Next全套VIP学习资料→免费领取（安全链接，放心点击）


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4