液态tabs

ZSTabs - 沉浸式液态指示器TabBar特性 沉浸式光感效果使用HarmonyOS Design System的沉浸材质IMMERSIVE EXQUISITE实现玻璃质感的液态指示器支持点光源照明效果 液态交互体验拖动时指示器产生液态拉伸/收缩效果根据滑动速度动态调整形变程度滑动时图标/文本模糊效果增强液态感智能吸附到最近页签锚点️ 状态管理V2使用最新的ComponentV2装饰器Local替代传统State状态管理Monitor替代Watch监听器符合HarmonyOS最新规范⚡ 最新API适配使用getUIContext().animateTo()替代全局animateTo()符合HarmonyOS API最新规范更好的UI上下文管理安装ohpminstallshuishenhuole/zstabs使用示例import{ZSTabs}fromzstabsBuilderfunctionHomeBuilder(){Stack(){Text(Hello world HomeBuilder)}}BuilderfunctionPageOneBuilder(){Stack(){Text(Hello world PageOneBuilder)}}BuilderfunctionPageTwoBuilder(){Stack(){Text(Hello world PageTwoBuilder)}}BuilderfunctionPageThreeBuilder(){Stack(){Text(Hello world PageThreeBuilder)}}EntryComponentV2struct Index{LocalIndex:number0build(){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参数类型必填默认值说明currentIndicatorIndexnumber是-tabbar的当前页索引 使用!!双向绑定tabsOptiontabsOption是-tab的配置项maskColorResourceColor否20按压的光感颜色ZSTabsOptions参数类型必填默认值说明tabItemsZSTabsItem[]是-Tab页签配置数组 目前支持的数组长度为2-4barBottomMarginnumber | Resource否20TabBar底部间距ZSTabsItem参数类型必填默认值说明titlestring是-页签标题文本iconResource是-页签图标资源colorResourceColor是-页签未选中时的颜色selectColorResourceColor否-页签选中时的颜色builderWrappedBuilder[]是-页签内容构建器致谢本项目基于 对沉浸光感tabbar的优化改造 进行重构和优化。核心光感来自hds_button 感谢开源