HarmonyOS 6.1 实战：Stack 层叠布局与 Overlay 浮层详解

发布时间：2026/10/16 14:02:12

HarmonyOS 6.1 实战：Stack 层叠布局与 Overlay 浮层详解
前言在移动应用开发中层叠布局是实现复杂 UI 的核心能力——从头像角标到全屏蒙层从浮动按钮到图片水印都离不开精确的层叠控制。HarmonyOS ArkUI 提供了Stack组件与.overlay()修饰符来应对这类场景。本文通过完整可运行的代码逐一演示它们的核心用法。运行效果初始状态交互后切换对齐 z-index核心 API 概览API作用Stack({ alignContent })子组件全部叠放alignContent控制默认对齐点.zIndex(n)调整单个子组件的层叠顺序数值越大越靠前.overlay(builder, options)在组件上方浮置内容不占布局空间.offset({ x, y })相对自身默认位置平移常与 Stack 配合使用完整示例代码// Stack 层叠布局与 Overlay 浮层 Demo class AlignOption { label: string value: Alignment Alignment.Center } Entry Component struct Index { State alignIndex: number 4 // default Center State zToggle: boolean false State showOverlay: boolean true private alignOptions: AlignOption[] [ { label: TopStart, value: Alignment.TopStart }, { label: Top, value: Alignment.Top }, { label: TopEnd, value: Alignment.TopEnd }, { label: Start, value: Alignment.Start }, { label: Center, value: Alignment.Center }, { label: End, value: Alignment.End }, { label: BottomStart, value: Alignment.BottomStart }, { label: Bottom, value: Alignment.Bottom }, { label: BottomEnd, value: Alignment.BottomEnd }, ] // overlay 内容需要用 Builder 封装不能内联组件表达式 Builder overlayContent() { if (this.showOverlay) { Column() { Text( overlay 叠加层) .fontSize(18) .fontColor(#fff) .fontWeight(FontWeight.Bold) Text(半透明背景效果) .fontSize(12) .fontColor(rgba(255,255,255,0.8)) .margin({ top: 4 }) } .width(100%) .height(100%) .backgroundColor(rgba(0,0,0,0.45)) .justifyContent(FlexAlign.Center) .borderRadius(12) } } Builder overlayBadgeHot() { Text(HOT ) .fontSize(11) .fontColor(#fff) .backgroundColor(#ff3300) .borderRadius(4) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) } Builder overlayBadgeNew() { Text(NEW ✨) .fontSize(11) .fontColor(#fff) .backgroundColor(#0066ff) .borderRadius(4) .padding({ left: 6, right: 6, top: 2, bottom: 2 }) } build() { Stack({ alignContent: Alignment.BottomEnd }) { Scroll() { Column({ space: 0 }) { Text(Stack 层叠布局 Overlay) .fontSize(20) .fontWeight(FontWeight.Bold) .fontColor(#1a1a1a) .width(100%) .padding({ left: 16, right: 16, top: 20, bottom: 8 }) // ① alignContent 九宫格选择器 Text(① alignContent 九宫格对齐) .fontSize(15) .fontWeight(FontWeight.Bold) .fontColor(#333) .width(100%) .padding({ left: 16, top: 12, bottom: 6 }) Column({ space: 4 }) { Text(当前: this.alignOptions[this.alignIndex].label) .fontSize(13).fontColor(#0066ff).margin({ bottom: 8 }) Row({ space: 6 }) { Button(TL).fontSize(11).width(72).height(32) .backgroundColor(this.alignIndex 0 ? #0066ff : #e8e8e8) .fontColor(this.alignIndex 0 ? #fff : #333) .onClick(() { this.alignIndex 0 }) Button(Top).fontSize(11).width(72).height(32) .backgroundColor(this.alignIndex 1 ? #0066ff : #e8e8e8) .fontColor(this.alignIndex 1 ? #fff : #333) .onClick(() { this.alignIndex 1 }) Button(TR).fontSize(11).width(72).height(32) .backgroundColor(this.alignIndex 2 ? #0066ff : #e8e8e8) .fontColor(this.alignIndex 2 ? #fff : #333) .onClick(() { this.alignIndex 2 }) } Row({ space: 6 }) { Button(Start).fontSize(11).width(72).height(32) .backgroundColor(this.alignIndex 3 ? #0066ff : #e8e8e8) .fontColor(this.alignIndex 3 ? #fff : #333) .onClick(() { this.alignIndex 3 }) Button(Center).fontSize(11).width(72).height(32) .backgroundColor(this.alignIndex 4 ? #0066ff : #e8e8e8) .fontColor(this.alignIndex 4 ? #fff : #333) .onClick(() { this.alignIndex 4 }) Button(End).fontSize(11).width(72).height(32) .backgroundColor(this.alignIndex 5 ? #0066ff : #e8e8e8) .fontColor(this.alignIndex 5 ? #fff : #333) .onClick(() { this.alignIndex 5 }) } Row({ space: 6 }) { Button(BL).fontSize(11).width(72).height(32) .backgroundColor(this.alignIndex 6 ? #0066ff : #e8e8e8) .fontColor(this.alignIndex 6 ? #fff : #333) .onClick(() { this.alignIndex 6 }) Button(Bottom).fontSize(11).width(72).height(32) .backgroundColor(this.alignIndex 7 ? #0066ff : #e8e8e8) .fontColor(this.alignIndex 7 ? #fff : #333) .onClick(() { this.alignIndex 7 }) Button(BR).fontSize(11).width(72).height(32) .backgroundColor(this.alignIndex 8 ? #0066ff : #e8e8e8) .fontColor(this.alignIndex 8 ? #fff : #333) .onClick(() { this.alignIndex 8 }) } } .width(100%) .alignItems(HorizontalAlign.Center) .padding({ left: 16, right: 16 }) // Stack 预览 Stack({ alignContent: this.alignOptions[this.alignIndex].value }) { Column() .width(100%).height(180) .backgroundColor(#e8f0ff).borderRadius(12) Column() { Text(this.alignOptions[this.alignIndex].label) .fontSize(14).fontColor(#fff).fontWeight(FontWeight.Bold) } .width(100).height(44) .backgroundColor(#0066ff).borderRadius(8) .justifyContent(FlexAlign.Center) } .width(100%).height(180) .margin({ left: 16, right: 16, top: 12 }) .borderRadius(12).clip(true) // ② z-index 层级 Text(② z-index 层级控制) .fontSize(15).fontWeight(FontWeight.Bold).fontColor(#333) .width(100%).padding({ left: 16, top: 20, bottom: 6 }) Button(this.zToggle ? 恢复默认层级 : 切换 z-index) .fontSize(13).height(36).backgroundColor(#ff6600) .margin({ left: 16, bottom: 10 }) .onClick(() { this.zToggle !this.zToggle }) Stack() { Column() { Text(Box 1).fontSize(12).fontColor(#fff) Text(z (this.zToggle ? 3 : 1)).fontSize(11).fontColor(rgba(255,255,255,0.8)) } .width(140).height(100).backgroundColor(#ff4d4d) .borderRadius(8).justifyContent(FlexAlign.Center) .zIndex(this.zToggle ? 3 : 1).offset({ x: 0, y: 0 }) Column() { Text(Box 2).fontSize(12).fontColor(#fff) Text(z (this.zToggle ? 1 : 2)).fontSize(11).fontColor(rgba(255,255,255,0.8)) } .width(140).height(100).backgroundColor(#33aa66) .borderRadius(8).justifyContent(FlexAlign.Center) .zIndex(this.zToggle ? 1 : 2).offset({ x: 40, y: 20 }) Column() { Text(Box 3).fontSize(12).fontColor(#fff) Text(z (this.zToggle ? 2 : 3)).fontSize(11).fontColor(rgba(255,255,255,0.8)) } .width(140).height(100).backgroundColor(#0066ff) .borderRadius(8).justifyContent(FlexAlign.Center) .zIndex(this.zToggle ? 2 : 3).offset({ x: 80, y: 40 }) } .width(100%).height(160).padding({ left: 16 }) // ③ overlay 叠加层 Text(③ overlay 叠加层) .fontSize(15).fontWeight(FontWeight.Bold).fontColor(#333) .width(100%).padding({ left: 16, top: 20, bottom: 6 }) Button(this.showOverlay ? 隐藏 overlay : 显示 overlay) .fontSize(13).height(36).backgroundColor(#9933cc) .margin({ left: 16, bottom: 10 }) .onClick(() { this.showOverlay !this.showOverlay }) Column() .width(100%).height(150) .backgroundColor(#3366cc).borderRadius(12) .margin({ left: 16, right: 16 }) // overlay 必须传 Builder 引用不能传内联组件 .overlay(this.overlayContent, { align: Alignment.Center }) // ④ 图片卡片角标 Text(④ 图片卡片 overlay 角标) .fontSize(15).fontWeight(FontWeight.Bold).fontColor(#333) .width(100%).padding({ left: 16, top: 20, bottom: 6 }) Row({ space: 10 }) { Column() .width(150).height(100) .backgroundColor(#ff9900).borderRadius(10) .overlay(this.overlayBadgeHot, { align: Alignment.TopEnd }) Column() .width(150).height(100) .backgroundColor(#00aa55).borderRadius(10) .overlay(this.overlayBadgeNew, { align: Alignment.TopStart }) } .padding({ left: 16 }) Column().height(100) } .width(100%) } .scrollable(ScrollDirection.Vertical) .scrollBar(BarState.Auto) .width(100%).height(100%) // 悬浮 FAB利用 Stack alignContent.BottomEnd Stack({ alignContent: Alignment.Center }) { Column() .width(56).height(56) .backgroundColor(#0066ff).borderRadius(28) .shadow({ radius: 8, color: rgba(0,102,255,0.4), offsetX: 0, offsetY: 4 }) Text() .fontSize(28).fontColor(#fff).fontWeight(FontWeight.Bold) .margin({ bottom: 2 }) } .width(56).height(56) .margin({ right: 20, bottom: 20 }) .onClick(() { this.alignIndex (this.alignIndex 1) % 9 }) } .width(100%).height(100%) .backgroundColor(#f8f9fa) } }关键知识点1. overlay() 必须传 Builder 引用.overlay()的类型签名是string | CustomBuilder | ComponentContentObject。不能将内联组件表达式如Column() { ... }结果、Text(...)结果直接传入必须封装为Builder方法再传引用// 错误直接传内联 Column 表达式 .overlay(Column() { Text(hello) }, { align: Alignment.Center }) // 正确用 Builder 封装后传引用 Builder myOverlay() { Column() { Text(hello) } } .overlay(this.myOverlay, { align: Alignment.Center })2. Builder 内可以有 if 判断Builder内允许if/else控制流但不允许 let/const 变量声明。通过State响应式变量 if来控制浮层的显隐Builder overlayContent() { if (this.showOverlay) { Column() { ... } .backgroundColor(rgba(0,0,0,0.45)) } }3. overlay 不占布局空间overlay内容浮于组件之上不影响父容器的布局计算这与在 Stack 中额外增加子组件不同方式占布局空间适合场景Stack 子组件是占用 Stack 尺寸多层交叠时需要 z-index 精确控制overlay否角标、蒙层、水印不影响周围布局4. zIndex 改变渲染顺序默认情况下 Stack 子组件按声明顺序叠放后声明的在上层。.zIndex(n)可打破这一规则Stack() { Column().zIndex(3) // 虽然先声明但层级最高显示在最上面 Column().zIndex(1) Column().zIndex(2) }常见应用场景场景实现方式头像右下角角标overlay(badgeBuilder, { align: Alignment.BottomEnd })全屏蒙层overlay(maskBuilder) 宽高 100%backgroundColor半透明悬浮操作按钮Stack 按钮子组件 alignContent: Alignment.BottomEnd图片水印overlay(watermarkBuilder, { align: Alignment.BottomStart })卡片角标HOT/NEWoverlay(badgeBuilder, { align: Alignment.TopEnd })小结Stack让所有子组件叠放在同一区域alignContent控制默认对齐点.zIndex()控制层叠顺序.overlay()是轻量浮层方案不占布局空间内容必须以Builder引用传入Builder方法内允许if/else但不允许let/const变量声明悬浮 FAB 直接利用最外层Stack的alignContent.BottomEnd无需额外定位

