基于tabs实现页面布局

// scroll部分主要逻辑 
 
enum ScrollPosition{ 
  start, 
  center, 
  end 
} 
 
@Entry 
@Component 
struct NestedScroll { 
  @State listPosition: number = ScrollPosition.start; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。 
  @State scrollPosition: number = ScrollPosition.start; // 0代表滚动到页面顶部，1代表中间值，2代表滚动到页面底部。 
  ... 
 
  build() { 
    Column() { 
      Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.TabsController }) { 
        TabContent() { 
          Stack({ alignContent: Alignment.Top }) { 
            Scroll(this.scrollerForScroll) { 
              Column() { 
                Column(){ 
 
                } 
                .width("100%") 
                .height("40%") 
                .backgroundColor(Color.Pink) 
 
 
                // tabbar 
                Row({ space: 7 }) { 
                  Scroll() { 
                    ... 
                  } 
                } 
 
                //tabs 
                Tabs({ barPosition: BarPosition.Start, controller: this.subsController }) { 
                  TabContent() { 
                    List({ space: 10, scroller: this.scrollerForList }) { 
                      ... 
                    } 
                    .onReachStart(() => { 
                      this.listPosition = ScrollPosition.start 
                    }) 
                    .onReachEnd(() => { 
                      this.listPosition = ScrollPosition.end 
                    }) 
                    .onScrollFrameBegin((offset: number, state: ScrollState) => { 
 
                      console.info('chenoffset::'+offset) 
                      // 滑动到列表中间时 
                      if (!((this.listPosition == ScrollPosition.start && offset < 0) 
                        || (this.listPosition == ScrollPosition.end && offset > 0))) { 
                        this.listPosition = ScrollPosition.center 
                      } 
 
                      // 如果页面已滚动到底部 且 列表不在顶部或列表有正向偏移量 
                      if (this.scrollPosition == ScrollPosition.end 
                        && (this.listPosition != ScrollPosition.start || offset > 0)) { 
                        console.info('chenoffsetscrollBy::'+offset) 
                        return { offsetRemain: offset }; 
                      } else { 
                        // scrollBy滑动指定距离 
                        console.info('chenoffsetscrollBy滑动指定距离::'+offset) 
                        this.scrollerForScroll.scrollBy(0, offset) 
                        return { offsetRemain: 0 }; 
                      } 
                    }) 
                  }.tabBar('关注') 
                  ... 
                } 
              } 
              .width("100%") 
              .height("92%") 
              .backgroundColor('#F1F3F5') 
 
            } 
          } 
          .scrollBar(BarState.Off) 
          .width("100%") 
          .height("100%") 
          // 滚动事件回调, 返回竖直方向偏移量，单位vp 
          .onScroll((xOffset: number, yOffset: number) => { 
            this.currentYOffset = this.scrollerForScroll.currentOffset().yOffset; 
            console.info('this.currentYOffset'+this.currentYOffset) 
            // 非（页面在顶部或页面在底部），则页面在中间 
            if (!((this.scrollPosition == ScrollPosition.start && yOffset < 0) 
              || (this.scrollPosition == ScrollPosition.end && yOffset > 0))) { 
              this.scrollPosition = ScrollPosition.center 
            } 
          }) 
          // 当组件滚动到边缘时触发 
          .onScrollEdge((side: Edge) => { 
            if (side == Edge.Top) { 
              // 页面在顶部 
              this.scrollPosition = ScrollPosition.start 
            } else if (side == Edge.Bottom) { 
              // 页面在底部 
              this.scrollPosition = ScrollPosition.end 
            } 
          }) 
          .onScrollFrameBegin(offset => { 
            if (this.scrollPosition == ScrollPosition.end) { 
              return { offsetRemain: 0 }; 
            } else { 
              return { offsetRemain: offset }; 
            } 
          }) 
 
          // 顶部导航输入框 
          Row() { 
            TextInput({ text: '', placeholder: 'input your word...', controller: this.controller }).fontSize(24) 
          } 
          .justifyContent(FlexAlign.Center) 
          .backgroundColor('#00ffffff') 
          .width('100%') 
          .height('8%') 
 
        } 
 
      }.tabBar(this.tabBuilder(0, '首页')) 
 
      ... 
    } 
    ... 
  }.width('100%') 
} 
}

