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

使用 ArkUI 开发鸿蒙登录界面

article 2025/3/13 11:16:52

1. 引言

本文将介绍如何使用鸿蒙 ArkUI 结合 ArkTS 编写一个简单的登录界面，包括用户名和密码输入框以及登录按钮。

2. 项目初始化

首先，使用 DevEco Studio 创建一个 ArkTS 工程，或者使用命令行工具：

hpm init myArkApp
cd myArkApp
hpm install

如果需要引入第三方库，可以使用 ohpm 进行安装，例如：

ohpm install @ohos/some-library --save

3. 编写登录界面

在 pages/LoginPage.ets 中创建 ArkUI 组件。

// pages/LoginPage.ets
import { Component, State } from '@ohos.arkui';

@Component
struct LoginPage {
  @State username: string = '';
  @State password: string = '';

  private onLoginClick() {
    console.log(`用户名: ${this.username}, 密码: ${this.password}`);
    // 在此处添加登录逻辑
  }

  build() {
    Column({ space: 20 }) {
      TextInput({ placeholder: '请输入用户名' })
        .onInput(value => this.username = value)
        .padding(10)
        .borderRadius(5)
        .backgroundColor('#F0F0F0');
      
      TextInput({ placeholder: '请输入密码', type: 'password' })
        .onInput(value => this.password = value)
        .padding(10)
        .borderRadius(5)
        .backgroundColor('#F0F0F0');
      
      Button('登录')
        .onClick(() => this.onLoginClick())
        .padding(10)
        .backgroundColor('#007BFF')
        .borderRadius(5)
        .textColor('#FFFFFF');
    }
    .padding(20)
    .alignItems('center');
  }
}