个人主页→VON
收录专栏→鸿蒙开发小型案例总结
基础语法部分会发布于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)
}
}
