当前位置：首页 > news >正文

【open harmony/harmonyos】ArkTS 打造高端沉浸式星图界面：悬浮导航栏、玻璃拟态与流光背景

news 2026/6/30 1:04:30

【open harmony/harmonyos】ArkTS 打造高端沉浸式星图界面：悬浮导航栏、玻璃拟态与流光背景

前言 ✨

在 HarmonyOS / OpenHarmony 应用开发中，很多页面容易做成传统的列表、卡片、表单结构。这样的界面虽然稳定，但如果想做一个更有记忆点、更具沉浸感的应用，就需要在视觉层次、交互反馈和系统能力接入上多下功夫。

这篇文章会结合我的项目星图 Xingtu，分享如何使用 ArkTS + ArkUI + UIDesignKit 实现一个偏高端、精致、沉浸式的 3D 星图界面。

项目最终效果不是普通首页，而是一个全屏知识星图空间：

🌌 深色沉浸背景
✨ 边缘流光视觉
🧊 玻璃拟态悬浮操作区
🧭 底部悬浮导航栏
🔵 发光节点与关系连线
👆 单指旋转、双指缩放的空间交互

一、项目效果定位

这个项目的核心页面不是传统信息流，而是一个“知识星图”界面。

用户进入应用后，看到的是一个全屏空间场景，节点像星体一样漂浮在背景中，不同节点之间通过连线形成关系网络。

这种设计适合以下类型的应用：

知识管理 App
灵感整理工具
AI 思维导图
单词记忆工具
产品结构分析工具
个人知识库可视化工具

它的重点不是堆功能，而是让用户第一眼感受到：这个应用有空间感、有层次、有探索欲。🚀

二、整体页面结构

项目主壳组件是XingtuAppShell，它负责组织四个 Tab 页面：

星图
元素
图谱
我的

同时，它还负责悬浮新增按钮、节点详情弹层、创建节点弹层、词图生成弹层等核心交互。

核心结构大致如下：

@Componentexport struct XingtuAppShell {@StatecurrentTab: XingtuTabKey ='starMap';@StateshowCreateSheet: boolean = false;@StateshowWordMapSheet: boolean = false;@Staterevision: number =0; private store: XingtuGraphStore = new XingtuGraphStore(); private tabsController: HdsTabsController = new HdsTabsController(); build() { Stack({ alignContent: Alignment.Bottom }) { this.buildHdsTabs() this.buildPrimaryAddButton() XingtuNodeSheet({ ... }) XingtuCreateNodeSheet({ ... }) XingtuGenerateWordMapSheet({ ... }) } } }

这里使用Stack作为主容器，是因为整个界面有大量“层叠式”内容：

底层是全屏星图
上层是悬浮 HUD
底部是悬浮 Tab
中间是悬浮新增按钮
弹层覆盖在场景之上

这种布局方式非常适合做沉浸式应用界面。

三、使用 UIDesignKit 实现悬浮导航栏 🧭

项目中底部导航没有使用普通 Tab，而是使用了@kit.UIDesignKit中的HdsTabs。

import{ HdsTabs, HdsTabsController } from'@kit.UIDesignKit';@BuilderprivatebuildHdsTabs() { HdsTabs({ barPosition: BarPosition.End, index:this.currentTabIndex(), controller:this.tabsController }) { TabContent() {this.buildStarMapTab() } .tabBar('星图') TabContent() {this.buildElementsTab() } .tabBar('元素') TabContent() {this.buildGraphsTab() } .tabBar('图谱') TabContent() { XingtuMineView() } .tabBar('我的') } .width('100%') .height('100%') .barHeight(XINGTU_TAB_BAR_HEIGHT) .barOverlap(true) .barFloatingStyle(makeXingtuHdsFloatingStyle()) .scrollable(false) .animationDuration(260) }

这里有几个关键点：

barOverlap(true)：让 Tab 栏覆盖在内容之上，而不是把页面挤上去
barFloatingStyle(...)：配置悬浮材质、边距、光感
animationDuration(260)：让切换动画更顺滑

悬浮导航栏会让页面更像一个完整的沉浸式空间，而不是传统 App 的“内容 + 底栏”结构。

四、配置玻璃拟态悬浮效果 🧊

导航栏的悬浮样式单独封装在XingtuHdsTabsSpec中：

import { hdsMaterial, HdsTabsFloatingStyle } from '@kit.UIDesignKit'; export function makeXingtuHdsFloatingStyle():HdsTabsFloatingStyle {return { barSideMargin:XINGTU_TAB_SIDE_MARGIN,barBottomMargin:XINGTU_TAB_BOTTOM_GAP,gradientMask:{maskColor:'#00000000',maskHeight:116}, lightColor:XingtuTheme.hdsImmersiveLight,systemMaterialEffect:{materialType:hdsMaterial.MaterialType.IMMERSIVE,materialLevel:hdsMaterial.MaterialLevel.SMOOTH}, thermoCtrl:true,barOpacity:1}; }

这里最重要的是：

systemMaterialEffect: {materialType: hdsMaterial.MaterialType.IMMERSIVE, materialLevel: hdsMaterial.MaterialLevel.SMOOTH}

它让底部导航具备系统级材质感，看起来更轻、更通透，也更符合 HarmonyOS 高端视觉体验。

五、沉浸式流光背景 ✨

星图场景中使用了HdsVisualComponent来实现沉浸式流光背景。

