前言

随着鸿蒙生态蓬勃发展，各种实用的鸿蒙三方库已成为开发者高效开发的利器。它不仅能拓展应用功能边界，还能大幅提升开发效率，不管你是刚接触鸿蒙开发的小白，还是开发时长两年半的老司机，掌握这些三方库，绝对能让你在鸿蒙开发上更加方便！
博主在日常的工作开发中也也是如此，今天给大家分享的是tablayout三方库。

TabLayout

专门为OpenHarmony打造的一款TabLayout库，希望各位用得开心

下载安装

ohpm install @zyc/tablayout

用例

见entry目录Index.ets

使用说明

TabLayout({
  tabs: this.tabsInfo,
  gapContinuousAnimation: false,
  smartToIndex: this.smartIndex,
  indicatorStyle: {
    warpTab: true,
    type: "line",
    colorGradient: {
      angle: 90,
      direction: GradientDirection.Left,
      colors: [["#ff9a9e", 0], ["#fad0c4", 1]],
    }
  },
})
  .width("100%")

主要属性说明

参数名称 入参内容 功能简介
tabStyle ITabStyle Tab样式
indicatorStyle IIndicatorStyle 指示器样式
tabs TabItem[] 数据源
cacheCount number swiper缓存数量
isOverPage boolean Tab是否覆盖在Page上（抖音短视频效果）
gapContinuousAnimation boolean 间隔切换是否不做动画（失效）
showIndicator boolean 是否显示指示器
smartToIndex number 主动切换指示器
onTabSelected (position: number) => void Tab选中回调
onTabItemBuilder (item: TabAttr) => void 自定义Tab
onTabIndicatorBuilder () => void 自定义指示器
onContentBuilder (item: TabItem, index: number) => void Page页面（不传则无滑动）

Tab样式属性说明

参数名称 入参内容 功能简介
fontSizeNormal number 未选中文字大小
fontSizeSelect number 选中文字大小
fontColorNormal ResourceColor 未选中文字颜色
fontColorSelect ResourceColor 选中文字颜色
fontWeightNormal FontWeight 未选中文字权重
fontWeightSelect FontWeight 选中文字权重
padding Padding tab child之间的距离
alignment Alignment tab位于屏幕的位置
tabAverageEnable boolean 是否等分tab容器，必须搭配tabContainerWidth
tabContainerPadding Padding tab容器的Padding，建议使用tabContainerMargin
tabContainerMargin Padding tab容器的Margin
tabContainerHeight Length tab容器的高度
tabContainerWidth Length tab容器的宽度，默认为auto
backgroundColorNormal ResourceColor tab背景色默认
backgroundColorSelect ResourceColor tab背景色选中
backgroundImageSizeNormal SizeOptions , ImageSize tab背景默认图大小
backgroundImageSizeSelect SizeOptions , ImageSize tab背景选中图大小
borderNormal BorderOptions tab背景默认边框
borderSelect BorderOptions tab背景选中边框
borderRadiusNormal Length ,BorderRadiuses , LocalizedBorderRadiuses tab背景默认圆角
borderRadiusSelect Length ,BorderRadiuses , LocalizedBorderRadiuses tab背景选中圆角
backgroundImageNormal ResourceStr , PixelMap tab背景默认图
backgroundImageSelect ResourceStr , PixelMap tab背景选中图片

| | | |

Indicator样式属性说明

参数名称 入参内容 功能简介
type "line" , "block" , "custom" 指示器类型线条、背景块、自定义（自定义会导致绝大多数属性不生效）
width number 宽度
height number 高度
animationType "scroll" , "alpha" 切换动画
alignment Alignment 相对于Tab的位置
radius number 圆角
color ResourceColor 颜色
colorGradient ResourceColor 渐变颜色
warpTab boolean 自适应Tab宽度
margin Margin , Length 不受warpTab限制
padding Margin , Length 不受warpTab限制

已知问题

代码在API12 中，Swiper onChange回调非常的靠后，指示器和Tab选中间隔会有很明显的延迟感。API11没有该问题。
Demo目前只能运行在API12中，API11 需自行修改。

Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

HarmonyOS NEXT应用测试都有哪些工具可以使用，它们的使用场景有哪些区别？

主要介绍基础功能和兼容性、稳定性、功耗、性能、安全和UX这6大核心质量维度在开发阶段和测试阶段需要关注的体验建议。应用在开发过程中典型的测试活动模型和测试活动质量目标，一般分为单元测试，集成测试、UI测试、体验测试和用户测试。致力于提供便捷的一站式应用测试服务，解决应用开发、测试过程中面临的成本、技术和效率问题。目前HarmonyOS NEXT应用测试都有哪些工具，这些工具的使用场景是什么呢？主要

avatar HarmonyOS开发者社区

onTouch事件在点击的时候一直会触发TouchType的Move状态？

真机的触摸传感器通常具有高灵敏度，即使手指轻微抖动（用户可能感知不到），传感器仍会捕捉到坐标变化并触发Move事件。这在需要高精度触控的场景（如绘图应用）中是有益的，但在点击场景下可能造成多次Move事件触发。在按下去的瞬间，Down状态被触发后Move状态也接着被触发，即使手指不移动也会一直触发Move状态，Move连续打印出来的x、y值一模一样。在模拟器上，TouchType的表现正常，不移动

avatar HarmonyOS开发者社区

HarmonyOS应用未上架 ，如何调试检测应用更新功能是否正常？

应用开发中可以正常编写调用checkAppUpdate这个API的业务逻辑，上架后，如果无可更新版本（首次上架或当前已是最新版本）返回0（不存在可更新版本）；返回1（存在新版本）可以通过调用showUpdateDialog这个API显示升级弹框，提醒用户升级到最新版本体验新上架功能特性。当应用启动完成或用户在应用中主动检查应用新版本时，开发者可以通过本服务，来查询应用是否有可更新的版本。开发者可以

avatar HarmonyOS开发者社区