首页
万码云课
码上记
小码问答
万码学堂
万码IT教育
TA们在万码
作品墙
大话编程
走向职场
开班信息
搜索
注册/登录
对不起，您还没有登录。视频仅向登录用户开放。
ArkUI开发从入门到实战[Flex弹性布局实战-响应式商品卡片（图片+文字描述+价格排版）]
课程介绍
课程目录
1
声明式UI入门与组件树结构
1、ArkUI开发范式对比
09:16
2、声明式 vs 类Web范式核心差异（代码结构、数据绑定方式）
07:48
3、工程目录解析（entry/src/main/ets与资源文件管理）
07:51
4、组件树结构实战
04:11
5、Column/Row主轴与交叉轴对齐（justifyContent与alignItems属性）
10:45
6、Stack层叠布局应用（图标叠加、悬浮按钮实现）
04:28
2
基础组件开发与应用
1、Text：字体样式、多行省略与富文本渲染
03:28
2、Button：事件绑定（点击/长按）与自定义形状
08:59
3、Image：本地/网络资源加载与缩放模式
06:08
4、Input：表单输入校验与键盘类型控制
08:46
5、组件交互案例
05:23
6、登录表单开发（Input+Button联动验证）
05:37
3
Flex弹性布局实战
1、Flex布局原理
08:37
2、主轴方向与换行策略（FlexDirection与Wrap）
06:12
3、子元素伸缩比例（flexGrow/flexShrink）
10:10
4、电商商品列表案例
03:52
5、响应式商品卡片（图片+文字描述+价格排版）
10:33
6、动态添加/删除商品项（数据驱动UI更新）
04:25
4
Grid网格布局实战
1、Grid布局配置
03:49
2、行列数量定义（columnsTemplate与rowsTemplate）
10:52
3、单元格合并与间距控制（columnStart/span）
06:10
4、九宫格相册案例
11:35
5、图片自适应排列（aspectRatio属性）
11:03
6、点击放大动画（过渡效果与缩放事件）
08:49
5
数据绑定与状态管理
1、状态管理机制
07:38
2、@State局部状态（计数器数值存储）
08:25
3、@Prop与@Link父子组件通信差异（单向/双向绑定）
07:28
4、动态刷新实战
08:47
5、计数器功能开发（按钮点击事件与状态联动）
09:51
6、购物车数量同步（跨组件状态传递）
11:11
牛叔叔
好好学习
我要评论
发布评论
视频评论
声明式UI入门与组件树结构