鸿蒙星河版笔记来袭！京东、美团等综合案例

鸿蒙星河版学习：

• 鸿蒙星河版笔记来袭！开发环境准备到基础函数的学习
• 鸿蒙星河版笔记来袭！对象、联合类型、枚举类型学
• 鸿蒙星河版笔记来袭！界面开发、组件的属性和方法
• 鸿蒙星河版笔记来袭！布局元素、边框、圆角等附案例

一、综合案例—京东登录

模块拆分：

• 布局容器+顶部+Logo
• 输入框和登录区域
• 底部模块区域

思路分析：

• 1.布局容器：整体从上往下-Column
• 2.布局背景：backgroundImage
• 3.顶部：左右布局-Row、SpaceBetween
• 4.Logo：Image 图片

继续拆分：

• 1. 国家地址：点按区域 （Row → Text、Text、Image）
• 2. 手机号：输入框 TextInput
• 3. 同意许可：复选框 Checkbox，文本 Text → Span
• 4. 登录按钮、用户注册

分析思路：

• 1.整体Column列
• 2.标题：Text
• 3.三方登录图标：Row→Image、SpaceAround
• 4.底部局底：Blank()填充组件

二、弹性布局（Flex）

wrap 属性：Flex 是单行布局还是多行布局

• 1. FlexWrap.NoWrap 单行布局
• 2. FlexWrap.Wrap 多行布局

Flex({ 
 wrap: FlexWrap.Wrap
})

三、绝对定位

作用：控制组件位置，可以实现层叠效果

特点：

• 参照父组件左上角进行偏移
• 绝对定位后得组件不再占用自身原有位置

语法：.position（位置对象）

参数：{ x: 水平偏移量, y: 垂直偏移量 }

Text('文字内容')
  .position({
    x: 0,
    y: 0
})

zIndex 层级

作用：调整组件层级

语法：.zIndex(数字)

参数：取值为整数数字，取值越大，显示层级越高

案例 卡片《人气热播故事》

思路分析：

1. 整体：从上往下布局 Column

2. 局部：先图片、再Row（图 + 文本）

3. 细节：VIP（定位、圆角）

Text内文本对齐方式：

.textAlign(TextAlign.Center)

四、叠层布局

层叠布局具有较强的组件层叠能力。场景：卡片层叠效果等

特点：层叠操作更简洁，编码效率高。（绝对定位的优势是更灵活）

Stack 容器内的⼦元素的顺序为 Item1 -> Item2 -> Item3

语法：

语法：

Stack({
  alignContent: Alignment.Center
}) {
  Item1()
  Item2()
  Item3()
}

特点：层叠操作更简洁，编码效率高。（绝对定位得优势是更灵活）

综合案例-B站-视频卡片

思路分析：

1. 整体：Column纵向布局

2. 区域划分：
① 上面图片区域（层叠布局）
图片组件 + 文本修饰（播放、评论、时长）

② 下面文字区域（上下结构）
标题文字 + 点赞说明 (点赞量、更多）

.textOverflow({
 overflow: TextOverflow.Ellipsis
})
.maxLines(2)

界面开发实战 – 支付宝

整体结构：层叠布局 Stack （底部导航 + 主体）

模块拆分：

一、层叠架子 + 底部导航 Tab

二、主体部分：
1. 头部搜索区域 Head
2. 主体页面内容
① 顶部快捷按钮 Top
② 导航区域 Nav
③ 商品区域 Pro

层叠架子 + 底部导航 Tab思路分析：

• 层叠架子：Stack布局
• 底部导航：Row包5个Column（图+文）

主体部分架子思路分析：

• 1. Head头部，搜索框
• 2. 主体页面内容 （可滚动

头部搜索区域 Head思路分析

1. 整体：左中右，三部分结构 Row
2. 左：上下结构 + 定位
3. 中：左中右结构 Row
4. 右： 图标

顶部快捷按钮思路分析：

• 1. 整体：横向四个列，Row
• 2. 每列：上下布局，上图下文

导航模块思路分析：

• 1.整体一个列、里面三行
• 2.每行5列
• 3.每列：图+文