当前位置：首页 > news >正文

鸿蒙系统（HarmonyOS）经典红色风格登录页布局

news 来源：原创 2025/6/26 11:51:33

预览

简介

基于鸿蒙系统（HarmonyOS）开发的现代化登录界面，采用了科技感十足的红色主题设计。该界面结合了流畅的动画效果、精心设计的视觉元素和人性化的交互体验，为用户提供了一个安全、美观且易用的登录入口。

🎨 精美视觉设计

科技感红色主题：采用鲜明的红色调作为主色调，搭配半透明背景和模糊效果，营造出强烈的视觉冲击力
精致的UI元素：包含精心设计的输入框、按钮、分割线和装饰元素
动态视觉效果：融入了细腻的动画和过渡效果，提升用户体验

🛠️ 实用功能

用户名/密码登录：支持传统的账号密码登录方式
密码可见性切换：用户可以切换密码的显示/隐藏状态
短信验证码：集成了验证码获取功能，包含60秒倒计时
表单验证：内置基础的表单验证逻辑，确保输入完整性

🔄 交互体验

输入框焦点动画：当用户聚焦于输入框时，会触发微妙的缩放动画
按钮状态反馈：按钮会根据不同状态展示不同的视觉效果
友好的错误提示：使用对话框提供清晰的错误提示信息

技术亮点

基于ArkTS语言：采用鸿蒙系统原生开发语言，性能优异
声明式UI：使用ArkUI框架的声明式UI开发方式，代码简洁高效
响应式设计：界面元素能够适应不同尺寸的设备屏幕
状态管理：使用@State装饰器管理组件状态，实现UI与数据的同步
动画系统：利用鸿蒙系统的动画API实现流畅的交互效果

使用场景

移动应用的用户登录界面
企业内部系统的身份验证入口
智能设备的用户认证界面
需要安全登录的各类应用场景

源码

@Entry
@Component
struct Index {@State username: string = ''@State password: string = ''@State verificationCode: string = ''@State countdown: number = 60@State isCounting: boolean = falseprivate intervalID: number = -1@State private rotateAngle: number = 0private rotateTimer: number = -1aboutToAppear() {// 启动旋转动画this.rotateTimer = setInterval(() => {this.rotateAngle = (this.rotateAngle + 1) % 360}, 50)}aboutToDisappear() {// 清除定时器if (this.intervalID !== -1) {clearInterval(this.intervalID)}if (this.rotateTimer !== -1) {clearInterval(this.rotateTimer)}}// 开始倒计时startCountdown() {if (this.isCounting) {return}this.isCounting = truethis.countdown = 60this.intervalID = setInterval(() => {this.countdown--if (this.countdown <= 0) {this.isCounting = falseclearInterval(this.intervalID)}}, 1000)}// 模拟登录login() {if (!this.username.trim()) {AlertDialog.show({title: '提示',message: '请输入用户名',confirm: {value: '确定',action: () => {console.info('用户确认')}}})return}if (!this.password.trim()) {AlertDialog.show({title: '提示',message: '请输入密码',confirm: {value: '确定',action: () => {console.info('用户确认')}}})return}if (!this.verificationCode.trim()) {AlertDialog.show({title: '提示',message: '请输入验证码',confirm: {value: '确定',action: () => {console.info('用户确认')}}})return}AlertDialog.show({title: '登录成功',message: '欢迎回来，' + this.username,confirm: {value: '确定',action: () => {console.info('登录成功')}}})}build() {Stack({ alignContent: Alignment.Center }) {// 背景Column().width('100%').height('100%').backgroundImage($r('app.media.background')).backgroundImageSize(ImageSize.Cover)// 半透明红色遮罩层，增强视觉冲击力Column().width('100%').height('100%').backgroundColor('rgba(180, 0, 0, 0.5)')// 登录表单Column() {// 标题Row() {Text('登录').fontSize(28).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').textShadow({radius: 10,color: 'rgba(226, 35, 26, 0.8)',offsetX: 0,offsetY: 0})}.width('100%').justifyContent(FlexAlign.Center).margin({ bottom: 40 })// 用户名输入框Column() {Row() {TextInput({ placeholder: '请输入用户名', text: this.username }).placeholderColor('rgba(255, 255, 255, 0.6)').placeholderFont({ size: 16 }).caretColor('#E2231A').fontColor('#FFFFFF').backgroundColor('transparent').padding({ left: 0, right: 0 }).onChange((value) => {this.username = value}).width('85%').height(50)}.width('100%').padding({ left: 20, right: 20 })Divider().width('90%').height(1).color('rgba(226, 35, 26, 0.6)').margin({ top: 5 })}.margin({ bottom: 20 })// 密码输入框Column() {Row() {TextInput({ placeholder: '请输入密码', text: this.password }).placeholderColor('rgba(255, 255, 255, 0.6)').placeholderFont({ size: 16 }).caretColor('#E2231A').fontColor('#FFFFFF').backgroundColor('transparent').padding({ left: 0, right: 0 }).type(InputType.Password).onChange((value) => {this.password = value}).width('100%').height(50)}.width('100%').padding({ left: 20, right: 20 })Divider().width('90%').height(1).color('rgba(226, 35, 26, 0.6)').margin({ top: 5 })}.margin({ bottom: 20 })// 验证码输入框Column() {Row() {TextInput({ placeholder: '请输入验证码', text: this.verificationCode }).placeholderColor('rgba(255, 255, 255, 0.6)').placeholderFont({ size: 16 }).caretColor('#E2231A').fontColor('#FFFFFF').padding({ left: 0, right: 0 }).backgroundColor('transparent').type(InputType.Number).onChange((value) => {this.verificationCode = value}).width('55%').height(50)Button(this.isCounting ? `${this.countdown}秒后重试` : '获取验证码').fontSize(14).fontWeight(FontWeight.Medium).fontColor(this.isCounting ? '#999999' : '#FFFFFF').backgroundColor(this.isCounting ? 'rgba(0, 0, 0, 0.3)' : 'rgba(226, 35, 26, 0.6)').width(120).height(40).borderRadius(20).enabled(!this.isCounting).onClick(() => {this.startCountdown()})}.width('100%').padding({ left: 20, right: 20 })Divider().width('90%').height(1).color('rgba(226, 35, 26, 0.6)').margin({ top: 5 })}.margin({ bottom: 40 })// 登录按钮Button('登 录').width('90%').height(50).fontSize(18).fontWeight(FontWeight.Bold).borderRadius(25).backgroundColor('rgba(226, 35, 26, 0.6)').fontColor('#FFFFFF').onClick(() => {this.login()})}.width('90%').padding({top: 40,bottom: 40,left: 10,right: 10}).borderRadius(15).backgroundColor('rgba(40, 0, 0, 0.8)').backdropBlur(10).border({ width: 1, color: 'rgba(255, 50, 50, 0.5)' })}.width('100%').height('100%')}
}

鸿蒙系统（HarmonyOS）经典红色风格登录页布局 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿动态资讯