鸿蒙星河版学习:
一、综合案例—京东登录
模块拆分:
- 布局容器+顶部+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.每列:图+文