鸿蒙(HarmonyOS)应用开发实战——自定义视图实现Tab效果

本文链接：https://blog.csdn.net/CTrup/article/details/142578798

往期知识点整理

介绍

本示例介绍使用Text、List等组件，添加点击事件onclick,动画，animationTo实现自定义Tab效果。

效果预览图

使用说明

点击页签进行切换，选中态页签字体放大加粗，颜色由灰变黑，起到强调作用，同时，底部颜色条横线位移到当前选中页签下方，内容区翻页到当前选中页签对应区域。

实现思路

页签实现：添加onClick方法，记录点击的index，index变化后，改变页签颜色、字体大小，使用animateTo方法实现页签切换动画。

Text(title)
  .textAlign(TextAlign.Center)
  .height($r('app.integer.custom_view_width_and_height_value4'))
  .width(this.titleLengthRadix3 * title.length)
  .fontColor(this.currentIndex == idx ?
            (this.wantGoIndex == idx ? $r('app.color.custom_view_background_color1'):$r('app.color.custom_view_background_color2')):
            (this.wantGoIndex == idx ? $r('app.color.custom_view_background_color1'):$r('app.color.custom_view_background_color2')))
  .fontSize(this.currentIndex