在上一篇文章中我们探讨了鸿蒙的基础组件、状态管理和资源管理。今天我们来深入项目的实际开发场景聊聊一多开发一次开发多端部署、ArkTS/ArkUI 的核心概念以及面试中高频出现的布局与状态问题。8. 你项目中的一多开发是如何实现的核心思路自适应布局 断点系统 多态组件在实战中“一多开发”并不是为每种设备单独写一套代码而是通过自适应布局来响应当前设备的屏幕尺寸和方向。布局适配优先使用Flex、Column、Row、Stack等弹性布局配合layoutWeight分配空间避免写死宽高。媒体查询MediaQuery针对大屏如平板折叠屏和小屏手机展示不同布局。例如手机端单列展示平板端双列展示。栅格系统GridRow/GridCol常用于表单、列表页通过断点xs, sm, md, lg控制每行的列数。多态组件使用MediaQuery装饰器或useBreakpointAPI 获取当前屏幕宽度动态改变组件排列方式。9. 什么是 ArkTS什么是 ArkUI这是两个不同层面的概念ArkTS定义是鸿蒙生态的应用开发语言。本质它是TypeScriptTS的超集。在 TS 的基础上扩展了静态类型检查、声明式 UI 语法、状态管理等能力。作用负责处理业务逻辑、数据处理和算法。ArkUI定义是鸿蒙的声明式 UI 框架。本质一套用于构建用户界面的框架体系。作用负责将数据和状态渲染成界面。一句话总结ArkTS 是“大脑”逻辑语言ArkUI 是“画笔”UI 框架。10. 请说下你使用过鸿蒙中哪些装饰器并说明这些装饰器的作用在 ArkTS 中装饰器Decorator是连接数据与 UI 的桥梁。常见的可分为以下几类状态管理类State组件内部状态。当其修饰的变量变化时当前组件 UI 刷新。Prop父子单向通信。父组件传值给子组件子组件不可反向修改。Link父子双向通信。父子组件共享同一份数据引用一方改两边都变。ObjectLink/Observed嵌套对象的状态同步。应用级状态类StorageLink/StorageProp与 AppStorage 联动实现全局状态管理。组件复用类Component标记这是一个自定义组件。Builder定义可复用的 UI 结构片段类似局部模板。Entry标记页面的入口组件。11. 什么场景你项目中哪里使用 Flex 布局使用 Flex 布局会存在什么问题使用场景导航栏/标签栏横向排列的 Tab 或底部菜单。列表项左侧图标 右侧文字的列表排版。表单区域一行内放置多个输入框或标签。流式布局元素需要自动换行的情况。存在的问题权重分配陷阱过度依赖layoutWeight有时会导致父容器尺寸计算延迟引起闪烁。默认对齐方式Flex 默认不换行且靠主轴起点对齐如果不显式设置flexWrap: FlexWrap.Wrap在小屏设备上容易出现内容溢出。高度塌陷如果主轴是水平方向direction: FlexDirection.Row且子元素没有明确高度交叉轴高度可能会压缩。12. 什么场景你项目中哪里使用 Stack 布局Stack层叠布局用于将组件按照层级堆叠在一起。典型场景绝对定位覆盖比如图片上叠加文字商品封面图 标题。悬浮按钮FAB在页面右下角固定一个按钮覆盖在列表之上。遮罩层Overlay弹窗背景半透明遮罩上层显示弹窗内容。引导页指示点底部的小圆点指示当前在第几页。13. 定位有哪些区别是啥什么场景下使用定位在 ArkUI 声明式开发中定位不完全等同于 CSS 的position枚举更准确的说法是组件相对于父容器/兄弟组件的摆放方式。常用的有四种思路①.offset({x, y})—— 相对偏移Text(原位置) .width(100).height(40) .backgroundColor(#90CAF9) Text(offset 偏移) .width(100).height(40) .offset({ x: 120, y: 60 }) // 在原位置基础上向右120、向下60特点在原文档流位置基础上做偏移原位置仍保留占位不会影响兄弟组件的布局测算。场景微调按钮上的红点、Tooltip 气泡、图标旁的小标签——我想让它挪一下但别打乱别人。②.position({x, y})—— 绝对定位Stack() { Image($r(app.media.bg)) Text(99) .position({ x: 32, y: 4 }) // 以父容器(Stack)左上角为原点 .backgroundColor(Color.Red) }特点以父组件内容区左上角为坐标原点放置子组件脱离文档流父容器如果是Row/Column/Flex设了.position()的子组件不参与父容器的排版测算不占位。场景铃铛右上角的红点徽标、图片上叠加文字、悬浮按钮、遮罩层内的弹窗主体。 搭配.markAnchor({x, y})可以改变自身哪个点去对齐那个坐标——比如想让红点的右上角贴在铃铛右肩而不是默认的左上角。③RelativeContaineralignRules—— 约束定位RelativeContainer() { Text(A).id(a).alignRules({ top: { anchor: __container__, align: VerticalAlign.Top }, left: { anchor: __container__, align: HorizontalAlign.Start } }) Text(B).alignRules({ top: { anchor: a, align: VerticalAlign.Bottom }, left: { anchor: a, align: HorizontalAlign.Start } }) }特点通过idalignRules用锚点描述组件之间的相对关系不需要写死 x/y适配性远好于.position()。场景复杂表单、仪表盘、多个元素彼此有谁在谁上面/左边关系的界面。是鸿蒙官方推荐的精确关系布局方案比绝对定位更适合多尺寸设备。④StackAlignment—— 层叠定位Stack({ alignContent: Alignment.TopEnd }) { Image($r(app.media.banner)) Badge({ count: 3 }) // 自动贴右上角 }特点子组件按层堆叠通过Alignment或alignSelf决定每层在父容器里的位置。场景封面图标题、卡片角标、全屏遮罩居中弹窗。一张表理清区别方式是否脱流参考系多端适配友好度.offset()否原位置保留自身原位置⭐⭐⭐ 好.position()是不占位父容器内容区左上角⭐ 差写死坐标RelativeContainer否按约束算锚点组件 / 父容器⭐⭐⭐⭐ 最佳StackAlignment否层叠父容器九宫格方位⭐⭐⭐ 中等 面试踩坑点很多人把 ArkUI 的.position()直接等同于 CSS 的position: absolute但其实 ArkUI没有static/relative/absoulte/fixed这套枚举类 CSS 的position字符串写法只在方舟 UI 框架/元服务类场景出现声明式 ArkTS 主流是 API 这套。被问到鸿蒙的定位有几种时按「offset → position → RelativeContainer → Stack」四条答比套 CSS 那套更贴鸿蒙面试官的预期。14. layoutWeight 属性作用是什么什么时候使用作用layoutWeight用于在线性布局Column/Row/Flex中分配剩余空间。它决定了组件在主轴上占据的相对比例。在Column中控制高度占比。在Row中控制宽度占比。使用时机当容器有多余空间需要分配给子组件时。经典案例底部 Tab 栏平分宽度。给每个 Tab 按钮设置layoutWeight(1)它们就会自动等宽撑满底部。15. 如何让一个组件在页面中既水平又垂直居中显示这是面试必考题有三种常用方案方案一使用Flex布局推荐最灵活设置容器的主轴和交叉轴对齐方式均为居中。Column() { Text(居中内容) }.width(100%).height(100%).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)方案二使用Stack布局最直观利用层叠布局的特性将子组件堆叠在父容器的中心原点。Stack() { Text(居中内容) }.width(100%).height(100%).alignContent(Alignment.Center)方案三使用Blank组件巧妙解法利用空白填充物把组件“挤”到中间。Column() { Blank() // 自动填满上方空间 Text(居中内容) Blank() // 自动填满下方空间 }.width(100%).height(100%)16. let 和 const 和 State 的区别这三个概念分别处于语言基础层和框架状态层let(可变变量)ES6 语法。值可以改变但改变时不会触发 UI 刷新。仅用于存储纯逻辑计算的临时数据。const(常量)ES6 语法。一旦赋值不可更改试图修改会报错。同样不具备 UI 响应能力。State(状态装饰器)ArkTS 特有装饰器。本质上它也是一个变量但当它修饰的变量值发生改变时框架会自动检测变化并触发依赖它的 UI 重新渲染。总结let/const是纯粹的编程语言特性负责数据的存储State是框架提供的机制负责数据的响应式绑定。