HarmonyOS里怎么实现CoordinateLayout的效果

@Entry 
@Component 
struct Index { 
  private outScroller: Scroller = new Scroller(); 
  private tabController: TabsController = new TabsController(); 
  @State arr: number[] = []; 
  @State currentOffset: number = 0; 
  @State isPlay: boolean = true 
  @State videoSrc: Resource = $rawfile('video1.mp4') 
  @State previewUri: Resource = $r('app.media.startIcon') 
  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X 
  @State isAutoPlay: boolean = false 
  @State showControls: boolean = true 
  controller: VideoController = new VideoController() 
 
  aboutToAppear() { 
    for (let i = 0; i < 30; i++) { 
      this.arr.push(i) 
    } 
  } 
 
  @Styles 
  listCard() { 
    .backgroundColor(Color.White) 
    .height(72) 
    .width("100%") 
    .borderRadius(12) 
  } 
 
  build() { 
    Column() { 
      Scroll(this.outScroller) { 
        Column() { 
          Video({ 
            src: this.videoSrc, 
            previewUri: this.previewUri, 
            currentProgressRate: this.curRate, 
            controller: this.controller 
          }) 
            .height("20%") 
            .width('100%') 
            .autoPlay(this.isAutoPlay) 
            .controls(this.showControls) 
            .onStart(() => { 
              this.isPlay = true 
              console.info('onStart') 
            }) 
            .onPause(() => { 
              this.isPlay = false 
              console.info('onPause') 
            }) 
 
          Tabs({ barPosition: BarPosition.Start, controller: this.tabController }) { 
            TabContent() { 
              Column() { 
                List({ space: 10 }) { 
                  ForEach(this.arr, (item: number) => { 
                    ListItem() { 
                      Text("item" + item) 
                        .fontSize(16) 
                    }.listCard() 
                  }, (item: number) => item.toString()) 
                }.width("100%") 
                // 
                .scrollBar(BarState.Off) // 滚动条不显示 
                .edgeEffect(EdgeEffect.None) //Scroll嵌套List滚动时，List组件的edgeEffect属性需设置为EdgeEffect.None。 
                .nestedScroll({ 
                  scrollForward: NestedScrollMode.PARENT_FIRST, 
                  scrollBackward: NestedScrollMode.SELF_FIRST 
                }) 
              }.width('100%').height('100%').backgroundColor('#00CB87') 
            }.tabBar("简介") 
 
            TabContent() { 
              Column().width('100%').height('100%').backgroundColor('#007DFF') 
            }.tabBar("评论") 
          } 
          .vertical(false) 
          .height(this.isPlay ? "80%" : "92%") // 后期视频隐藏的时候保留高度8% 
        }.width("100%") 
      } 
      .backgroundColor('#DCDCDC') 
      .scrollBar(BarState.Off) 
      .width('100%') 
      .height('100%') 
    } 
    .width('100%').height('100%') 
  } 
}