import{HdsSceneController,HdsVisualComponent}from'@kit.UIDesignKit';privateimmersiveLightController:HdsSceneController=newHdsSceneController().setSceneParams(makeXingtuDualEdgeFlowLightParams());@BuilderprivatebuildImmersiveLight() {HdsVisualComponent() .width('100%') .height('100%') .opacity(0.86) .scene(xingtuImmersiveSceneType(),this.immersiveLightController) .onAppear(() =>{this.immersiveLightController.start(); }) .onDisAppear(() =>{this.immersiveLightController.stop(); }) }

对应的流光参数如下：

export function makeXingtuDualEdgeFlowLightParams(): DualEdgeFlowLightWithMaskParam {return{ backgroundMaskColors: ['#14060B14', '#22264D73', '#143B82F6'], firstEdgeFlowLight: { startPos:0.04, endPos:0.28,color: '#BFE8F2FF' }, secondEdgeFlowLight: { startPos:0.58, endPos:0.88,color: '#8093C5FD' } }; }

这部分是整个页面高级感的重要来源。

普通深色背景会显得比较平，而加入边缘流光后，页面会有明显的空间包围感。尤其是搭配发光节点时，整体就更像一个 AI 数据空间。🌌

六、悬浮 HUD 操作区

在星图页面顶部，我还设计了一个悬浮操作区，用来展示当前节点数量、连线数量，以及快速入口。

@BuilderprivatebuildFloatingSceneHud(){Column({space: 14 }){Column({space: 4 }){Text('星图').fontSize(34).fontWeight(FontWeight.Bold).fontColor(XingtuTheme.textPrimary)Text(`${this.store.nodes.length} 个节点 · ${this.store.edges.length} 条连线`).fontSize(13).fontColor(XingtuTheme.textSecondary)}Row({space: 10 }){Button('元素')Button('图谱')Button('词图生成')Button('+')} .padding({ left:6, right:6, top:6, bottom:6}) .backgroundColor(XingtuTheme.materialGlass).backgroundBlurStyle(BlurStyle.COMPONENT_ULTRA_THIN).border({ width:1, color:XingtuTheme.materialStroke }) .borderRadius(24)} .padding({ left:20, right:20, top:56}) }

这里使用了几个重要视觉属性：

.backgroundColor(XingtuTheme.materialGlass).backgroundBlurStyle(BlurStyle.COMPONENT_ULTRA_THIN).border({ width:1, color:XingtuTheme.materialStroke }) .borderRadius(24).shadow({ radius:24, color:XingtuTheme.softShadow, offsetX:0, offsetY:10})

这些属性组合起来，就形成了一个轻盈的玻璃拟态浮层。

七、统一主题色管理 🎨

为了让项目风格统一，我把颜色都收敛到了XingtuTheme中。

export class XingtuTheme { staticreadonlyappBackground:string= '#060B14'; staticreadonlysceneBackgroundTop:string= '#17243A'; staticreadonlysceneBackgroundBottom:string= '#060B14'; staticreadonlymaterialGlass:string= '#29FFFFFF'; staticreadonlymaterialStroke:string= '#24FFFFFF'; staticreadonlytextPrimary:string= '#F8FAFC'; staticreadonlytextSecondary:string= '#A7B3C7'; staticreadonlyaccent:string= '#93C5FD'; staticreadonlyactiveGlow:string= '#BFDBFE'; staticreadonlyprimaryAction:string= '#F8FAFC'; staticreadonlyprimaryActionText:string= '#0B1220'; staticreadonlyharmonyLightShadow:string= '#52BFDBFE'; staticreadonlysoftShadow:string= '#24000000'; }

这样做有几个好处：

页面风格更统一
后期换主题更方便
避免颜色散落在各个组件里
代码可读性更好

对于偏视觉体验的 HarmonyOS 应用来说，主题管理非常重要。否则页面很容易变成“每个组件都好看，但整体不统一”。

八、星图节点的高级感处理 🔵

星图节点不是简单圆点，而是根据选中状态、远近关系动态调整大小、透明度和阴影。

privatenodeSize(): number {returnMath.max(30, Math.min(108,58*this.node.scale)); } build() { Column({ space:4}) { Stack() {} .width(this.nodeSize()) .height(this.nodeSize()) .borderRadius(this.nodeSize() /2) .backgroundColor(this.selected ? XingtuTheme.primaryAction : XingtuTheme.accent) .opacity(this.selected ?0.98:this.node.opacity *0.82) .shadow({ radius:this.selected ?30:12+this.node.scale *5, color:this.selected ? XingtuTheme.harmonyLightShadow :'#3493C5FD', offsetX:0, offsetY:this.selected ?0:4})if(this.selected ||this.node.scale >0.92) { Text(this.node.title) .fontSize(12) .fontColor(XingtuTheme.textPrimary) } } }

这里的细节是：

近处节点更大
远处节点更淡
选中节点更亮
只有选中或较近时才展示文字

这样可以避免页面上文字太多导致混乱，同时又保留了空间层次感。

九、全屏沉浸窗口配置

除了 ArkUI 页面内部的沉浸效果，Ability 中也对窗口做了全屏配置：

const mainWindow: window.Window = windowStage.getMainWindowSync(); mainWindow.setWindowLayoutFullScreen(true); mainWindow.setWindowSystemBarProperties({ statusBarColor:'#00000000', navigationBarColor:'#00000000', statusBarContentColor:'#F8FAFC', navigationBarContentColor:'#F8FAFC'});

这一步很重要。

如果状态栏和导航栏仍然是普通背景色，即使页面内部做了沉浸式设计，也会被系统栏打断。全屏窗口可以让视觉从屏幕顶部一直延展到底部，整体体验更完整。