鸿蒙视频窗体播放界面分屏显示变形

在鸿蒙（HarmonyOS）开发中，实现视频播放界面分屏显示时出现变形（如拉伸、压缩或布局错乱），通常与布局适配、窗口尺寸变化处理或视频渲染模式有关。以下是详细的解决方案和代码示例：

---

1. 原因分析

• 分屏模式窗口尺寸变化：分屏时窗口尺寸动态调整，未正确监听或适配新尺寸。
• 视频宽高比未锁定：视频播放组件未固定宽高比，导致拉伸变形。
• 布局约束缺失：XML布局未使用自适应约束（如百分比布局、权重分配）。

---

2. 解决方案

2.1 使用自适应布局

在XML布局中，确保视频容器（如VideoComponent）使用自适应约束：

<!-- 示例：基于DependentLayout的百分比布局 -->
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent">

    <VideoComponent
        ohos:id="$+id:video_player"
        ohos:width="match_parent"
        ohos:height="0vp"  <!-- 动态高度 -->
        ohos:aspect_ratio="16:9"  <!-- 固定视频宽高比 -->
        ohos:top_margin="20vp"
        ohos:bottom_margin="20vp"
        ohos:scale_mode="zoom_crop"  <!-- 缩放模式：裁剪填充 -->
        />
</DependentLayout>

2.2 监听窗口尺寸变化

在AbilitySlice中监听窗口变化事件，动态调整布局：

public class VideoSlice extends AbilitySlice {
    private VideoComponent videoPlayer;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        setUIContent(ResourceTable.Layout_video_layout);

        videoPlayer = (VideoComponent) findComponentById(ResourceTable.Id_video_player);
        videoPlayer.setVideoSource(/* 设置视频源 */);

        // 注册窗口尺寸变化监听
        getWindow().setWindowStateChangedListener(new Window.WindowStateChangedListener() {
            @Override
            public void onWindowSizeChanged(int width, int height) {
                // 动态调整视频容器尺寸
                adjustVideoLayout(width, height);
            }
        });
    }

    // 动态调整视频尺寸
    private void adjustVideoLayout(int windowWidth, int windowHeight) {
        Component videoContainer = findComponentById(ResourceTable.Id_video_container);
        LayoutConfig config = videoContainer.getLayoutConfig();
        
        // 根据窗口高度计算视频高度（保持16:9宽高比）
        int videoHeight = (int) (windowWidth * 9.0 / 16);
        config.height = videoHeight;
        videoContainer.setLayoutConfig(config);
    }
}

2.3 固定视频宽高比

在代码中强制锁定视频宽高比，避免拉伸：

videoPlayer.setAspectRatio(16, 9); // 设置宽高比为16:9
videoPlayer.setScaleMode(VideoComponent.ScaleMode.ASPECT_FIT); // 缩放模式：保持比例填充黑边

2.4 分屏模式兼容性配置

在config.json中声明支持分屏模式：

{
  "module": {
    "abilities": [
      {
        "name": ".VideoAbility",
        "supportMultiWindow": true,  // 启用分屏支持
        "launchType": "standard"
      }
    ]
  }
}

---

3. 关键点总结

问题类型	解决方案
布局拉伸	使用百分比布局（如DependentLayout）和动态权重分配。
视频比例失调	设置aspect_ratio和scale_mode（如ASPECT_FIT或ZOOM_CROP）。
窗口尺寸未监听	通过WindowStateChangedListener实时调整UI。
分屏闪退/黑屏	检查分屏模式支持配置（supportMultiWindow: true）。

---

4. 验证与调试

1. 模拟分屏场景：使用DevEco Studio的模拟器测试不同分屏比例。
2. 日志输出：在onWindowSizeChanged中打印窗口尺寸，确认回调触发。
3. UI边界测试：测试极端分屏比例（如1:3或3:1）下的视频显示效果。

---

5. 扩展优化

• 手势交互：支持拖动分屏边界时实时调整布局。
• 多分辨率适配：针对不同设备分辨率提供多套布局文件。
• 性能优化：避免频繁重绘，使用硬件加速渲染视频。

通过以上方法，可有效解决鸿蒙分屏模式下视频播放界面变形问题。若需进一步代码示例或调试细节，可参考华为官方文档：HarmonyOS多窗口开发指南。