#跟着晓明学鸿蒙# 鸿蒙Next开发中ohpm三方库使用指南之tablayout集成示例

_Indulge

2人浏览 · 2025-05-21 22:05:01

_Indulge · 2025-05-21 22:05:01 发布

前言

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

HarmonyOS开发者社区

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

更多推荐

HarmonyOS开发者集合！“智问智答挑战月”来袭，边解难题边赢会员+定制周边！

HarmonyOS开发者社区

鸿蒙，下一个iPhone时刻？

各个端口的连接跳转顺畅，无需多余的点击步骤，实现更自然的用户体验，也极大程度的提升了多设备协调的效率。例如，当手机、平板、智慧屏组成跨设备工作空间时，软件需要调用手机的 5G 模块、平板的触控笔协议、智慧屏的显示驱动，这种多硬件协同能力的实现，依赖于硬件层面统一的互联协议与接口标准。最近，国新办举行的“高质量完成‘十四五’规划”系列主题新闻发布会上表示，国产操作系统加速崛起，以鸿蒙系统为例，鸿蒙生