液态tabs

ZSTabs - 沉浸式液态指示器TabBar

特性

🎨 沉浸式光感效果

• 使用HarmonyOS Design System的沉浸材质（IMMERSIVE + EXQUISITE）
• 实现玻璃质感的液态指示器
• 支持点光源照明效果

💧 液态交互体验

• 拖动时指示器产生液态拉伸/收缩效果
• 根据滑动速度动态调整形变程度
• 滑动时图标/文本模糊效果，增强液态感
• 智能吸附到最近页签锚点

🏗️ 状态管理V2

• 使用最新的@ComponentV2装饰器
• @Local替代传统@State状态管理
• @Monitor替代@Watch监听器
• 符合HarmonyOS最新规范

⚡ 最新API适配

• 使用getUIContext().animateTo()替代全局animateTo()
• 符合HarmonyOS API最新规范
• 更好的UI上下文管理

安装

ohpminstall@shuishenhuole/zstabs

使用示例

import{ZSTabs}from'zstabs'@BuilderfunctionHomeBuilder(){Stack(){Text("Hello world HomeBuilder")}}@BuilderfunctionPageOneBuilder(){Stack(){Text("Hello world PageOneBuilder")}}@BuilderfunctionPageTwoBuilder(){Stack(){Text("Hello world PageTwoBuilder")}}@BuilderfunctionPageThreeBuilder(){Stack(){Text("Hello world PageThreeBuilder")}}@Entry@ComponentV2struct Index{@LocalIndex:number=0build(){Column(){ZSTabs({currentIndicatorIndex:this.Index!!,tabsOption:{tabItems:[{title:"首页",color:$r('sys.color.icon'),selectColor:$r('sys.color.warning'),icon:$r('sys.media.ohos_ic_public_remove'),builder:wrapBuilder(HomeBuilder),},{title:"第一页",icon:$r('sys.media.ohos_ic_public_remove'),builder:wrapBuilder(PageOneBuilder),color:$r('sys.color.icon'),selectColor:$r('sys.color.warning'),},{title:"第二页",color:$r('sys.color.icon'),selectColor:$r('sys.color.warning'),icon:$r('sys.media.ohos_ic_public_remove'),builder:wrapBuilder(PageTwoBuilder)},{title:"第三页",color:$r('sys.color.icon'),selectColor:$r('sys.color.warning'),icon:$r('sys.media.ohos_ic_public_remove'),builder:wrapBuilder(PageThreeBuilder)},],maskColor:"#8d5ce7"}})}}}

配置项说明

核心组件ZSTabs

ZSTabsOptions

ZSTabsItem

致谢

本项目基于 对沉浸光感tabbar的优化改造 进行重构和优化。

核心光感来自hds_button 感谢开源