Tabs({ barPosition: BarPosition.Start, controller: this.subsController }) { 
  TabContent() { 
    List({ space: 10, scroller: this.scrollerForList }) { 
      ... 
    } 
    .nestedScroll({ 
      scrollForward: NestedScrollMode.PARENT_FIRST, 
      scrollBackward: NestedScrollMode.SELF_FIRST 
    })

Row(){ 
  Column() { 
    Scroll(this.scroller) { 
      Row() { 
        ForEach(this.arr, (item: string, index: number) => { 
          Column() { 
            Text(item) 
              .fontSize(16) 
              .borderRadius(5) 
                //字体颜色粗细变化 
              .fontColor(this.indicatorIndex === index ? Color.Red : Color.Black) 
              .fontWeight(this.indicatorIndex === index ? FontWeight.Bold : FontWeight.Normal) 
              .margin({ left: this.initialTabMargin, right: this.initialTabMargin }) 
              .id(index.toString()) 
              .onAreaChange((oldValue: Area, newValue: Area) => { 
                if (this.indicatorIndex === index && (this.indicatorMarginLeft === 0 || this.indicatorWidth === 0)) { 
                  if (newValue.globalPosition.x != undefined) { 
                    let positionX = Number.parseFloat(newValue.globalPosition.x.toString()); 
                    this.indicatorMarginLeft = Number.isNaN(positionX) ? 0 : positionX; 
                  } 
                  let width = Number.parseFloat(newValue.width.toString()); 
                  this.indicatorWidth = Number.isNaN(width) ? 0 : width; 
                } 
              }) 
              .onClick(() => { 
                this.indicatorIndex = index; 
                this.underlineScrollAuto(this.animationDuration, index); 
                this.scrollIntoView(index); 
                // swiper进行联动 
                this.swiperIndex = index; 
              }) 
          } 
          .width(this.textLength[index] * 28) 
        }, (item: string) => item) 
      } 
      .height(32) 
 
    } 
    .width('100%') 
    .scrollable(ScrollDirection.Horizontal) 
    .scrollBar(BarState.Off) 
    .edgeEffect(EdgeEffect.Spring) 
    .onScroll((xOffset: number, yOffset: number) => { 
      console.info(xOffset + ' ' + yOffset) 
      this.indicatorMarginLeft -= xOffset; 
    }) 
    .onScrollStop(() => { 
      console.info('Scroll Stop') 
      this.underlineScrollAuto(0, this.indicatorIndex); 
    }) 
    //下划线 
    Column() 
      .width(this.indicatorWidth) 
      .height(2) 
      .borderRadius(2) 
      .backgroundColor(Color.Red) 
      .alignSelf(ItemAlign.Start) 
      .margin({ left: this.indicatorMarginLeft, top: 5 }) 
  } 
  .width('92%') 
  .margin({ top: 15, bottom: 10}) 
 
  Text('更多') 
    .width(36) 
    .height(50) 
    .backgroundColor(Color.Pink) 
    .fontSize(16) 
    .borderRadius(5) 
}

Swiper(this.swiperController) { 
  LazyForEach(this.data, (item: number) => { 
    Column() { 
      Text(item.toString()) 
      ... 
    } 
    .onAreaChange((oldValue: Area, newValue: Area) => { 
      let width = Number.parseFloat(newValue.width.toString()); 
      this.swiperWidth = Number.isNaN(width) ? 0 : width; 
    }) 
  }, (item: string) => item) 
} 
.onChange((index: number)=>{ 
  this.swiperIndex = index; 
}) 
.cachedCount(2) 
.index(this.swiperIndex) 
.indicator(false) 
.curve(this.animationCurve) 
.loop(false)

.onAnimationStart((index: number, targetIndex: number, event: SwiperAnimationEvent) => { 
  // 切换动画开始时触发该回调。下划线跟着页面一起滑动，同时宽度渐变。 
  this.indicatorIndex = targetIndex; 
  this.underlineScrollAuto(this.animationDuration, targetIndex); 
}) 
  .onAnimationEnd((index: number, event: SwiperAnimationEvent) => { 
    // 切换动画结束时触发该回调。下划线动画停止。 
    let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event); 
    this.startAnimateTo(0, currentIndicatorInfo.left, currentIndicatorInfo.width); 
    this.scrollIntoView(index); 
  }) 
  .onGestureSwipe((index: number, event: SwiperAnimationEvent) => { 
    // 在页面跟手滑动过程中，逐帧触发该回调。 
    let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event); 
    this.indicatorIndex = currentIndicatorInfo.index;//当前页签index 
    this.indicatorMarginLeft = currentIndicatorInfo.left;//当前页签距离左边margin 
    this.indicatorWidth = currentIndicatorInfo.width;//当前页签宽度 
  }) 
// 获取屏幕宽度，单位vp 
private getDisplayWidth(): number { 
  return this.displayInfo != null ? px2vp(this.displayInfo.width) : 0; 
} 
 
