目录

前言

今天我们来拆解复刻一下HMOS代码工坊中的组件堆叠滑动折叠效果。
当然这个是有源码的，但不妨碍我们自己先思考一下，工作中遇到其他效果也能自己实现。

先看下效果图

拆解页面

页面结构

大致划分为四个部分：

1. 顶部的个人头像和扫码效果
2. 搜索框：好物精选
3. 笔记本、智慧屏、音箱
4. 分类和商品列表

动画效果

1. 搜索框好物精选模块在页面向上滑动时高度逐渐变小，最终高度固定，覆盖顶部的个人头像和扫码图标
2. 第三部分笔记本、智慧屏、音箱在上滑过程中一直处于搜索框底部，然后逐渐透明。最终替换为横向滑动的列表
3. 替换为横向滑动列表时，横向列表由透明变为不透明，列表项目间距逐渐变小
4. 在上滑过程中分类逐渐缩小，并且透明度逐渐降低，目测看起来透明度和第三部分一致。
5. 在下滑过程中上述效果反转

思路

整个页面是可以滑动的，并且在搜索框高度不再变化且固定在顶部的时候，底部分类和商品列表是可以继续滑动的。因此页面需要两个滑动组件嵌套。

1. 监听外部滑动组件的滑动事件，根据滑动距离计算搜索框高度
2. 监听内部滑动组件的滑动事件，根据滑动距离计算如下数据
   • 第三部分透明度
   • 是否将第三部分替换为横向滑动列表
   • 横向滑动列表的透明度
   • 横向滑动列表的列表项间距
   • 第四部分分类的大小和透明度
3. 向上滑动时需要覆盖顶部的第一部分，可以用Stack来布局
4. 向上滑动时，当第三部分替换为横向滑动列表之后，继续向上滑动底部第四部分的商品列表需要被横向滑动列表覆盖，这里也可以用Stack布局，层次可以用zIndex属性控制

实现

先来实现前两个部分，比较简单:
最外层是一个Stack,顶部对齐，包含一个Row和Scroll。由于Scroll只能包含一个直接子控件，添加一个Column,在这个Column中来写我们的滑动布局。
滑动时搜索框高度需要动态变化，这里我们定义一个变量表示搜索框高度。在Scroll的onScrollFrameBegin回调中计算搜索框高度值。

  build() {
    Stack({alignContent:Alignment.Top}) {
      Row(){
        Text("UserIcon")
        Blank().height(0)
        Text("Scan")
      }.width("100%").height(50).alignItems(VerticalAlign.Center).padding({left:15,right:15}).backgroundColor(Color.Green)

      Scroll(this.outSideScrollController){
        Column(){
          Row().height(this.searchAreaHeight).width("100%").borderColor(Color.Red).borderRadius(12).backgroundColor(Color.Blue)
        }.margin({top:50}).height("100%").justifyContent(FlexAlign.Start)
      }.padding({left:15,right:15}).height("100%").width("100%")
      .onScrollFrameBegin((offset:number,state:ScrollState)=>{
        let yOffset = this.outSideScrollController.currentOffset().yOffset
                //为了有一个视差效果，这里设置一个系数
        this.searchAreaHeight = 100 - yOffset * 0.6
        return {offsetRemain:offset}
      })

    }.backgroundColor("#f1f1f1")
    .height('100%')
    .width('100%')
  }

看起来效果还行，替换一下素材

这样我们就先完成了简单的前两个部分。下一篇我们继续实现接下来的部分。

---

【 更多精彩内容，请关注公众号：【名称：HarmonyOS开发者技术，ID：HarmonyOS_Dev】；也欢迎加入鸿蒙开发者交流群：https://work.weixin.qq.com/gm/48f89e7a4c10206e053e01ad124004a0】