HarmonyOS Next应用开发实战——多功能页面组件构建（part1）

HarmonyOS Next应用开发实战------多功能页面组件构建

文章概要

本文聚焦于HarmonyOS Next应用开发中多功能页面组件的构建。详细介绍了一个具备多种功能模块的页面组件，包括背景图展示、预约试驾与订购按钮、美图鉴赏、了解更多信息、车型活动展示以及金融计算器展示等功能的实现方式。

核心功能介绍

1. 数据初始化

在组件即将显示时，进行数据的初始化操作，包括车型活动列表和"了解更多"信息列表的处理。

typescript 复制代码

aboutToAppear(){
  this.vehicleModelActivitiesList.pushArrayData(VehicleModelActivities.getMainList())
  let tempArr: LearnMoreModelInfo[] = []
  for(let i = 0; i < this.learnMoreList.length; i++){
    tempArr.push(this.learnMoreList[i]);
    if(i % 3 === 0){  // 三个一组
      this.modificationLearnMoreList.push(tempArr);
      tempArr = [];
    }
  }
}

2. 背景图与操作按钮布局

构建一个带有背景图的页面，并且在底部添加"预约试驾"和"立即订购"按钮。

typescript 复制代码

Stack({ alignContent: Alignment.Bottom }){
  Image($r(this.imgStr))
    .width(CommonConstants.COLUMN_WIDTH).height(CommonConstants.COLUMN_HEIGHT)
  Flex({ justifyContent : FlexAlign.SpaceAround }){
    Text('预约试驾').textStyle(Color.White)
    Blank()
    Text('立即订购').textStyle(Color.Black).backgroundColor(Color.White)
  }
  .padding({
    left: CommonConstants.PUBLIC_SPACE * 2,
    right: CommonConstants.PUBLIC_SPACE * 2,
    bottom: CommonConstants.PUBLIC_SPACE * 3
  })
  .width(CommonConstants.COLUMN_WIDTH)
}
.width(CommonConstants.COLUMN_WIDTH).height(CommonConstants.COLUMN_HEIGHT)
```##### 3. 登录方式切换
支持密码登录和验证码登录两种方式，用户可以通过点击相应文本进行切换。
```typescript
if (this.isPwdLgn) {
  Text('密码登录')
    .fontSize(CommonConstants.M_FONT_SIZE)
    .fontColor($r('app.color.main_color'))
    .margin({ top: '20vp' })
    .onClick(() => {
      this.isPwdLgn = !this.isPwdLgn;
      this.isCodeLgn = !this.isCodeLgn;
    })
} else {
  Text('验证码登录')
    .fontSize(CommonConstants.M_FONT_SIZE)
    .fontColor($r('app.color.main_color'))
    .margin({ top: '20vp' })
    .onClick(() => {
      this.isCodeLgn = !this.isCodeLgn;
      this.isPwdLgn = !this.isPwdLgn;
      promptAction.showToast({
        message: '手机号格式错误',
        duration: CommonConstants.ADVERTISING_INTERVAL_TIME,
      })
      return
    })
}

4. 协议勾选与登录验证

用户需要勾选《用户协议》和《隐私条款》才能进行登录操作，登录按钮的可用性根据输入内容进行判断。

typescript 复制代码

Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
  Checkbox({ name: 'isAgree' })
    .select($$this.isAgree)
    // ...
}

Button('密码登录', { type: ButtonType.Normal })
  .enabled(isLoginClickable(this.phone))
  .onClick(() => {
    if (this.isAgree) {
      this.isPwdIptShow = !this.isPwdIptShow;
    } else {
      promptAction.showToast({
        message: '请勾选同意《用户协议》和《隐私政策》',
        duration: CommonConstants.ADVERTISING_INTERVAL_TIME,
      })
      return
    }
  })

5. 登录跳转

当用户输入有效信息并点击登录按钮后，页面会跳转到指定页面。

typescript 复制代码

Button('登录', { type: ButtonType.Normal })
  .enabled(this.isCodeLgn ? (this.password.length > 5 ?? false)
    : this.password != '')
  .onClick(() => {
    this.pageInfos.replacePath({ name: 'TabPage' }, false);
  })

通过以上核心功能的实现，开发者可以在HarmonyOS Next应用中创建一个功能丰富、交互良好的登录页面。