HarmonyOS里怎么实现CoordinateLayout的效果

使用Scroll组件实现播放视频时,滑动下方推荐视频列表,视频正常播放大小不变;暂停视频时,滑动下方推荐列表,视频缩小至最小高度,下方推荐向上方移动。

HarmonyOS
2024-05-26 12:38:55
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
elucky

使用的核心API

Scroll

核心代码解释

Scroll组件为可滚动的容器组件,当子组件的布局尺寸超过父组件的尺寸时,内容可以滚动,可滚动组件往末尾端滚动时父组件先滚动,父组件滚动到边缘以后自身滚动。自身滚动到边缘后,如果有边缘效果,会触发自身的边缘效果,否则触发父组件的边缘效果。可滚动组件往起始端滚动时,自身先滚动,自身滚动到边缘以后父组件滚动。父组件滚动到边缘以后,如果父组件有边缘效果,则父组件触发边缘效果,否则子组件触发边缘效果。

@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%') 
  } 
}
分享
微博
QQ
微信
回复
2024-05-27 16:21:23
相关问题
应用怎么实现半模态效果
897浏览 • 1回复 待解决
鸿蒙中怎么实现动画翻转效果
8997浏览 • 2回复 待解决
Text实现scroll效果怎么弄?
4139浏览 • 1回复 待解决
如何实现按钮点击效果
39浏览 • 2回复 待解决
如何实现类似keyframes效果
866浏览 • 1回复 待解决
如何实现组件阴影效果
392浏览 • 1回复 待解决
PopWindow效果实现有哪些?
324浏览 • 1回复 待解决
如何实现列表页单选效果
1109浏览 • 0回复 待解决
是否可以实现滚动锚定效果
440浏览 • 1回复 待解决
如何实现通用吸顶效果
212浏览 • 1回复 待解决
canvas如何实现水印效果
420浏览 • 1回复 待解决
如何实现星级评分效果
80浏览 • 1回复 待解决
滑动组件如何实现单边spring效果
547浏览 • 1回复 待解决
如何实现图片大图预览效果
555浏览 • 1回复 待解决
引导遮罩效果实现最佳方案
361浏览 • 1回复 待解决
Navigation实现Tabs切换效果
544浏览 • 1回复 待解决
实现层叠广告滑动效果
415浏览 • 1回复 待解决
如何实现动画转场效果
406浏览 • 1回复 待解决
如何实现视频滤镜效果
817浏览 • 1回复 待解决
长按实现各类振动效果
383浏览 • 1回复 待解决