uni-app TRTCCloud全屏情况同享的头部会被切掉缺失

在uni-app中，使用TRTCCloud进行全屏视频通话时，如果共享的头部内容被切掉或缺失，通常是由于全屏模式下的布局问题或视图裁剪导致的。为了确保全屏模式下共享内容完整显示，你可以通过调整页面布局和样式来解决这个问题。以下是一个简单的示例，展示如何在uni-app中调整布局以避免全屏时共享内容被切掉。

1. 确保页面布局适应全屏

首先，确保你的页面布局是灵活的，能够适应全屏模式的变化。你可以使用flex布局或者vh、vw单位来确保元素在全屏时不会超出屏幕范围。

<template>
  <view class="container">
    <view class="header">Header Content</view>
    <view class="video-container">
      <!-- TRTCCloud Video View -->
      <trc-cloud-video :style="{ width: '100vw', height: '100vh' }"></trc-cloud-video>
    </view>
  </view>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.header {
  flex: 0 0 auto;
  padding: 10px;
  background-color: #fff;
  text-align: center;
  /* Ensure header is always visible, even in fullscreen */
  position: sticky;
  top: 0;
  z-index: 1000; /* Adjust as needed to ensure it's above video */
}

.video-container {
  flex: 1 1 auto;
  overflow: hidden;
}
</style>

2. 调整TRTCCloud Video View的样式

在上面的代码中，trc-cloud-video组件代表TRTCCloud的视频视图。我们将其宽度和高度设置为100vw和100vh，以确保它覆盖整个屏幕。同时，为了确保头部内容不被遮挡，我们使用了position: sticky来固定头部。

3. 处理全屏模式下的布局调整

如果全屏模式下仍有问题，你可能需要在全屏事件触发时动态调整布局。例如，监听全屏事件，并根据事件调整header和video-container的样式。

export default {
  methods: {
    onFullScreenChange(isFullScreen) {
      if (isFullScreen) {
        // Adjust styles for fullscreen mode
        this.$refs.header.style.top = '0'; // Ensure header stays at top
        this.$refs.videoContainer.style.height = 'calc(100vh - ' + this.$refs.header.offsetHeight + 'px)';
      } else {
        // Reset styles for normal mode
        this.$refs.header.style.top = '';
        this.$refs.videoContainer.style.height = '100vh';
      }
    }
  }
}

请注意，上述代码是一个基本示例，你可能需要根据实际情况进行调整。特别是，确保在组件挂载和卸载时正确设置和清理事件监听器，以避免内存泄漏。