HarmonyOS 鸿蒙Next实现折叠工具栏效果

HarmonyOS 鸿蒙Next实现折叠工具栏效果

CollapsingToolbar

![CollapsingToolbar animation]

ohpm install @jackiehou/collapsing-toolbar

import { CollapsingToolbar, CollapsingToolbarState } from '@jackiehou/collapsing-toolbar'

@State collapsingState: CollapsingToolbarState = new CollapsingToolbarState()

build() {
  Column() {
    CollapsingToolbar({
        collapseLength:this.param.collapseHeight,//收起来的高度,可以为0
        expandLength:this.param.expandHeight,//展开的高度，必须大于0
        state:this.collapsingState,//折叠的状态
        header: this.header,//顶部可折叠的内容
        content: this.content,//您的内容，如list等
      })
  }.height('100%')
  .width('100%')
}

@LocalBuilder //组件内部@Builder 建议使用@LocalBuilder，不然会碰到this指向的问题
header() {
   //...
}

@LocalBuilder 
content() {
  //...
}

import {
  CollapsingToolbar,
  CollapsingToolbarState,
  lerp,
  lerpColor, lerpPercentage } from '@jackiehou/collapsing-toolbar'

@LocalBuilder
header() { //header的父组件是Stack，其alignContent属性为TopStart
  //header背景色
  Rect({ width: '100%', height: '100%' })
    .fill(this.expandBgColor)
    .opacity(this.collapsingState.progress) //折叠状态透明，展开状态显示
  //返回按钮
  SymbolGlyph($r('sys.symbol.chevron_left'))
    .renderingStrategy(SymbolRenderingStrategy.SINGLE)
    .fontSize(30)
    .fontWeight(FontWeight.Medium)
    .height(this.collapsingState.collapseHeight > 0 ? this.collapsingState.collapseHeight : 56)
    .align(Alignment.Center)
    .margin({ left: 15, })
    .translate({ y: this.collapsingState.yOffset })//pin效果，组件的y轴位置不随CollapsingToolbar滑动而变化
      /**
       *颜色插值器
       * lerpColor方法第一个参数colorStart：CollapsingToolbar完全折叠状态下的颜色
       * lerpColor方法第一个参数colorEnd：CollapsingToolbar完全展开状态下的颜色
       * lerpColor方法第三个参数this.collapsingState.progress：0到1的小数，0：CollapsingToolbar完全折叠状态，1：CollapsingToolbar完全展开状态
       */
    .fontColor([lerpColor(this.collapseFontColor, this.expandFontColor, this.collapsingState.progress)])
    .onClick(() => {
      router.back()
    })
  //标题
  Text('CollapsingToolbar')
    .height(this.collapsingState.collapseHeight > 0 ? this.collapsingState.collapseHeight : 56)
    .textAlign(TextAlign.Center)
    .margin({
      //collapse状态： 居左40vp，
      //expand状态：   左边距居中
      left: this.collapsingState.lerpX(40, '50%'),
      //collapse状态： top：折叠状态工具栏到顶部的距离，
      //expand状态：   上边距居中
      top: this.collapsingState.lerpY(this.collapsingState.maxOffset, '50%'),
    })
    .translate({
      //collapse状态： 不位移，
      //expand状态：   加上margin的expand状态 整体居中
      x: lerpPercentage('0%', '-50%', this.collapsingState.progress),
      y: lerpPercentage('0%', '-50%', this.collapsingState.progress),
    })
    .fontSize(lerp(16, 22, this.collapsingState.progress))
    .maxLines(1)
    .fontWeight(FontWeight.Medium)
    .fontColor(lerpColor(this.collapseFontColor, this.expandFontColor, this.collapsingState.progress))//fontColor颜色插值器

  SymbolGlyph($r('sys.symbol.heart'))
    .renderingStrategy(SymbolRenderingStrategy.SINGLE)
    .fontSize(25)
    .fontWeight(FontWeight.Medium)
    .height(this.collapsingState.collapseHeight > 0 ? this.collapsingState.collapseHeight : 56)
    .align(Alignment.Center)
    .position({ right: 0, bottom: 0 })//修改当前子组件在Stack的align，等同于BottomEnd
    .margin({ right: 15 })
    .fontColor([lerpColor(this.collapseFontColor, this.expandFontColor, this.collapsingState.progress)])//fontColor颜色插值器
}

List() {
  //...
}
.nestedScroll({
  scrollForward: NestedScrollMode.PARENT_FIRST,
  scrollBackward: NestedScrollMode.SELF_FIRST
})

import { CollapsingToolbarStateV2, CollapsingToolbarV2 } from '@jackiehou/collapsing-toolbar'

//折叠的状态
collapsingState: CollapsingToolbarStateV2 = new CollapsingToolbarStateV2()

CollapsingToolbarV2({
    collapseLength:this.param.collapseHeight,//收起来的高度,可以为0
    expandLength:this.param.expandHeight,//展开的高度，必须大于0
    state:this.collapsingState,//折叠的状态
    header: this.header,//顶部可折叠的内容
    content: this.content,//您的内容，如list等
  })

Refresh({refreshing:$$this.isRefresh}) {
  List({ space: 10 }) {
    //...
  }.width("100%").height("100%")
   .nestedScroll({
    scrollForward: NestedScrollMode.PARENT_FIRST,
    scrollBackward: NestedScrollMode.SELF_FIRST
  })
  .onGestureRecognizerJudgeBegin((event: BaseGestureEvent, current: GestureRecognizer,
    _: Array<GestureRecognizer>): GestureJudgeResult => {
    console.info('ets onGestureRecognizerJudgeBegin child')
    if (current) {
      let target = current.getEventTargetInfo();
      Logger.debug(`type = ${current.getType()} isBuiltIn = ${current.isBuiltIn()}`)
      if (target && current.isBuiltIn() && current.getType() == GestureControl.GestureType.PAN_GESTURE) {
        let panEvent = event as PanGestureEvent;
        Logger.debug(JSON.stringify(panEvent))
        if(this.collapsingState.progress === ToolBarState.Expanded.valueOf() && panEvent.velocityY > 0){
          return GestureJudgeResult.REJECT;
        }
      }
    }
    return GestureJudgeResult.CONTINUE;
  })
}

Refresh+CollapsingToolbar 示例

![Refresh+CollapsingToolbar animation]

最后完整栗子

[https://gitee.com/jackiehou/collapsing-toolbar]