HarmonyOS 鸿蒙Next ArkTS超新手入门（五）——登录页面

HarmonyOS 鸿蒙Next ArkTS超新手入门（五）——登录页面 页面布局所需要的容器组件和基础组件我们介绍过了，这次我们看一看如何布局一个页面，这里面我们用一个简单的登陆页面的例子，看一看我们在设计一个页面的时候都需要做些什么。

首先如图所示，我们需要有一个logo，有一些文字说明，需要有账号密码填写的位置，还需要一些按钮，来跳转页面，那么我们要做的的第一件事，就是把这些功能的布局画出来，并且把所需要用到的组件整理出来。

如图所示，经过我们拆分过的页面，就变成了这样。

组件上我们用到了以下组件：

  • 容器组件：Column组件，Row组件
  • 基础组件：Image组件，Text组件，TextInput组件，Button组件。

这里面有三个组件之前提到过，但是没有具体说过的，就是Image组件，TextInput组件，Button组件。

（1）、Image组件，是图片组件，使用的前，需要在项目里先建好文件夹，导入好咱们所需要的文件，然后使用的时候将路径放在Image组件的后面，注意，路径要加引号，就像这样【‘路径’】，至于路径的格式，我们可以找到文件，右键选择查看路径，然后选择路径复制就好了。

（2）、文本输入组件使用起来也比较简单，有两种，一种是单行输入文本就是TextInput，多行输入框为TextArea，同时，我们提供了9种输入模式【.type】，分别为Normal基本输入模式、Password密码输入模式、Email邮箱地址输入模式、Number纯数字输入模式、PhoneNumber电话号码输入模式、USER_NAME用户名输入模式、NEW_PASSWORD新密码输入模式、NUMBER_PASSWORD纯数字密码输入模式、NUMBER_DECIMAL带小数点的数字输入模式。大概的使用方法就是：

TextInput()
  .type(InputType.Normal)

这样就会新建一个普通模式的单行文本输入框。

（3）、Button组件就是我们常见的按钮了，单纯的Button组件，建立的时候，不具有按键功能，只有一个样式，我们增加其属性，让他具备按钮的功能，以下面的代码为例：

Button('Ok', { type: ButtonType.Normal, stateEffect: true })

‘ok’是用来显示按钮上的文字的，type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。

Button的type类型有三种可选，分别为胶囊类型（Capsule）、圆形按钮（Circle）和普通按钮（Normal）。

剩下的部分就是我们之前用到的部分了，大家一起试试吧


更多关于HarmonyOS 鸿蒙Next ArkTS超新手入门（五）——登录页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

很详细，顶一个

更多关于HarmonyOS 鸿蒙Next ArkTS超新手入门（五）——登录页面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，ArkTS是一种用于构建用户界面的声明式编程语言。登录页面的实现通常涉及以下几个步骤：

  1. 页面结构定义：使用@Component装饰器定义页面组件。页面结构通常包括标题、输入框、按钮等元素。

  2. 状态管理：使用@State装饰器管理页面的状态，例如用户名和密码的输入值。

  3. 事件处理：为按钮添加点击事件处理函数，处理登录逻辑。

  4. 样式定义：使用@Styles装饰器定义页面样式，确保UI美观。

  5. 数据绑定：通过数据绑定将输入框的值与状态变量关联，实现双向数据绑定。

以下是一个简单的登录页面示例代码：

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

  build() {
    Column() {
      Text('登录')
        .fontSize(24)
        .margin({ bottom: 20 });

      TextInput({ placeholder: '用户名' })
        .onChange((value) => {
          this.username = value;
        })
        .margin({ bottom: 10 });

      TextInput({ placeholder: '密码', type: InputType.Password })
        .onChange((value) => {
          this.password = value;
        })
        .margin({ bottom: 20 });

      Button('登录')
        .onClick(() => {
          // 处理登录逻辑
          console.log(`用户名: ${this.username}, 密码: ${this.password}`);
        })
        .width('100%');
    }
    .padding(20)
    .width('100%')
    .height('100%');
  }
}

这段代码定义了一个简单的登录页面，包括用户名和密码输入框以及登录按钮。通过@State装饰器管理输入框的值，并在按钮点击时输出用户名和密码。

在HarmonyOS鸿蒙Next中，使用ArkTS开发登录页面主要涉及UI组件和事件处理。首先，使用@Component装饰器定义页面组件，然后通过@State管理输入框的状态。例如：

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

  build() {
    Column() {
      TextInput({ placeholder: '用户名', text: this.username })
        .onChange((value) => {
          this.username = value;
        });
      TextInput({ placeholder: '密码', text: this.password, type: InputType.Password })
        .onChange((value) => {
          this.password = value;
        });
      Button('登录')
        .onClick(() => {
          // 处理登录逻辑
        });
    }
  }
}

此代码创建了一个简单的登录页面，包含用户名和密码输入框以及登录按钮。通过@State管理输入框的值，并在按钮点击时处理登录逻辑。

回到顶部