HarmonyOS鸿蒙Next中像天气这种滑动时候顶部圆角不动，等整个子项划出屏幕再消失是怎么实现的

HarmonyOS鸿蒙Next中像天气这种滑动时候顶部圆角不动，等整个子项划出屏幕再消失是怎么实现的 滑动时候包括这种两个的，都是顶部圆角等子项划完再消失，是如何实现的，有现成的属性可以直接使用吗


更多关于HarmonyOS鸿蒙Next中像天气这种滑动时候顶部圆角不动，等整个子项划出屏幕再消失是怎么实现的的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

图片 图片

子布局设置.clip(RectShape().radius(20).offset())配合动态高度计算倒是可以实现，就是有点麻烦，简单点直接父布局设置.clip(true).borderRadius(20)可以保证大卡片有类似效果

更多关于HarmonyOS鸿蒙Next中像天气这种滑动时候顶部圆角不动，等整个子项划出屏幕再消失是怎么实现的的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


1.在滚动的外层容器的顶部增加圆角效果
cke_1135.png

2.增加属性clip，当子容器超过后会有切割效果

形状裁剪-视效与模糊-通用属性-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

通过List组件的onScroll事件监听滚动偏移量，结合条件渲染控制顶部圆角的显隐逻辑。当最后一个列表项完全离开屏幕时触发状态变化。然后使用Stack布局将圆角元素作为覆盖层独立于列表内容，通过zIndex属性确保其始终显示在顶部。

@Entry
@Component
struct ListExample {
  @State showTopRadius: boolean = true
  @State lastItemVisible: boolean = true

  build() {
    Stack() {
      List({ space: 10 }) {
        LazyForEach(this.dataSource, (item: Item) => {
          ListItem() {
            // 列表项内容
          }
          .onAppear(() => {
            // 判断是否为最后一个元素
            if (item.isLast) this.lastItemVisible = true
          })
          .onDisappear(() => {
            if (item.isLast) this.lastItemVisible = false
          })
        })
      }
      .onScroll((scrollOffset: number) => {
        // 根据滚动偏移量和最后元素可见性更新状态
        if (scrollOffset > 0 && !this.lastItemVisible) {
          this.showTopRadius = false
        } else {
          this.showTopRadius = true
        }
      })
      // 顶部圆角覆盖层
      if (this.showTopRadius) {
        Rectangle()
          .width('100%')
          .height(10)
          .radius({ topLeft: 12, topRight: 12 })
          .fill(Color.White)
          .zIndex(2)
      }
    }
  }
}

虽然我没研究明白，但应该是通过滚动组件通用接口实现的，这个 clipContent

使用RectShape时需要实例化

在HarmonyOS Next中，该效果通过Scroll组件与@State装饰器结合实现。使用Scroll的onScroll事件监听滚动位置，动态计算子项位置。当子项未完全移出屏幕时，通过clip属性保持顶部圆角；完全移出后，修改状态触发消失。关键代码涉及滚动位置判断与组件属性绑定。

在HarmonyOS Next中，实现滑动时顶部圆角保持，直到子项完全划出屏幕再消失的效果，通常是通过自定义Scroll或List组件的clip属性与子项布局的配合来实现的。系统没有直接提供“圆角延迟消失”的现成属性，但可以通过以下方式实现：

  1. 使用Scroll或List组件：作为滚动容器，设置其clip属性为false，允许内容溢出容器边界，避免圆角在滑动时被裁剪。

    Scroll() {
  // 子项内容
}
.clip(false) // 禁用裁剪，使圆角在滑动时可见

  2. 自定义子项布局：在每个子项顶部添加圆角背景（例如使用Column或Stack配合borderRadius），并确保子项高度足够，使得滑动时圆角能持续显示，直到子项完全移出屏幕。

  3. 结合zIndex或层叠布局：通过Stack组件将圆角部分固定在上层，监听滚动位置，动态控制圆角的可见性（例如使用opacity属性），当子项完全划出时隐藏圆角。

示例代码结构：

Scroll() {
  Column() {
    // 子项内容，每个子项包含圆角背景
  }
}
.clip(false)

这种方法需要手动调整布局和滚动逻辑，以实现平滑的圆角消失效果。

回到顶部