// 获取组件大小、位置、平移缩放旋转及仿射矩阵属性信息。 
private getTextInfo(index: number): Record<string, number> { 
  let modePosition :componentUtils.ComponentInfo = componentUtils.getRectangleById(index.toString()); 
  try { 
  return { 'left': px2vp(modePosition.windowOffset.x), 'width': px2vp(modePosition.size.width) } 
} catch (error) { 
  return { 'left': 0, 'width': 0 } 
} 
} 
 
// 当前下划线动画 
private getCurrentIndicatorInfo(index: number, event: SwiperAnimationEvent): Record<string, number> { 
  let nextIndex = index; 
  // 滑动范围限制，Swiper不可循环，Scroll保持不可循环 
  if (index > 0 && event.currentOffset > 0) { 
  nextIndex--; // 左滑 
} else if (index < this.data.totalCount() - 1 && event.currentOffset < 0) { 
  nextIndex++; // 右滑 
} 
this.nextIndicatorIndex = nextIndex; 
// 获取当前tabbar的属性信息 
let indexInfo = this.getTextInfo(index); 
// 获取目标tabbar的属性信息 
let nextIndexInfo = this.getTextInfo(nextIndex); 
// 滑动页面超过一半时页面切换 
this.swipeRatio = Math.abs(event.currentOffset / this.swiperWidth); 
let currentIndex = this.swipeRatio > 0.5 ? nextIndex : index; // 页面滑动超过一半，tabBar切换到下一页。 
let currentLeft = indexInfo.left + (nextIndexInfo.left - indexInfo.left) * this.swipeRatio; 
let currentWidth = indexInfo.width + (nextIndexInfo.width - indexInfo.width) * this.swipeRatio; 
this.indicatorIndex = currentIndex; 
return { 'index': currentIndex, 'left': currentLeft, 'width': currentWidth }; 
} 
 
 
private scrollIntoView(currentIndex: number): void { 
  const indexInfo = this.getTextInfo(currentIndex); 
  let tabPositionLeft = indexInfo.left; 
  let tabWidth = indexInfo.width; 
  // 获取屏幕宽度，单位vp 
  const screenWidth = this.getDisplayWidth(); 
  const currentOffsetX: number = this.scroller.currentOffset().xOffset;//当前滚动的偏移量 
 
  this.scroller.scrollTo({ 
                         // 将tabbar可滑动时候定位在正中间 
                           xOffset: currentOffsetX + tabPositionLeft - screenWidth / 2 + tabWidth / 2, 
                           yOffset: 0, 
                           animation: { 
                             duration: this.animationDuration, 
                             curve: this.animationCurve, // 动画曲线 
                           } 
                         }); 
  this.underlineScrollAuto(this.animationDuration, currentIndex); 
} 
 
private startAnimateTo(duration: number, marginLeft: number, width: number): void { 
  animateTo({ 
  duration: duration, // 动画时长 
  curve: this.animationCurve, // 动画曲线 
  onFinish: () => { 
    console.info('play end') 
  } 
}, () => { 
  this.indicatorMarginLeft = marginLeft; 
  this.indicatorWidth = width; 
}) 
} 
 
// 下划线动画 
private underlineScrollAuto(duration: number, index: number): void { 
  let indexInfo = this.getTextInfo(index); 
  this.startAnimateTo(duration, indexInfo.left, indexInfo.width); 
}

Scroll(this.scroller) { 
  Row() { 
    ForEach(this.arr, (item: string, index: number) => { 
      ... 
    }, (item: string) => item) 
  } 
  .blendMode(BlendMode.SRC_IN, BlendApplyType.OFFSCREEN) 
  .backgroundColor(Color.Transparent) 
  .height(32) 
} 
// 设置tabbar文字尾端显隐 
.linearGradient({ 
  angle: 90, 
  colors: [['rgba(0, 0, 0, 0)', 0], ['rgba(0, 0, 0, 1)', 0], ['rgba(0, 0, 0, 1)', 0.9], ['rgba(0, 0, 0, 0)', 1]] 
}) 
.blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)

// 自定义tabContent切换效果 
// customContentTransition 控制是否为undefined 
@State useCustomAnimation: boolean = true 
// tabContent对应内容区域缩放值 
@State tabContent0Scale: number = 1.0 
@State tabContent1Scale: number = 1.0 
@State tabContent2Scale: number = 1.0 
@State tabContent3Scale: number = 1.0 
// tabContent对应内容区域显隐值 
@State tabContent0Opacity: number = 1.0 
@State tabContent1Opacity: number = 1.0 
@State tabContent2Opacity: number = 1.0 
@State tabContent3Opacity: number = 1.0 
 
