前面我们花了很多章去讲述鸿蒙开发的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.UIAbilityContext
build() {
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')
}
}预览效果如下：
本篇，使用线性布局实现了一个简单的用户登录界面。后面，我还会结合各种各样的场景，去进行更多的UI实战。另外，在这里也提醒一下初学者，布局或控件的API没必要死记硬背，用到哪个布局或控件直接点进源码去看看，多看看源码也就记住了。
最后，分享一款免费看热门电影和电视剧的app，仅限Android：文章来源：https://www.toymoban.com/news/detail-859749.html
文章来源地址https://www.toymoban.com/news/detail-859749.html
到了这里，关于鸿蒙开发（九）UI实战 - 线性布局实现登录界面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
