PlayerDetailContainer.ets 1.39 KB
/**
 * 详情view&播放器view的容器布局组件
 */
@Entry
@Component
export struct PlayerDetailContainer {
  @BuilderParam playerView: () => void
  @BuilderParam playControlView: () => void
  @BuilderParam detailView: () => void
  @Consume isFullScreen: boolean

  build() {
    RelativeContainer() {
      Stack() {
        Row() {
          this.playerView()
        }
        .height('100%')
        .width('100%')
        .zIndex(0)

        Row() {
          this.playControlView()
        }
        .height('100%')
        .width('100%')
        .zIndex(1)
      }
      .width('100%')
      // .aspectRatio(this.isFullScreen ? 0.1 : 16 / 9.0) // 若width值确定,当aspectRatio值越小,则height值越大
      .height(this.isFullScreen ? '100%' : 200)
      .margin({ top: this.isFullScreen ? 0 : 174 })
      .alignRules({
        top: { anchor: '__container__', align: VerticalAlign.Top },
        // middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })
      .id('stk_player_container')

      if (!this.isFullScreen) {
        Row() {
          this.detailView()
        }
        .width('100%')
        .alignRules({
          bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
          // middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .id('row_bottomView')
      }
    }
    .width('100%')
    .height('100%')
  }
}