《移动应用开发技术与实战（ArkTS）》课件 项目5-样式复用和UI结构复用

05样式复用和UI结构复用01样式复用UI结构复用项目实训样式复用5.1样式复用--概述

核心价值：

保障视觉一致性、提升维护效率、减少冗余代码。三级体系结构：组件级样式(@Extend)：强类型约束，针对特定组件（如Button）。页面级样式(@Styles)：作用域限定在单个文件内。全局级样式(@Stylesinglobal.ets)：维护全应用设计规范（品牌色、字体等）UI结构复用项目实训样式复用5.1样式复用--概述01行内样式>页面级样式>全局级样式>组件级样式优先级顺序（由高到低）：02同级样式冲突时，后声明的样式覆盖先声明的（后来居上）合并策略03不支持跨组件类型继承（Text样式不能用于Button）重要限制UI结构复用项目实训样式复用5.1样式复用--@Extend装饰器类型绑定：@Extend(Button)只能用于Button。静态扩展：

不支持动态参数（编译时确定）。链式组合：

支持链式调用，建议不超过3层。核

心特

性

组件级样式复用，强类型绑定。合并策略

无法跨组件复用，不支持运行时动态响应（需结合状态管理）。局限性：UI结构复用项目实训样式复用5.1样式复用--@Styles装饰器01定义：

封装通用样式属性集合，不关心组件类型。02与@Extend的区别：@Extend绑定具体组件类型；@Styles作用于任意组件。03高级用法：条件样式：结合stateStyles实现交互反馈（如激活/非激活状态）样式组合：函数式编程模块化（基础样式+扩展样式）。02UI结构复用样式复用项目实训UI结构复用5.2UI结构复用-层级模型01原子组件:基础元素（Icon,Text），通过样式复用。02分子组件:原子组合（如图标按钮），使用@Builder构建。03有机体组件:包含业务逻辑（如登录表单），封装为独立组件。样式复用项目实训UI结构复用5.2UI结构复用-@Builder装饰器功能：

解决重复布局模式的代码冗余。参数传递规范：基础类型:直接传递（string,number）复杂数据:封装为对象（Interface）交互行为:通过函数回调（onClick）执行流程：

编译阶段->渲染阶段->运行时

（响应式重建）样式复用项目实训UI结构复用5.2UI结构复用-@BuilderParam装饰器性能陷阱高阶组件(HOC)：

创建可复用容器（如带加载状态的包装器）。模板方法模式：

基类定义骨架，子类实现细节（如BaseForm）。避免巨型Builder（>200行）。循环渲染需添加唯一Key。应用模式定义：函数式UI插槽机制，实现动态UI注入。03项目实训样式复用UI结构复用项目实训1项目实训1项目实训1使用@Styles定义全局卡片基础样式

使用@Extend创建三种商品卡片样式变体

3．实现商品状态动态样式切换任务要求为电商应用开发一套统一风格的商品卡片，支持不同商品类型，如普通商品、促销商品、缺货商品的样式适配。样式复用UI结构复用项目实训1项目实训1项目实训11.建模型与枚举：在models/Goods.ets中定义商品状态枚举GoodsStatus（普通、促销、缺货）和商品数据接口GoodsItem（包含id、名称、现价、原价、折扣、状态等字段），并提供工厂方法。2.数据管理初始化：通过DataManager工具类初始化并管理模拟商品数据，在列表页GoodsListPage的aboutToAppear中调用DataManager.initData()加载数据，并支持按状态筛选商品列表。任务步骤：样式复用UI结构复用项目实训1项目实训1项目实训13.样式复用与列表渲染：样式复用：使用@Styles定义全局卡片基础样式cardBaseStyle；使用@Extend(Column)分别创建普通（normalCardStyle）、促销（promotionCardStyle，浅红底色与边框）、缺货（outOfStockCardStyle，降低透明度）三种卡片变体样式。UI结构复用：使用@BuilderbuildGoodsCard抽离卡片内部UI结构，包含图片、名称、描述、评分销量及价格行。任务步骤：样式复用UI结构复用项目实训1项目实训1项目实训14.跳详情传参：点击商品卡片时，调用router.pushUrl跳转到GoodsDetailPage，并在params中传递当前商品的goodsId（而非整个对象）。5.收参数与加载详情：在详情页的aboutToAppear生命周期中，通过router.getParams()接收goodsId参数，并调用DataManager.getGoodsById()查询并加载完整的商品详情数据。任务步骤：样式复用UI结构复用项目实训1项目实训1项目实训16.展详情与状态交互：

渲染商品大图、名称、评分、销量及详细描述。根据GoodsStatus动态展示促销标签与划线原价，或缺货遮罩及置灰按钮。同时实现收藏状态切换和加入购物车功能，并通过EventEmitter监听数据更新，实时刷新购物车角标数量。任务步骤：样式复用UI结构复用项目实训1项目实训2项目实训2

使用@Builder创建评论组件

2．实现嵌套评论结构3．支持点赞和回复功能回调任务要求为社交应用开发可复用的评论组件，支持主评论和子评论两种结构。样式复用UI结构复用项目实训1项目实训2项目实训21.建模型与枚举：在models/Comment.ets中定义帖子数据接口PostItem和评论数据接口CommentItem。关键是在CommentItem中包含replies:CommentItem[]数组属性，以此作为实现嵌套评论结构的数据基础。2.列表展示与数据加载：在PostPage帖子列表页中，通过SocialDataManager初始化并加载帖子数据，使用ForEach渲染帖子列表，展示用户头像、名称、内容、点赞数及评论数。任务步骤：样式复用UI结构复用项目实训1项目实训2项目实训23.跳详情传参：点击帖子卡片或评论图标时，调用router.pushUrl跳转至CommentDetailPage评论详情页，并在params中传递当前帖子的postId（而非整个对象）。4.加载详情与评论：在评论详情页的aboutToAppear生命周期中，通过router.getParams()接收postId，并调用SocialDataManager的getPostById和getComments方法，分别获取原帖详情和对应的评论列表数据。任务步骤：样式复用UI结构复用项目实训1项目实训2项目实训25.渲染嵌套评论：在详情页中使用ForEach渲染主评论（包含头像、内容、点赞状态isLiked等）；在主评论结构内部，通过判断comment.replies.length>0，嵌套使用第二个ForEach循环渲染replies数组，实现主评论与子评