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

heart荼毒2024-04-30 10:36

前面我们花了很多章去讲述鸿蒙开发的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代码

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

java 复制代码

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：