滑动页面信息隐藏与组件位移效果案例

Column() {
  Row() {...}
  .padding($r('app.integer.slidetohideanddisplace_padding_small'))
  .width($r('app.string.slidetohideanddisplace_size_full'))
  .alignItems(VerticalAlign.Center)
  Row() {...}
  .height($r('app.integer.slidetohideanddisplace_height_one_hundred'))
  .width($r('app.string.slidetohideanddisplace_size_full'))
  Scroll() {...}
}

  @State userRowOpacity: number = 1;
  @State userImageHeight: number = 50;
  ...

  build() {
    Column() {
      Row() {
        ...
        Text($r('app.string.slidetohideanddisplace_phone_number'))
          .opacity(this.userNameOpacity) // userNameOpacity控制顶部用户名的透明度
        Blank()
        Text("设置")
          .opacity(this.userNameOpacity) // 设置的文字透明度与顶部用户名相同
        Text("客服")
          .opacity(this.userNameOpacity) // 客服的文字透明度与顶部用户名相同
      }

      Row() {
        Image($r('app.media.slidetohideanddisplace_batman'))
          .width(this.userImageHeight)
          .height(this.userImageHeight) // userImageHeight控制头像尺寸
          // userImageMarginTop和userImageMarginLeft控制头像在父容器内的位置
          .margin({ top: this.userImageMarginTop, left: this.userImageMarginLeft })

        Column() {...}
        .alignItems(HorizontalAlign.Start)
        .opacity(this.userRowOpacity) // 控制Row组件的透明度
      }
      ...
    }
  }

  // 自定义构建函数，将重复使用的UI元素抽象成一个方法。此处样式为：上方图标下方文字
  @Builder
  IconAndDescription(icon: Resource, description: string | Resource, iconSize?: Size, radius?: number) {
    Column() {
      Image(icon)
        .size(iconSize === undefined ? { height: $r('app.integer.slidetohideanddisplace_icon_default_height'),
          width: $r('app.integer.slidetohideanddisplace_icon_default_height') } : iconSize)
        .borderRadius(radius)
      Text(description)
        .margin({ top: $r('app.integer.slidetohideanddisplace_margin_between_icon_and_description') })
    }
  }

  // 自定义构建函数。此处样式为：在Row组件中横向排列IconAndDescription
  @Builder
  CustomRow(iconsAndDescriptions: IconAndDescription[]) {
    Row() {
      ForEach(iconsAndDescriptions, (item: IconAndDescription) => {
        this.IconAndDescription(item.icon, item.description)
      })
    }
    .width($r('app.string.slidetohideanddisplace_size_full'))
    .justifyContent(FlexAlign.SpaceAround)
    .padding($r('app.integer.slidetohideanddisplace_padding_small'))
    .margin({ top: $r('app.integer.slidetohideanddisplace_margin_small') })
    .backgroundColor($r('app.color.slidetohideanddisplace_color_transparent_aa'))
    .borderRadius($r('app.integer.slidetohideanddisplace_border_radius'))
  }

   slidetohideanddisplace                                      // har包
   |---model
   |   |---Util.ets                         				   // 提供测试数据类     
   |---SlideToHideAndDisplace.ets                              // 滑动变化效果实现页面