MAUI Blazor 加载时混合背景颜色

Question

我有一个 .NET 7 MAUI 应用程序，它具有深色背景（不仅在深色模式下）。我们要求用户登录或锁定才能使用该应用程序，并且登录/锁定输入页面具有深色背景。成功后，我们会将其导航至主登陆页面。主登陆页面是带有 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 的正文添加样式（在生命周期中太晚），使用 ObservableProperty 支持值的 IsVisible 属性（没有显示 BlazorWebView，繁忙指示器消失），设置各种 MainLandingPage.xaml 元素的背景颜色（仅延迟或缩短白色闪烁）和主 blazor 组件的 OnAfterRender（调用 MainLandingPage.xaml.cs 上的函数，通过视图模型中的回调设置属性）。所有场景的两种结果要么是没有网页视图的正确颜色背景，要么是白色闪光。

最接近的是当我在index.html 和MainPageLayout 中设置背景颜色时。结果就是白闪不长。

这在毛伊岛可能吗？

更新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 组件中，没有什么花哨的。一个徽标、几个按钮和一个引导下拉菜单。

在FormGridContainer组件中，有相当多的东西。它有一个左侧和右侧抽屉，主要内容位于中间。左侧抽屉有一个树形视图，目前树形视图中只有 5 个东西。主要内容是，我们得到已完成的表单列表，但在初始安装/登录时，这是空白的，右侧抽屉是空的。我们做了相当多的工作来获取 FormGridContainerViewModel 中的所有表单数据。我们没有使用任何第三方 blazor 组件。只是开箱即用的东西。

Answer 1

在这里提出了同样的问题。布鲁斯的回答引导我走上了正确的道路。由于我在 xaml 中使用 BlazorWebView，因此我最终在 xaml.cs 文件中使用以下代码：

BlazorWebViewHandler.BlazorWebViewMapper.AppendToMapping("MyBlazorCustomization", (handler, view) =>  {
    #if IOS
        handler.PlatformView.Opaque = false;
        handler.PlatformView.BackgroundColor = UIKit.UIColor.Clear;
    #elif WINDOWS
        handler.PlatformView.Opacity = 0;
        handler.PlatformView.DefaultBackgroundColor = new Windows.UI.Color() { A = 0, R = 0, G = 0, B = 0 };
    #endif
    });

MAUI Blazor 加载时混合背景颜色

问题描述投票：0回答：1

1个回答

最新问题

MAUI Blazor 加载时混合背景颜色

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1