HarmonyOS 鸿蒙Next如何实现点击水波纹效果

想实现点击水波纹效果，我的需求水波纹怎么在单独一行中显示，超出的部分不显示，一下代码 点击按钮水波纹 下部超出的被遮挡了，但是上边的超出部分还是显示出来了，怎么处理 

import ToastUtil from '…/util/ToastUtil’
import { Scale } from '@kit.ArkUI’
import { CommonConstants } from ‘…/constants/CommonConstants’

@Entry
@Component
struct Test {
  @State immediatelyScale: Scale = { x: 1, y: 1 };
  @State r: number = 0

  build() {
    Column() {
      Blank().width(“100%”).height($r(‘app.float.vp_200’)).backgroundColor($r(‘app.color.color_CC3939’))
      Row() {
        RelativeContainer() {
          Row() {
            Text()
              .width($r(‘app.float.vp_40’))
              .height($r(‘app.float.vp_40’))
              .backgroundColor($r(‘app.color.color_00acff’))
              .borderRadius(20)
              .scale(this.immediatelyScale)
            Text()
              .width($r(‘app.float.vp_40’))
              .height($r(‘app.float.vp_40’))
              .backgroundColor($r(‘app.color.color_00acff’))
              .borderRadius(20)
              .scale(this.immediatelyScale)
            Text()
              .width($r(‘app.float.vp_40’))
              .height($r(‘app.float.vp_40’))
              .backgroundColor($r(‘app.color.color_00acff’))
              .borderRadius(20)
              .scale(this.immediatelyScale)
          }
          .width(“100%”)
          .height($r(‘app.float.vp_40’))
          .padding({ left: $r(‘app.float.vp_82’), right: $r(‘app.float.vp_82’) })
          .justifyContent(FlexAlign.SpaceBetween)

          Row() {
            Image($r(‘app.media.video_play_menu_icon’))
              .width($r(‘app.float.vp_40’))
              .height($r(‘app.float.vp_40’))
              .padding($r(‘app.float.vp_10’))
              .onClick(() => {
                ToastUtil.showToast(“video_play_menu_icon”)
                animateTo({
                  duration: 1000,
                  iterations: 1,
                  curve: Curve.FastOutSlowIn,
                  onFinish: () => {
                    this.immediatelyScale = { x: 1, y: 1 }
                  }
                }, () => {
                  this.immediatelyScale = { x: 2, y: 2 };
                })
              })
            Image($r(‘app.media.video_play_home_icon’))
              .width($r(‘app.float.vp_40’))
              .height($r(‘app.float.vp_40’))
              .padding($r(‘app.float.vp_10’))
              .onClick(() => {
                ToastUtil.showToast(“video_play_home_icon”)
              })
            Image($r(‘app.media.video_play_back_icon’))
              .width($r(‘app.float.vp_40’))
              .height($r(‘app.float.vp_40’))
              .padding($r(‘app.float.vp_10’))
              .onClick(() => {
                ToastUtil.showToast(“video_play_back_icon”)
              })
          }
          .width(“100%”)
          .height($r(‘app.float.vp_40’))
          .padding({ left: $r(‘app.float.vp_82’), right: $r(‘app.float.vp_82’) })
          .justifyContent(FlexAlign.SpaceBetween)
        }.width(“100%”).height($r(‘app.float.vp_40’))
      }.width(“100%”).height($r(‘app.float.vp_40’)).backgroundColor($r(‘app.color.color_1E222B’))

      Blank().width(“100%”).height($r(‘app.float.vp_200’)).backgroundColor($r(‘app.color.color_CC3939’))
    }.width(“100%”).height(“100%”)
  }
}