鸿蒙开发实战：5分钟打造一个优雅的登录界面（OpenHarmony 5.0兼容版）

无需第三方资源，纯ArkUI组件构建专业级登录页面

在鸿蒙应用开发中，登录界面是每个应用的门面。今天我们将手把手教你如何用ArkUI在OpenHarmony 5.0上创建一个既美观又功能完整的登录界面，而且完全不需要依赖外部图标资源！

一、效果预览

我们先来看一下最终实现的登录界面效果：

渐变蓝色背景搭配白色登录卡片，简洁大气
完整的表单验证：用户名、密码必填验证，密码长度检查
多方式登录：账号密码登录 + 第三方登录选项
响应式交互：加载状态、记住我功能、忘记密码
完全兼容：专为OpenHarmony 5.0优化，无兼容性问题

二、核心代码实现

代码由 deepseek 生成

// LoginPage.ets
import prompt from '@ohos.prompt';

@Entry
@Component
struct LoginPage {
  @State username: string = '';
  @State password: string = '';
  @State rememberMe: boolean = false;
  @State isLoading: boolean = false;

  // 显示提示信息
  showToast(message: string) {
    // 在5.0版本中，可以使用AlertDialog或者自定义Toast效果
    console.info(message);

    prompt.showToast({
      message: message,
      duration: 2000
    });
  }

  // 表单验证
  validateForm(): boolean {
    if (!this.username) {
      this.showToast('请输入用户名');
      return false;
    }
    if (!this.password) {
      this.showToast('请输入密码');
      return false;
    }
    if (this.password.length < 6) {
      this.showToast('密码长度至少6位');
      return false;
    }
    return true;
  }

  // 登录处理
  handleLogin() {
    if (!this.validateForm()) return;

    this.isLoading = true;
    // 模拟登录过程
    setTimeout(() => {
      this.isLoading = false;
      this.showToast('登录成功！');
      // 实际应用中这里会进行页面跳转
    }, 1500);
  }

  build() {
    Column() {
      // 顶部标题和图标
      Column() {
        // 使用文本图标代替图像
        Text('👤')
          .fontSize(40)
          .margin({ bottom: 16 })
        Text('欢迎登录')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.White)
      }
      .margin({ top: 60, bottom: 40 })

      // 登录卡片
      Column() {
        // 用户名输入
        Row() {
          Text('👤') // 用户图标
            .fontSize(20)
            .margin({ right: 12 })
          TextInput({ placeholder: '请输入用户名/手机号/邮箱' })
            .width('85%')
            .height(50)
            .placeholderColor('#999')
            .caretColor('#007DFF')
            .onChange((value: string) => {
              this.username = value;
            })
        }
        .width('90%')
        .margin({ top: 30, bottom: 15 })

        Divider().strokeWidth(1).color('#eee').width('90%')

        // 密码输入
        Row() {
          Text('🔒') // 锁图标
            .fontSize(20)
            .margin({ right: 12 })
          TextInput({ placeholder: '请输入密码' })
            .width('85%')
            .height(50)
            .type(InputType.Password)
            .placeholderColor('#999')
            .caretColor('#007DFF')
            .onChange((value: string) => {
              this.password = value;
            })
        }
        .width('90%')
        .margin({ top: 15, bottom: 15 })

        Divider().strokeWidth(1).color('#eee').width('90%')

        // 记住我和忘记密码
        Row() {
          Row() {
            Checkbox()
              .select(this.rememberMe) // 修正：使用select而不是selected
              .onChange((value: boolean) => {
                this.rememberMe = value;
              })
              .margin({ right: 8 })
            Text('记住我')
              .fontSize(14)
              .fontColor('#666')
          }
          .onClick(() => {
            this.rememberMe = !this.rememberMe;
          })

          Blank()

          Text('忘记密码?')
            .fontSize(14)
            .fontColor('#007DFF')
            .onClick(() => {
              this.showToast('跳转到找回密码页面');
            })
        }
        .width('90%')
        .margin({ top: 15, bottom: 30 })

        // 登录按钮
        Button(this.isLoading ? '登录中...' : '登录')
          .width('90%')
          .height(45)
          .backgroundColor('#007DFF')
          .fontColor(Color.White)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .onClick(() => {
            this.handleLogin();
          })
          .opacity(this.isLoading ? 0.7 : 1)
          .stateEffect(!this.isLoading)

        // 第三方登录标题
        Row() {
          Divider().strokeWidth(1).color('#eee').width('30%')
          Text('其他登录方式')
            .fontSize(12)
            .fontColor('#999')
            .margin({ left: 10, right: 10 })
          Divider().strokeWidth(1).color('#eee').width('30%')
        }
        .margin({ top: 30, bottom: 20 })

        // 使用文本图标和颜色的第三方登录选项
        Row() {
          // 微信登录
          Column() {
            Text('微')
              .fontSize(16)
              .fontColor(Color.White)
              .fontWeight(FontWeight.Medium)
          }
          .width(40)
          .height(40)
          .backgroundColor('#07C160') // 微信绿色
          .borderRadius(20)
          .justifyContent(FlexAlign.Center)
          .alignItems(HorizontalAlign.Center)
          .margin({ right: 25 })
          .onClick(() => {
            this.showToast('微信登录');
          })

          // QQ登录
          Column() {
            Text('Q')
              .fontSize(16)
              .fontColor(Color.White)
              .fontWeight(FontWeight.Medium)
          }
          .width(40)
          .height(40)
          .backgroundColor('#12B7F5') // QQ蓝色
          .borderRadius(20)
          .justifyContent(FlexAlign.Center)
          .alignItems(HorizontalAlign.Center)
          .margin({ right: 25 })
          .onClick(() => {
            this.showToast('QQ登录');
          })

          // 手机登录
          Column() {
            Text('📱')
              .fontSize(16)
              .fontColor(Color.White)
          }
          .width(40)
          .height(40)
          .backgroundColor('#FF9500') // 橙色
          .borderRadius(20)
          .justifyContent(FlexAlign.Center)
          .alignItems(HorizontalAlign.Center)
          .onClick(() => {
            this.showToast('手机验证码登录');
          })
        }
        .justifyContent(FlexAlign.Center)
        .margin({ bottom: 30 })

        // 注册提示
        Row() {
          Text('还没有账号？')
            .fontSize(14)
            .fontColor('#666')
          Text('立即注册')
            .fontSize(14)
            .fontColor('#007DFF')
            .onClick(() => {
              this.showToast('跳转到注册页面');
            })
        }
        .margin({ bottom: 20 })
      }
      .width('80%')
      .backgroundColor(Color.White)
      .borderRadius(16)
      .shadow({ radius: 20, color: '#1A000000', offsetX: 0, offsetY: 4 })

      // 版权信息
      Text('© 2024 我的应用 v1.0.0')
        .fontSize(12)
        .fontColor(Color.White)
        .margin({ top: 40 })
        .opacity(0.8)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)
    // 使用背景色代替渐变背景
    .backgroundColor('#007DFF')
  }
}