相关新闻

AI智能体上下文环境设计：从原理到工程实践的全栈指南

AI智能体上下文环境设计：从原理到工程实践的全栈指南

1. AI智能体失败的核心痛点：上下文环境缺失在实际开发AI智能体项目时，很多开发者会遇到一个典型问题：智能体在测试环境中表现良好，但一到真实业务场景就频繁出错。这种问题的根源往往不是模型能力不足，而是上下文环境的…

2026/10/17 2:43:31 阅读更多 →
卫衣自动化缝制全攻略：核心工序设备替代、产能提升与主流机型对比

卫衣自动化缝制全攻略：核心工序设备替代、产能提升与主流机型对比

摘要：卫衣生产如何摆脱熟练工依赖、提升良品率并实现柔性快反？本文拆解卫衣 7 大核心缝制工序的自动化替代方案，横向对比誉财、重机、兄弟、舒普、富怡等主流设备参数，给出从产线规划到落地案例的完整路径，并附常见问题…

2026/10/16 21:19:09 阅读更多 →
长文本处理技术解析：从Transformer到工程落地实践

长文本处理技术解析：从Transformer到工程落地实践

在人工智能大模型快速迭代的背景下，月之暗面（Moonshot AI）向港交所提交上市申请的消息引发行业关注。招股书披露，其核心产品智能助手Kimi在2024年通过K3系列模型的推出，带动公司年度经常性收入（ARR&#xf…