private firstTimeout: number = 1000 
private secondTimeout: number = 1000 
private first2secondDuration: number = 2000 
private second2thirdDuration: number = 2000 
private first2thirdDuration: number = 2000 
// - from:动画开始时，当前页面的index值。 
// - to:动画开始时，目标页面的index值。 
private baseCustomAnimation: (from: number, to: number) => TabContentAnimatedTransition = (from: number, to: number) => { 
  if ((from === 0 && to === 1) || (from === 1 && to === 0)|| (from === 2 && to === 3)||(from ===3 && to === 2)) { 
    // 缩放动画 
    let firstCustomTransition = { 
      timeout: this.firstTimeout, 
      transition: (proxy: TabContentTransitionProxy) => { 
        if (proxy.from === 0 && proxy.to === 1) { 
          this.tabContent0Scale = 1.0 
          this.tabContent1Scale = 0.5 
        } else { 
          this.tabContent0Scale = 0.5 
          this.tabContent1Scale = 1.0 
        } 
 
        if (proxy.from === 2 && proxy.to === 3) { 
          this.tabContent2Scale = 1.0 
          this.tabContent3Scale = 0.5 
          this.tabContent3Opacity = 1.0 
        } else { 
          this.tabContent2Scale = 0.5 
          this.tabContent3Scale = 1.0 
          this.tabContent2Opacity = 1.0 //透明度 
        } 
 
        animateTo({ 
          duration: this.first2secondDuration, 
          onFinish: () => { 
            proxy.finishTransition() 
          } 
        }, () => { 
          if (proxy.from === 0 && proxy.to === 1) { 
            this.tabContent0Scale = 0.5 
            this.tabContent1Scale = 1.0 
          } else { 
            this.tabContent0Scale = 1.0 
            this.tabContent1Scale = 0.5 
          } 
          if (proxy.from === 2 && proxy.to === 3) { 
            this.tabContent2Scale = 0.5 
            this.tabContent3Scale = 1.0 
            this.tabContent2Opacity = 1.0 //透明度 
          } else { 
            this.tabContent2Scale = 1.0 
            this.tabContent3Scale = 0.5 
          } 
        }) 
      } 
    } as TabContentAnimatedTransition; 
    return firstCustomTransition; 
 
  } else { 
    // 透明度动画 
    let secondCustomTransition = { 
      timeout: this.secondTimeout, 
      transition: (proxy: TabContentTransitionProxy) => { 
        if ((proxy.from === 1 && proxy.to === 2) || (proxy.from === 2 && proxy.to === 1)) { 
          if (proxy.from === 1 && proxy.to === 2) { 
            this.tabContent1Opacity = 1.0 
            this.tabContent2Opacity = 0.5 
          } else { 
            this.tabContent1Opacity = 0.5 
            this.tabContent2Opacity = 1.0 
            this.tabContent1Scale = 1.0 
          } 
          animateTo({ 
            duration: this.second2thirdDuration, 
            onFinish: () => { 
              proxy.finishTransition() 
            } 
          }, () => { 
            if (proxy.from === 1 && proxy.to === 2) { 
              this.tabContent1Opacity = 0.5 
              this.tabContent2Opacity = 1.0 
              this.tabContent2Scale = 1.0 
            } else { 
              this.tabContent1Opacity = 1.0 
              this.tabContent2Opacity = 0.5 
            } 
          }) 
        } else if ((proxy.from === 0 && proxy.to === 2) || (proxy.from === 2 && proxy.to === 0) || (proxy.from === 0 && proxy.to === 3) || (proxy.from === 3 && proxy.to === 0) ) { 
          if (proxy.from === 0 && proxy.to === 2) { 
            this.tabContent0Opacity = 1.0 
            this.tabContent2Opacity = 0.5 
          } else { 
            this.tabContent0Opacity = 0.5 
            this.tabContent2Opacity = 1.0 
          } 
          if (proxy.from === 0 && proxy.to === 3) { 
            this.tabContent0Opacity = 1.0 
            this.tabContent3Opacity = 0.5 
          } else { 
            this.tabContent0Opacity = 0.5 
            this.tabContent3Opacity = 1.0 
          } 
          animateTo({ 
            duration: this.first2thirdDuration, 
            onFinish: () => { 
              proxy.finishTransition() 
            } 
          }, () => { 
            if (proxy.from === 0 && proxy.to === 2) { 
              this.tabContent0Opacity = 0.5 
              this.tabContent2Opacity = 1.0 
            } else { 
              this.tabContent0Opacity = 1.0 
              this.tabContent2Opacity = 0.5 
            } 
            if (proxy.from === 0 && proxy.to === 3) { 
              this.tabContent0Opacity = 0.5 
              this.tabContent3Opacity = 1.0 
            } else { 
              this.tabContent0Opacity = 1.0 
              this.tabContent3Opacity = 0.5 
            } 
          }) 
        } 
      } 
    } as TabContentAnimatedTransition; 
    return secondCustomTransition; 
  } 
}