HarmonyOS Next应用开发实战——登录页面实现（part1）

用户545748341772025-03-31 18:16

HarmonyOS Next应用开发实战------登录页面实现

文章概要

本文聚焦于HarmonyOS Next应用开发中登录页面的实现。详细介绍了登录页面的布局、输入框交互效果、登录方式切换以及协议勾选等功能，同时阐述了如何根据用户操作实现页面的动态变化和导航跳转。

核心功能介绍

1. 页面布局与响应式设计

使用GridRow和GridCol进行布局，结合CommonConstants中定义的断点和列数实现响应式设计。

typescript 复制代码

NavDestination(){
  GridRow({
    breakpoints: { value: CommonConstants.BREAK_POINTS_VALUE, reference: BreakpointsReference.WindowSize },
    columns: { sm: CommonConstants.COLUMN_SM, md: CommonConstants.COLUMN_MD, lg: CommonConstants.COLUMN_LG },
    direction: GridRowDirection.Row
  }) {
    // ...
  }
  .onBreakpointChange((breakpoints: string) => {
    this.breakPoint = breakpoints;
  })
}

2. 输入框交互效果

输入框具有动画效果，当输入框获得或失去焦点且内容为空时，标签文本会有大小和位置的变化。

typescript 复制代码

TextInput({ text: this.phone })
  .onFocus(() => {
    if (this.phone === '') {
      animateTo({ duration: 100 }, () => {
        this.isAnimatedPhoNum = !this.isAnimatedPhoNum
      })
    }
  })
  .onBlur(() => {
    if (this.phone === '') {
      animateTo({ duration: 100 }, () => {
        this.isAnimatedPhoNum = !this.isAnimatedPhoNum
      })
    }
  })
```### HarmonyOS Next应用开发实战------登录页面实现

#### 文章概要
本文聚焦于HarmonyOS Next应用开发中登录页面的实现。详细介绍了登录页面的布局、输入框交互效果、登录方式切换以及协议勾选等功能，同时阐述了如何根据用户操作实现页面的动态变化和导航跳转。

#### 核心功能介绍

##### 1. 页面布局与响应式设计
使用`GridRow`和`GridCol`进行布局，结合`CommonConstants`中定义的断点和列数实现响应式设计。
```typescript
NavDestination(){
  GridRow({
    breakpoints: { value: CommonConstants.BREAK_POINTS_VALUE, reference: BreakpointsReference.WindowSize },
    columns: { sm: CommonConstants.COLUMN_SM, md: CommonConstants.COLUMN_MD, lg: CommonConstants.COLUMN_LG },
    direction: GridRowDirection.Row
  }) {
    // ...
  }
  .onBreakpointChange((breakpoints: string) => {
    this.breakPoint = breakpoints;
  })
}

2. 输入框交互效果

输入框具有动画效果，当输入框获得或失去焦点且内容为空时，标签文本会有大小和位置的变化。

typescript 复制代码

TextInput({ text: this.phone })
  .onFocus(() => {
    if (this.phone === '') {
      animateTo({ duration: 100 }, () => {
        this.isAnimatedPhoNum = !this.isAnimatedPhoNum
      })
    }
  })
  .onBlur(() => {
    if (this.phone === '') {
      animateTo({ duration: 100 }, () => {
        this.isAnimatedPhoNum = !this.isAnimatedPhoNum
      })
    }
  })