2026/10/16 23:51:37 阅读更多 →

最新新闻

城市数字化转型实施框架：从业务泳道图到最小数据闭环的落地路线

城市数字化转型实施框架：从业务泳道图到最小数据闭环的落地路线

简介：这份PDF文献《城市数字化转型的逻辑起点与实施框架——以上海为例》面向城市治理研究者、公共管理学者及数字化转型实践者，系统探讨城市数字化转型的理论逻辑与落地路径。资源包内含1个PDF文件，约630KB，便于在电脑或移动端直…

2026/10/17 11:05:16 阅读更多 →
用Skill为AI Agent注入安全审计SOP：从复读式通读到流程化审计

用Skill为AI Agent注入安全审计SOP：从复读式通读到流程化审计

那原本是一次再普通不过的对话：我让AI助手审查一个项目的安全性，它认真"读"完代码之后，给出了"整体质量良好，未发现明显高危问题，建议补充输入校验与日志记录"的结论。作为在安全审计这行摸爬滚打…

2026/10/17 11:05:16 阅读更多 →
用AI编写教材如何把查重率降至15%？一套任务链写作法详解

用AI编写教材如何把查重率降至15%？一套任务链写作法详解

1. 低查重不是口号：先搞清楚AI教材查重率为什么普遍偏高 先说个扎心的现实：很多老师拿起ChatGPT这类AI工具，输入一句“帮我写第三章第一节”，三秒钟后得到一份看似工整的讲义，结果丢进查重系统一看，重复率3…

