一、详细知识点1. 声明式 UIArkUI 的核心思想是“状态描述界面”。开发者声明当前状态下界面应该是什么样状态变化后框架更新界面。StateselectedTab:number0当selectedTab改变时依赖它的 UI 会重新计算。2. 基础组件组件作用demo 场景Text标题、摘要、正文新闻标题和内容Button用户命令刷新、收藏、返回List/ListItem长列表首页新闻列表Column/Row基础布局页面主体、卡片按钮区Blank弹性占位顶部栏左右分布Toggle/Slider设置项深色模式、字体大小3. 状态装饰器装饰器场景边界State当前组件内部可变状态不适合跨页面共享大状态Prop父传子展示数据子组件不应修改Link父子双向绑定谨慎使用避免状态流混乱Builder复用局部 UI 结构不要写复杂业务逻辑4. 列表性能列表是移动应用高频性能点。卡片组件要稳定避免每个 item 做大量同步计算。数据更新时优先生成新数组便于框架识别变化。5. 多端适配设备UI 策略交互策略手机单列、底部区域易点击单手操作平板列表 详情分栏鼠标、键盘、触控都可用折叠屏根据窗口宽度切换布局展开不中断状态车机大字号、高对比、少输入降低驾驶干扰穿戴卡片化、短信息极简操作二、本章 demoDemo 1新闻卡片组件components/NewsCard.etsComponentexportstruct NewsCard{article:NewsArticleonOpen:(id:string)void(){}onFavorite:(id:string)void(){}build(){Column(){Text(this.article.title).fontSize(20).fontWeight(FontWeight.Bold)Text(this.article.summary).fontSize(14).opacity(0.72)Row(){Button(查看).onClick(()this.onOpen(this.article.id))Button(this.article.favorite?取消收藏:收藏).onClick(()this.onFavorite(this.article.id))}}}}Demo 2设置页状态pages/SettingsPage.etsToggle({type:ToggleType.Switch,isOn:this.setting.darkMode}).onChange((isOn:boolean){this.onDarkModeChange(isOn)})Demo 3浏览器版验证运行demo/web-preview后在设置页切换深色模式和字体大小检查列表和详情的视觉变化。三、面试题与详细答案1. ArkUI 的声明式 UI 和传统命令式 UI 有什么区别命令式 UI 是找到控件后手动修改例如设置某个 Text 的内容声明式 UI 是状态改变后重新描述 UI。ArkUI 中State变化会驱动界面更新开发者关注状态和 UI 的映射关系。2.State适合保存哪些数据适合保存当前组件内部使用、会影响 UI 的数据如加载状态、当前 tab、输入框内容、列表数据。跨页面长期共享的数据不应散落在多个State中应该抽到 Store 或 Service。3. 长列表为什么容易卡顿长列表 item 多任何复杂布局、同步计算、图片解码、频繁状态变更都会放大成本。优化方向包括拆分稳定组件、减少不必要重绘、控制图片尺寸、分页加载和缓存。4. 如何做手机和平板适配不要只按屏幕像素写死布局。手机优先单列平板可以分栏文本和卡片高度要能随字体变化触控区域要足够大横屏时要检查内容是否过宽或过挤。四、五倍扩展知识点矩阵1. ArkUI 组件能力地图分类常见组件解决问题质量关注点文本Text标题、摘要、正文字体缩放、截断、无障碍操作Button用户命令防重复点击、状态反馈容器Column、Row基础布局自适应、间距一致层叠Stack浮层、角标遮挡和点击区域列表List、ListItem长数据性能、复用、分页表单TextInput、Toggle、Slider输入和设置校验、回显、保存媒体Image图标、封面尺寸、缓存、占位导航Navigation或页面状态多页面参数、返回栈、恢复反馈加载、空状态、错误提示状态表达可恢复和可解释主题颜色、字体、间距一致体验深色模式和品牌治理2. 状态来源拆解状态示例生命周期应放位置页面临时状态当前 tab、loading页面存在期间State组件展示数据卡片标题、摘要父组件传入Prop或普通入参表单双向编辑开关、输入框编辑期间Link或回调业务共享状态收藏、登录用户跨页面Store/Service持久化状态主题、字号重启后保留Preferences/Store远程状态新闻列表随接口变化Repository派生状态收藏数量由基础状态计算函数或 getter错误状态加载失败一次请求期间Page空状态无收藏数据结果Page Component权限状态已授权/拒绝系统决定PermissionService3. 布局原则不要用固定高度硬压内容。鸿蒙应用要面对字体缩放、横竖屏、平板、折叠屏和多语言。布局应该优先使用内容自适应、百分比宽度、合理间距和可滚动区域。Column(){Text(this.article.title).fontSize(20*this.fontScale).fontWeight(FontWeight.Bold)Text(this.article.summary).fontSize(14*this.fontScale).opacity(0.72)}.width(100%).padding(16)4. 组件拆分标准问题如果答案是“是”处理这块 UI 会重复出现吗是拆组件这块 UI 有独立输入输出吗是拆组件父页面已经超过可读范围吗是拆组件组件需要知道网络吗否只传数据和回调组件需要知道路由吗通常否由页面处理跳转5. 多端适配决策手机平板折叠展开获取窗口宽度宽度是否足够单列列表列表 详情分栏保持状态并切换布局底部或顶部操作左列表右详情避免重置 selectedId五、ArkUI demo 扩展任务任务操作验证增加搜索框首页顶部加输入输入关键字过滤列表增加分类 tabStage/ArkUI/Release点击分类更新列表增加空状态组件搜索无结果显示可恢复提示增加加载骨架模拟请求延迟首屏不突兀增加错误重试Service 抛错页面出现重试按钮增加分栏布局平板宽屏左列表右详情增加字体缩放设置页 slider页面文字同步变化增加深色模式设置页 switch背景和文字变化增加收藏角标卡片上显示收藏状态明显增加按钮禁用loading 时禁用刷新防重复点击增加列表滚动保持返回首页位置不突兀增加详情字号详情正文适配不截断扩展示例空状态组件设计Componentexportstruct EmptyView{message:stringactionText:stringonAction:()void(){}build(){Column(){Text(this.message)if(this.actionText.length0){Button(this.actionText).onClick(()this.onAction())}}}}空状态不是“没有内容就空白”而是告诉用户发生了什么、是否可以恢复、下一步怎么做。六、视觉和交互质量清单检查项标准字体标题、正文、辅助信息层级清楚间距页面、卡片、按钮间距一致对比度深浅模式都能读清点击区域按钮不贴边、不太小滚动长内容可滚动不遮挡状态反馈点击、加载、失败都有反馈空状态用户知道下一步横屏内容不挤压平板不浪费大屏字号放大不溢出、不重叠七、扩展面试题5. 如何设计一个可复用 ArkUI 组件可复用组件要有明确输入、明确输出和低业务耦合。输入通过属性传入输出通过回调传出。组件不应直接请求网络、不应直接操作全局路由也不应知道父页面完整业务流程。6. 为什么列表 item 不应写太复杂列表 item 会大量重复复杂布局和同步计算会被放大导致滚动卡顿。应把复杂计算提前到数据层item 只做展示图片要限制尺寸并考虑缓存状态变化要尽量局部化。7. 深色模式为什么不能只改背景色深色模式涉及背景、文字、边框、阴影、图标、状态色和图片适配。如果只改背景文字可能对比不足卡片阴影可能不自然图标可能不可见。颜色应集中管理。8. 如何处理字体放大带来的布局问题避免固定高度允许文本换行重要容器可滚动按钮文案不要过长。测试时要把字体调到较大值看标题、卡片、详情和设置项是否溢出或遮挡。9.Link为什么要谨慎使用Link会形成双向绑定简单表单很方便但复杂业务中过多双向绑定会让状态变化来源不清。跨页面或业务状态更适合事件回调和 Store 管理。10. 如何判断一个页面达到可上线 UI 质量核心路径可用加载、失败、空状态完整不同设备和字号下不溢出交互有反馈状态变化可预测视觉层级清晰组件可复用无明显卡顿和遮挡。八、ArkUI 知识点详解库1. UI 质量首先是状态质量页面不好维护根源通常不是组件太多而是状态混乱。一个页面要明确数据状态、加载状态、错误状态、空状态、选择状态和编辑状态。状态清楚UI 才稳定。2. 组件职责要小而完整NewsCard只负责展示一篇文章和暴露点击事件不负责查询文章、不负责导航、不负责保存收藏。职责越清楚组件越可复用。3. 列表要按数据量设计4 条数据和 4000 条数据的写法不能完全一样。数据少可以简单渲染数据多要考虑分页、懒加载、缓存、图片尺寸和滚动性能。4. 布局要考虑文本增长中文、英文、多语言、字体放大都会让文本长度变化。固定高度和固定宽度容易溢出。可上线 UI 会为最长文案和最大字号留空间。5. 空状态是功能的一部分收藏为空、搜索无结果、网络失败、权限拒绝都不应该显示空白。空状态要解释原因并提供返回、重试或修改条件的入口。6. 加载状态要避免误操作加载时按钮是否禁用、是否允许再次刷新、是否保留旧数据都要按场景设计。无限转圈没有意义要有超时和失败状态。7. 深色模式要成体系深色模式不是反转颜色而是设计一套背景、文本、边框、状态、阴影和图标规则。局部硬编码颜色会破坏整体一致性。8. 无障碍不是后期补丁字体可放大、对比度足够、点击区域足够、信息不只靠颜色表达这些应从组件设计阶段考虑。9. 平板不是放大的手机平板有更多空间应考虑分栏、侧边栏、详情同屏、键盘鼠标操作。简单把手机页面拉宽会浪费空间。10. 视觉层级服务任务标题、摘要、按钮、辅助信息的视觉权重要反映用户任务。不要让所有文字一样大也不要让次要按钮比主要操作更抢眼。九、ArkUI 场景化实战库场景UI 目标状态目标验收首页首屏快速看到内容loading - data不白屏新闻详情阅读沉浸selectedId 有效返回正常收藏页展示筛选结果favorite 派生数量正确设置页即时反馈setting 更新主题变化搜索快速过滤keyword 状态无结果提示分类降低信息密度category 状态切换稳定弱网不阻塞用户error 状态可重试空收藏引导下一步empty 状态可返回首页字体放大可读性fontScale不溢出平板横屏利用空间layout 状态不拉伸快速点击防误操作disabled 状态不重复提交返回恢复保持上下文selected/scroll不重置体验十、扩展面试题库11. ArkUI 页面为什么要同时设计 loading、error、empty、data真实应用不会永远成功返回数据。loading 解决等待error 解决失败empty 解决成功但无数据data 解决正常展示。缺任何一个状态用户都会在某些场景下看到空白或错误体验。12. 如何避免组件过度封装组件抽象要基于复用和复杂度而不是为了文件数量。只用一次、逻辑很短、未来变化不确定的 UI 可以先留在页面中重复出现或职责清晰的 UI 再拆。13. 如何设计列表卡片的点击区域主要点击区域要清晰按钮之间要有足够间距卡片整体点击和局部按钮点击不要冲突。收藏按钮、查看按钮和卡片进入详情的行为要一致可预期。14. 为什么 UI 也需要验收清单UI 问题很多不是编译错误而是体验问题。验收清单能覆盖字号、横屏、深色模式、空状态、错误状态、按钮点击和列表滚动减少人工遗漏。15. 如何从 demo UI 演进到生产 UI先补齐状态再统一组件再抽主题变量再做多端适配再补无障碍和性能检查。不要一开始只追求视觉复杂度缺状态和边界的 UI 不能上线。十一、ArkUI 知识体系补全领域必会内容实战场景质量要求基础组件Text、Button、Image、Blank标题、操作、图标对齐、尺寸、可读容器布局Column、Row、Stack、Flex、Grid页面、卡片、面板自适应、不溢出列表List、ListItem、LazyForEach新闻流、设置项滚动稳定、分页表单TextInput、Toggle、Slider、Checkbox搜索、设置、筛选校验、回显、禁用导航Navigation、NavDestination、router首页、详情、设置参数安全、返回正确状态管理State、Prop、Link、Provide/Consume、Observed/ObjectLink父子通信、跨层级共享来源明确BuilderBuilder、局部 UI 复用空状态、标题栏、操作区不塞业务逻辑动画属性动画、显隐动画、转场收藏反馈、页面切换不影响性能手势click、swipe、drag、longPress卡片操作、滑动删除防误触绘制Canvas、Shape、Path图表、徽章、进度性能可控媒体Image、Video、Audio 相关能力封面、播放占位、错误、缓存主题颜色、字体、间距、深浅模式全局风格集中管理无障碍字号、对比、朗读、触控区域老年用户、弱视用户不只靠颜色表达多端phone/tablet/foldable分栏和响应式状态不中断十二、导航与页面栈设计简单项目可以用页面状态模拟但业务项目需要稳定的导航模型。导航设计要解决页面路径、参数传递、返回栈、深链、异常参数、状态恢复。interfaceDetailParams{articleId:stringfrom:home|favorites|search}functionvalidateDetailParams(params?:DetailParams):string|undefined{if(!params||params.articleId.length0){returnundefined}returnparams.articleId}导航规则列表到详情只传 id不传整个对象。参数缺失时显示空状态或返回安全页面。返回逻辑要考虑来源页。页面恢复后要能重新查数据。深链进入时要补齐上下文。十三、状态管理深入状态模式适合场景风险替代方案State组件内部状态跨页面复用困难StoreProp父到子展示子组件不能改父状态回调Link表单双向编辑状态来源不清明确事件Provide/Consume跨层级共享隐式依赖状态容器Observed/ObjectLink对象属性观察嵌套更新复杂不可变模型Store 单例小型共享状态生命周期不清Repository 持久化状态设计问题通常比组件 API 更重要。页面越复杂越要把状态拆成输入状态、远程数据状态、派生状态、提交状态、错误状态。十四、动画、手势与绘制能力用法注意属性动画收藏、展开收起、按钮反馈动画时长短避免拖慢操作页面转场详情打开、设置进入转场不要掩盖加载失败手势点击卡片、按钮防重复点击长按菜单、复制给明显反馈滑动删除、切换 tab防止和列表滚动冲突拖拽排序、调整保持状态一致Canvas图表、进度控制重绘频率Shape图标、标记优先复用组件十五、多端布局方案窄中宽窗口信息内容宽度单列列表 - 详情主列表 弹出详情左列表 右详情保留 selectedId返回栈管理验收标准手机上操作路径短按钮不贴边。平板上内容不被拉得过宽。横屏时卡片、详情、设置项不重叠。折叠屏展开时不丢失当前阅读文章。字体放大后仍然可读、可点击、可滚动。十六、UI 练习套件练习目标验收搜索页输入、过滤、空状态无结果有提示分类页tab 状态切换不丢收藏分栏详情平板布局左右联动动画收藏属性动画收藏反馈明显滑动操作手势不误触列表滚动深色主题主题变量所有页面可读大字号无障碍无重叠错误页失败可恢复有重试骨架屏首屏体验加载不突兀图片占位媒体失败不破坏布局十七、补充面试题16. Navigation 和页面状态切换有什么区别页面状态切换适合小 demo逻辑简单Navigation 或路由能力适合真实页面栈能处理返回、参数、深链和页面恢复。业务复杂后应使用稳定导航模型。17. 如何设计 ArkUI 主题系统主题系统要集中管理颜色、字体、间距、圆角、阴影和状态色。页面只引用语义变量例如 primary、surface、textPrimary而不是硬编码颜色值。18. 为什么动画也要纳入性能检查动画会影响渲染频率和用户操作响应。过长、过多或触发范围过大的动画会导致卡顿。动画应服务反馈和理解不应干扰任务完成。19. 如何处理多端状态保持布局切换时不要重建业务状态。把 selectedId、搜索词、收藏集合等放在页面或 Store 中布局只根据窗口宽度选择展示方式。20. UI 架构如何支持长期迭代建立组件库、主题系统、状态规范、导航规范和验收清单。每个页面按同一套模式处理加载、失败、空状态和数据展示长期迭代成本会明显下降。