鸿蒙开发（九）UI实战 - 线性布局实现登录界面

devtools/2024/9/23 8:29:19/

前面我们花了很多章去讲述鸿蒙开发的UI，包括布局和控件等。本篇，我们综合使用布局和控件，完成一个简单的用户登录界面。

一、布局选择

简单回忆下我们掌握的几种布局，线性布局的控件横向或纵向线性排列，非常适合实现登录界面，因此我们使用线性布局来实现登录界面。

二、登录界面实现

1、创建UIAbility

创建LoginAbility，并且设置为Launcher ability：

可以看到，module.json5里面已经自动加上了skills：xxx.system.home，入口Ability只能有一个，记得把默认的EntryAbility的skills删掉：

2、创建页面

推荐使用New -Page的方式创建页面，这样会在main_pages自动添加页面名称，防止出现页面加载空白的case（我之前的demo就直接复制的Index，然后main_pages没增加页面信息，加载白屏。。。）：

3、实现登录页面UI代码

如下代码实现了一个简单的登录界面，这是迄今为止写的最长的一个页面了，不过代码仍然比较简单，也比较好理解：

import hilog from '@ohos.hilog';
import common from '@ohos.app.ability.common';@Entry
@Component
struct Login {@State passport: string = '';@State password: string = '';private context = getContext(this) as common.UIAbilityContextbuild() {Column({ space: 5 }) {Row() {Text('账号：')TextInput({ placeholder: '请输入账号' }).width('60%').height(40).onChange((data: string) => {this.passport = data})}Row() {Text('密码：')TextInput({ placeholder: '请输入密码' }).width('60%').height(40).onChange((data: string) => {this.password = data})}Button('登录').width('50%').height(40).margin({ top: 20 }).onClick(() => {this.doLogin()})}.width('100%').height('80%').justifyContent(FlexAlign.Center)}doLogin() {if (this.password || this.password == '') {hilog.info(0x0000, 'Login', 'password is null');return}if (this.passport || this.passport == '') {hilog.info(0x0000, 'Login', 'passport is null');return}hilog.info(0x0000, 'Login', 'passport:', '%{public}s', this.passport);hilog.info(0x0000, 'Login', 'password:', '%{public}s', this.password);// 触发login事件this.context.eventHub.emit('login')}
}

预览效果如下：