2026/10/17 11:05:16 阅读更多 →
边缘侧HTML压缩器实战：基于状态机的Cloudflare Workers与Hono优化

边缘侧HTML压缩器实战：基于状态机的Cloudflare Workers与Hono优化

自从把一个小型服务端渲染页面搬到 CloudFlare Workers 上之后，我就一直在跟 Hono 打交道。框架本身的体验很舒服，唯一让人心里硌得慌的是：每次渲染完的 HTML 里全是缩进、换行、注释，浏览器倒是无所谓，但那些多余字节…

2026/10/17 11:05:16 阅读更多 →
YOLOv5s 部署 RK3588：ONNX 转 RKNN 与 INT8 量化实战

YOLOv5s 部署 RK3588：ONNX 转 RKNN 与 INT8 量化实战

YOLOv5s 在 PC 上训练完，拿到 RK3588 上跑，中间隔着的不是一条命令，而是一整条工具链。我见过太多人卡在同一个地方：PyTorch 权重转 ONNX 成功，ONNX 转 RKNN 报错，或者转出来了但推理结果一塌糊涂&#xff…

2026/10/17 11:05:16 阅读更多 →
端侧智能推理优化指南：从量化到NPU的工程实践

端侧智能推理优化指南：从量化到NPU的工程实践

手里有几个端侧智能项目的推理优化落地之后，我终于有底气把这块硬骨头拆开讲讲。所谓“端侧智能推理优化与加速技术”，说白了就是让模型在手机、平板、车载盒子、边缘工控机这些资源有限的设备上，跑得又快又稳又省电。模型压缩、量化、算子替…

2026/10/17 11:04:15 阅读更多 →

日新闻

DeepSeek选型与部署：V3/R1、Ollama、API全攻略

DeepSeek选型与部署：V3/R1、Ollama、API全攻略

简介：《DeepSeek使用方法.pdf》是一份面向DeepSeek入门及进阶用户的完整使用指南，重点围绕V3与R1两款模型的能力差异与适用场景展开，帮助读者根据任务类型与成本选择合适的模型。资源共1个PDF文件，压缩包大小约311KB，篇…

2026/10/17 0:00:25 阅读更多 →
200+Deepseek润色指令拆解：从底层原理到场景落地的完整指南

200+Deepseek润色指令拆解：从底层原理到场景落地的完整指南

简介：这是一份聚焦DeepSeek提示词优化的《200Deepseek润色指令》PDF文档，共收录两百余条可直接套用的润色指令，涵盖语法修正、风格统一、逻辑梳理、表达精炼等维度，并针对商务写作、学术论文、广告文案等场景给出差异化建议。文档…

2026/10/17 0:00:25 阅读更多 →
OpenCV轮廓法物体计数系统：轻量、可控、可落地的工业级实现

OpenCV轮廓法物体计数系统：轻量、可控、可落地的工业级实现

简介：本资源是一份基于OpenCV的本科课程设计完整报告，面向计算机视觉初学者、图像处理学习者及高校通信/信息类专业学生，解决物体智能计数与检测结果结构化记录的实际问题。项目覆盖图像预处理、轮廓检测、边界框绘制、轨迹栏交互式参数调节、…

2026/10/17 0:00:25 阅读更多 →

周新闻

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

简介：基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码，面向计算机相关专业课程设计与期末大作业学生，以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程，…

2026/10/16 21:35:51 阅读更多 →
影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化，十个新手有八个栽在"往输入框里填东西"这件事上：要么填不进去，要么填了一半，要么直接把原来内容追加在后面。这背后的根因&…

2026/10/17 1:44:59 阅读更多 →
影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀：什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面，跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/16 15:04:24 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/16 21:54:38 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/16 3:49:43 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/16 14:23:36 阅读更多 →