Xamarin Forms Shell下实现全局悬浮视频视图免每页重连的方案咨询

实现结论 #

可以实现该需求，悬浮视频视图完全可以做到独立于Shell页面导航存在，页面切换时既不会重绘视频视图，也不需要重新建立视频连接。

具体开发思路 #

1. 架构层解耦视频逻辑与页面逻辑

• 将视频推拉流、连接维护的逻辑完全抽离为全局单例服务IVideoCallService，该服务的生命周期与App进程一致，和任意页面的生命周期解绑，从根源避免页面切换导致的连接中断。
• 单独封装FloatingVideoView自定义控件，作为视频流的UI承载层，内部仅处理视频渲染、拖拽调整、最小化/全屏切换等UI逻辑，所有状态从上述全局单例服务获取。

2. 根视图层级改造（核心实现逻辑）

Xamarin Forms的Shell导航本质是在Shell实例内部管理页面栈，我们只需要将悬浮视频视图放到比Shell层级更高的根视图即可：

• App启动时不要直接将Shell设置为MainPage，而是先创建一个根级布局容器（推荐用AbsoluteLayout便于自由控制子元素位置）。
• 先将Shell实例作为底层元素添加到根布局中，设置填充全屏幕的布局约束。
• 再将FloatingVideoView作为顶层元素添加到根布局中，设置默认的位置、大小约束，比如固定在右下角。
• 最后将承载了这两个元素的根布局设置为MainPage的Content即可。

3. Shell导航兼容与状态控制

• Shell原有的所有页面跳转逻辑无需做任何修改，所有页面的加载、转场都在底层Shell内部完成，完全不会触及顶层的悬浮视频视图。
• 可通过全局视频服务的状态控制悬浮视图的显隐：视频呼入/接通时将FloatingVideoView的IsVisible设为true，通话挂断后设为false即可。

4. 平台端渲染优化

• 安卓端：如果使用原生视频渲染控件SurfaceView/TextureView，可在自定义渲染器中设置ZOrderOnTop = true，避免被软键盘、弹窗等系统/自定义控件遮挡。
• iOS端：视频渲染用AVPlayerLayer时，可将其挂载到根UIWindow的最上层，避免Shell页面转场动画触发图层重绘导致的画面闪烁。

核心代码示例 #

public partial class App : Application
{
    // 全局视频服务单例
    public static IVideoCallService VideoCallService { get; private set; }

    public App()
    {
        InitializeComponent();
        VideoCallService = new VideoCallServiceImpl();

        // 构建根层级布局
        var rootContainer = new AbsoluteLayout();

        // 加入Shell底层内容，占满全屏
        var appShell = new AppShell();
        AbsoluteLayout.SetLayoutFlags(appShell, AbsoluteLayoutFlags.All);
        AbsoluteLayout.SetLayoutBounds(appShell, new Rectangle(0, 0, 1, 1));
        rootContainer.Children.Add(appShell);

        // 加入顶层悬浮视频视图，默认放置在右下角
        var floatingVideoView = new FloatingVideoView();
        AbsoluteLayout.SetLayoutFlags(floatingVideoView, AbsoluteLayoutFlags.PositionProportional);
        AbsoluteLayout.SetLayoutBounds(floatingVideoView, new Rectangle(0.95, 0.95, 150, 200));
        rootContainer.Children.Add(floatingVideoView);

        // 设置根页面
        MainPage = new ContentPage { Content = rootContainer };
    }
}

内容的提问来源于stack exchange，提问作者DavidReid