OpenHarmony开发实战：TabLayout库的使用

最新推荐文章于 2024-07-28 20:06:40 发布

不停留的码牛

最新推荐文章于 2024-07-28 20:06:40 发布

阅读量832

点赞数 12

分类专栏： HarmonyOS 鸿蒙 OpenHarmony 文章标签： harmonyos 华为 HarmonyOS Next 驱动开发鸿蒙 android

本文链接：https://blog.csdn.net/m0_64422261/article/details/140070817

版权

鸿蒙同时被 3 个专栏收录

166 篇文章 0 订阅

订阅专栏

HarmonyOS

164 篇文章 0 订阅

订阅专栏

OpenHarmony

154 篇文章 0 订阅

订阅专栏

专门为OpenHarmony打造的一款TabLayout库

效果图

2024-04-24_09-22-56 (1)

下载安装

ohpm install @zyc/tablayout

用例

使用说明

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	选中文字权重
tabPadding	Padding	tab child之间的距离
tabAlignment	Alignment	tab位于屏幕的位置
tabAverageEnable	boolean	是否等分tab容器，必须搭配tabContainerWidth
tabContainerPadding	Padding	tab容器的Padding，建议使用tabContainerMargin
tabContainerMargin	Padding	tab容器的Margin
tabContainerHeight	Length	tab容器的高度
tabContainerWidth	Length	tab容器的宽度，默认为auto

| | | |

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 NEXT）学习路径和一些资料的整理供小伙伴学习

点击领取→纯血鸿蒙Next全套最新学习资料（安全链接，放心点击）

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

一、鸿蒙（HarmonyOS NEXT）最新学习路线

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）…等技术知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

二、HarmonyOS Next 最新全套视频教程