預覽

簡介

基于鴻蒙系統（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）經典紅色風格登錄頁布局 - 高質量源碼分享平臺-免費下載各類網站源碼與模板及前沿動態資訊