.NET 7 MAUI Blazor Hybrid加载背景闪白问题及解决方案咨询

场景说明 #

我有一个采用深色背景（非仅依赖系统深色模式）的.NET 7 MAUI应用，用户需登录或输入PIN码后方可使用，登录/PIN码输入页面为深色背景。登录成功后，用户将导航至包含BlazorWebView的主着陆页。

现有代码 #

初始MainLandingPage.xaml #

<BlazorWebView HostPage="wwwroot/index.html">
    <BlazorWebView.RootComponents>
        <RootComponent Selector="#menu-bar" ComponentType="{x:Type components:MenuBar}" />
        <RootComponent Selector="#app" ComponentType="{x:Type main:FormGridContainer}" x:Name="HomePageComponent" />
    </BlazorWebView.RootComponents>
</BlazorWebView>

index.html #

<body>
    <div class="status-bar-safe-area"></div>
    <div id="menu-bar">Menu Bar Here</div>
    <div id="app">Loading...</div>
    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webview.js" autostart="false"></script>
</body>

问题现象 #

所有内容加载正常，但BlazorWebView加载组件时会出现“闪白”现象：加载index.html时先显示全白屏幕，index.html加载完成后显示预期的加载状态，Blazor组件加载完成后才显示正常主页面布局。

理想状态是：在Blazor组件加载时显示深色背景的忙碌指示器，加载完成后显示BlazorWebView并隐藏指示器。

已尝试的解决方法 #

• 在BlazorWebViewInitialized事件中设置IsVisible：生命周期时机过早，无法解决问题
• 为index.html的body添加深色样式：生效时机过晚，仍会闪白
• 使用ObservableProperty绑定的IsVisible属性：WebView始终不显示，仅忙碌指示器消失
• 设置MainLandingPage.xaml各元素的背景色：仅缩短了闪白时间，未彻底解决
• 在主Blazor组件的OnAfterRender中调用MainLandingPage.xaml.cs的函数（通过ViewModel回调设置属性）：要么背景色正确但WebView不显示，要么仍存在闪白问题
• 同时设置index.html和主页面布局的背景色：仍有短暂闪白

更新1：添加ActivityIndicator后的代码 #

修改后的MainLandingPage.xaml：

<ContentPage.Resources>
    <toolkit:InvertedBoolConverter x:Key="InvertedBoolConverter" />
</ContentPage.Resources>
<ScrollView Orientation="Horizontal" BackgroundColor="#F3F5F9">
    <ActivityIndicator IsVisible="{Binding IsBusy}" IsRunning="True" />
    <BlazorWebView HostPage="wwwroot/index.html" IsVisible="{Binding IsBusy, Converter={StaticResource InvertedBoolConverter}}">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#menu-bar" ComponentType="{x:Type components:MenuBar}" />
            <RootComponent Selector="#app" ComponentType="{x:Type main:FormGridContainer}" x:Name="HomePageComponent" />
        </BlazorWebView.RootComponents>
   </BlazorWebView>
</ScrollView>

组件补充说明 #

• MenuBar Blazor组件：包含Logo、若干按钮和一个Bootstrap下拉菜单，无复杂逻辑
• FormGridContainer组件：包含左右抽屉和中间主内容，左侧抽屉有树形视图（当前仅5项），主内容显示已完成表单列表（初始安装/登录时为空），右侧抽屉为空
• FormGridContainerViewModel：处理大量表单数据获取工作，仅使用原生Blazor组件，未引入第三方组件

请问在MAUI中能否实现理想状态？

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