【HarmonyOS NEXT星河版开发学习】综合测试案例a-京东登录页面

@VON

发布于 2025-12-21 09:24:59

1160

基础语法部分会发布于github 和 gitee上面（暂未发布）

前言

该案例有一些难度，将前面所学到的全部知识点做了一个全面的总结，代码量也不是很少。里面的一些细节一定要仔细的去观察，仔细地去分析。遇到忘记的知识点可以去看一下前面总结的一些知识点。

案例分析

开发技巧：

1.先完成大框架 2.再往下拆分模块逐一进行实现

知识点概述：

1.复选框Checkbox

在鸿蒙（HarmonyOS）开发中，复选框（Checkbox）是一种常见的用户界面元素，用于允许用户选择一个或多个选项。
鸿蒙提供了丰富的属性和方法，如设置复选框的初始选中状态、修改复选框的文本、设置复选框的样式（如颜色、大小等），以满足不同的设计和功能需求。

2.一段文本多个样式：Text和Span

在鸿蒙（HarmonyOS）开发中，处理文本（Text）和富文本（Span）的操作是常见的需求，特别是在显示复杂的文本内容或需要样式化文本时。
在鸿蒙中，使用 Span 可以实现富文本效果，如不同的字体颜色、样式、点击事件等。通常使用 Spannable 类来处理富文本操作。
使用 Text 和 Span 可以在鸿蒙应用中实现灵活的文本显示和富文本效果。通过组合不同的 Span 类型，你可以实现丰富的样式和交互效果，从而提升用户界面的交互体验和可读性。

3.Row或Column空白区域填充：Blank

鸿蒙（HarmonyOS）开发中处理空白页面（Blank Page），那么通常情况下，空白页面是指在应用程序中没有内容或者需要展示默认状态的页面。使用Blank可以很好的增加页面的美观性。

页面效果展示

代码展示

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 顶部区域
      Row(){
        Image($r('app.media.jd_public_cancel'))
          .width(20)
        Text('帮助')
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)

      // logo图标
      Image($r('app.media.jd_logo_02'))
        .width(250)
        .height(250)

      // 国家地址
      Row(){
        Text('国家/地址')
          .layoutWeight(1)
          .fontColor('#666')
        Text('中国(+86)')
          .fontColor('#666')
        Image($r('app.media.jd_public_arrow_right'))
          .width(20)
          .fillColor('#666')
          .margin({right:5})
      }
      .width('100%')
      .height(40)
      .backgroundColor('#fff')
      .borderRadius(20)
      .padding({left:15,right:10})
      .margin({bottom:20})

      // 手机号
      TextInput({
        placeholder:'请输入手机号'
      })
        .placeholderColor('#666')
        .height(40)
        .borderRadius(20)
        .backgroundColor('#fff')
        .margin({bottom:20})

      // 已阅读并同意
      Row(){
        Checkbox()
          .width(10)
          .margin({top:7})
        Text(){
          Span('我已阅读并同意')
          Span('《京东隐私政策》').fontColor('#3274f6')
          Span('《京东用户服务协议》').fontColor('#3274f6')
          Span('未注册的手机号将自动创建京东账号')
        }
        .fontSize(12)
        .fontColor('#666')
        .lineHeight(20)
      }
      .alignItems(VerticalAlign.Top)

      // 登录
      Button('登录')
        .width('100%')
        .backgroundColor('#bf2838')
        .margin({top:25,bottom:15})

      // 新用户注册
      Row({space:25}){
        Text('新用户注册').fontSize(14).fontColor('#666')
        Text('账户密码登录').fontSize(14).fontColor('#666')
        Text('无法登录').fontSize(14).fontColor('#666')
      }

      // 填充组件
      // 作用：填充空白区域（像弹簧）
      Blank()

      // 底部其他登录方式
      Column(){
        Text('其他登录方式')
          .height(22)
          .fontSize(14)
          .margin({bottom:28})
          .fontColor('#666')
        Row(){
          Image($r('app.media.jd_wechat')).width(34)
          Image($r('app.media.jd_qq')).width(34)
          Image($r('app.media.jd_web')).width(34)
          Image($r('app.media.jd_huawei')).width(34)
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceAround)
        .margin({bottom:30})
      }
      .width('100%')
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .backgroundColor('#fff')
    .backgroundImage($r('app.media.jd_back_img'))
    .backgroundImageSize(ImageSize.Cover)
  }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-10-27，如有侵权请联系 cloudcommunity@tencent.com 删除

width