【open harmony/harmonyos】ArkUI 玻璃拟态弹层实战打造轻量级节点详情面板前言 ✨在 HarmonyOS / OpenHarmony 应用中弹层是非常常见的交互形式。比如新增内容查看详情编辑信息二次确认快捷操作如果弹层只是普通白底卡片当然能用但在沉浸式界面中会显得比较割裂。我的项目星图 Xingtu是一个全屏 3D 知识星图应用背景是深色空间和发光节点所以弹层也不能做得太“传统”。这篇文章会结合项目中的节点详情弹层、创建节点弹层、词图生成弹层分享如何使用 ArkUI 实现玻璃拟态风格的轻量级浮层。一、为什么选择玻璃拟态弹层星图应用的主界面是一个全屏空间场景背景是深色渐变节点有发光效果底部是悬浮导航栏顶部有悬浮操作区如果这时候弹出一个完全不透明的大卡片会遮挡场景也会破坏沉浸感。所以项目里的弹层采用了这种设计半透明背景背景模糊细描边大圆角轻阴影内容简洁它不是跳转页面而是覆盖在星图上方让用户始终感觉自己还在同一个空间里。二、弹层组件拆分项目中主要有三个弹层XingtuNodeSheet节点详情弹层XingtuCreateNodeSheet新增节点弹层XingtuGenerateWordMapSheet词图生成弹层它们的职责不同但视觉风格保持一致节点详情展示标题、备注、标签、连接、删除、关闭新增节点输入名称、备注、标签词图生成输入主题和关键词生成星图这种拆分方式比较清晰。每个弹层只关注自己的业务不把所有逻辑塞进一个巨大组件里。三、节点详情弹层结构先看节点详情弹层XingtuNodeSheet。Component exportstructXingtuNodeSheet { node: XingtuNode| null null; linking: boolean false; onClose: () void (){}; onLink:(nodeId:string) void (){}; onDelete:(nodeId:string) void (){}; build(){if(!this.node) {Column(){} }else{Column({space: 10 }){Text(this.node.title).fontSize(24).fontWeight(FontWeight.Bold)Text(this.node.note.length 0 ?this.node.note: 暂无备注)Text(this.node.tags.length 0 ?this.node.tags.join(/): 暂无标签)Row({space: 12 }){Button(this.linking? 连线中 : 连接)Button(删除)Button(关闭)} } } } }这里有一个小细节当node为空时组件返回一个空Column不展示内容。这样外层可以始终挂载这个组件只通过选中节点来控制它是否显示。四、玻璃拟态样式核心 节点详情弹层的高级感主要来自下面这组样式.padding({left:18,right:18,top:18,bottom:18}).borderRadius(28).backgroundColor(XingtuTheme.materialGlass).backgroundBlurStyle(BlurStyle.COMPONENT_ULTRA_THIN).border({width:1,color:XingtuTheme.materialStroke}).shadow({radius:28,color:XingtuTheme.softShadow,offsetX:0,offsetY:12})几个关键点backgroundColor使用半透明颜色backgroundBlurStyle增加背景模糊border用低透明描边强化边界shadow让浮层从背景中浮起来borderRadius(28)让弹层更柔和这几个属性组合起来就能做出比较自然的玻璃拟态效果。五、统一主题色管理 为了避免样式散落在各个组件里项目把颜色统一放进XingtuTheme。exportclassXingtuTheme{staticreadonlymaterialGlass:string#29FFFFFF;staticreadonlymaterialStroke:string#24FFFFFF;staticreadonlysurfaceElevated:string#2EFFFFFF;staticreadonlytextPrimary:string#F8FAFC;staticreadonlytextSecondary:string#A7B3C7;staticreadonlyprimaryAction:string#F8FAFC;staticreadonlyprimaryActionText:string#0B1220;staticreadonlydestructive:string#FF453A;staticreadonlysoftShadow:string#24000000; }这样有几个好处多个弹层风格统一后续调整主题更方便颜色含义更清楚不容易出现“同一个白色写了五种透明度”的问题做 UI 文章时这类主题色封装也很值得展示因为它能体现项目不是随手堆样式而是有设计规范的。六、新增节点弹层新增节点弹层XingtuCreateNodeSheet负责收集用户输入。Statetitle:string;Statenote:string;StatetagsText:string;privatecreateNode():void{constparsedTags:string[] this.tagsText.split(,) .map((item:string) item.trim()) .filter((item:string) item.length0);this.onCreate(this.title.trim(),this.note.trim(), parsedTags);this.title;this.note;this.tagsText; }这里把标签输入设计成逗号分隔提交时再转换成数组。表单提交后会清空本地状态这样下次打开弹层时不会残留旧内容。七、输入框样式处理为了和整体视觉一致输入框也使用了半透明背景和圆角TextInput({text:this.title,placeholder: 名称 }).height(46) .borderRadius(14).backgroundColor(XingtuTheme.surfaceElevated).fontColor(XingtuTheme.textPrimary).onChange((value:string) this.title value)这里的重点不是复杂而是统一输入框高度一致圆角一致背景色一致字体颜色一致当一个弹层里有多个输入项时统一的规格会明显提升页面质感。八、操作按钮分层弹层中通常会有多个按钮比如取消创建删除连接关闭项目中使用不同颜色区分按钮优先级Button(创建).layoutWeight(1).height(44).backgroundColor(XingtuTheme.primaryAction).fontColor(XingtuTheme.primaryActionText)Button(删除).layoutWeight(1).height(44).backgroundColor(XingtuTheme.surfaceElevated).fontColor(XingtuTheme.destructive)主操作使用亮色背景危险操作使用红色文字普通操作使用半透明背景。这样用户不用仔细阅读也能快速判断哪个操作最重要、哪个操作需要谨慎。九、弹层在主界面中的挂载这些弹层最终都挂载在XingtuAppShell的Stack中。Stack({ alignContent: Alignment.Bottom }) {this.buildHdsTabs()this.buildPrimaryAddButton() XingtuNodeSheet({ node:this.selectedNode(), linking:this.store.linkingSourceId !null, onClose: () {this.store.selectNode(null);this.store.linkingSourceId null;this.revision 1; } }) .margin({ left:16, right:16, bottom:this.overlayBottomInset() }) XingtuCreateNodeSheet({ ... }) XingtuGenerateWordMapSheet({ ... }) }这里用overlayBottomInset()控制弹层距离底部导航的间距避免弹层和悬浮 Tab 重叠。privateoverlayBottomInset(): number {returnthis.isImmersiveGraphSurface() ?96:112; }这个细节在沉浸式界面里很重要浮层多了以后最容易出问题的不是样式而是层级和避让。十、体验总结 通过这套设计项目中的弹层具备了几个特点不跳转页面保持沉浸感玻璃拟态风格和星图背景融合输入、详情、生成弹层风格统一主按钮、普通按钮、危险按钮层级清晰弹层和底部悬浮导航保持安全距离对于 HarmonyOS / OpenHarmony 应用来说弹层不仅是功能容器也可以成为提升视觉质感的重要部分。如果你的应用本身是沉浸式、深色、高级感路线可以尝试用backgroundBlurStyle、半透明背景、细描边和轻阴影组合出这种玻璃拟态浮层。✨