关于blazor:MAUI-Masa-Blazor-开发界面跟随系统主题切换的App

1、装置 Masa Blazor

参考: MASA Blazor 装置

2、编写代码

新建 Service 目录，并增加ThemeService.cs

该RequestedTheme 属性返回 AppTheme 枚举成员。AppTheme 枚举定义下列成员：

Unspecified，批示设施应用的是未指定的主题。
Light，批示设施正在应用其浅色主题。
Dark，批示设施正在应用其深色主题。
设施上的零碎主题可能会因各种起因而更改，具体取决于设施的配置形式。当零碎主题更改时，能够通过解决 Application.RequestedThemeChanged 事件来告诉 .NET MAUI 利用。

namespace MauiMasaBlazorDemo.Service
{
    public class ThemeService
    {
        /// <summary>
        /// 获取以后零碎主题
        /// </summary>
        /// <returns></returns>
        public AppTheme GetAppTheme()
        {return Application.Current!.RequestedTheme;}

        /// <summary>
        /// 零碎主题切换
        /// </summary>
        /// <param name="handler"></param>
        public void ThemeChanged(EventHandler<AppThemeChangedEventArgs> handler)
        {Application.Current!.RequestedThemeChanged += handler;}
    }
}

在 Platforms / Android /MainActivity.cs 文件中 Activity的 ConfigurationChanges 须要蕴含ConfigChanges.UiMode，能力响应设施主题更改，应用 Visual Studio 我的项目模板创立的 .NET MAUI 利用会主动蕴含此标记。

[Activity(Theme = "@style/Maui.SplashTheme", 
    MainLauncher = true, 
     //Activity 须要解决的配置变动，须要蕴含在 ConfigurationChanges 中
    ConfigurationChanges = ConfigChanges.ScreenSize | 
                           ConfigChanges.Orientation | 
                           ConfigChanges.UiMode |  // 响应零碎主题变动
                           ConfigChanges.ScreenLayout | 
                           ConfigChanges.SmallestScreenSize | 
                           ConfigChanges.Density)]
public class MainActivity : MauiAppCompatActivity
{}

在MauiProgram.cs 注入服务

builder.Services.AddSingleton<ThemeService>();

批改 Shared 目录下MainLayout.razor 文件，增加一个底部导航栏，设置 Dark 属性 IsDark，Masa Blazor 的组件都能够通过Dark 属性来反对暗色主题。

@inherits LayoutComponentBase

<ErrorBoundary>
    <ChildContent>
        <MApp>
            <div style="height: calc(100vh - 56px); overflow-y: auto">
                @Body
            </div>
            <MBottomNavigation Color="indigo" Absolute @bind-Value="value" Dark="IsDark">
                <MButton>
                    <MLabel> 首页 </MLabel>
                    <MIcon>mdi-home</MIcon>
                </MButton>
                <MButton Class="mx-8">
                    <MLabel> 工作台 </MLabel>
                    <MIcon>mdi-message-outline</MIcon>
                </MButton>
                <MButton>
                    <MLabel> 我的 </MLabel>
                    <MIcon>mdi-account-outline</MIcon>
                </MButton>
            </MBottomNavigation>
        </MApp>
    </ChildContent>
</ErrorBoundary>

在 Shared 下新建MainLayout.razor.cs

using BlazorComponent;
using MauiMasaBlazorDemo.Service;
using Microsoft.AspNetCore.Components;

namespace MauiMasaBlazorDemo.Shared
{
    public partial class MainLayout
    {
        StringNumber value = 0;

        [Inject]
        // 注入主题服务
        private ThemeService ThemeService {get; set;}
       
        private bool IsDark {get; set;}

        /// <summary>
        /// 解决零碎主题切换
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void HandlerAppThemeChanged(object sender, AppThemeChangedEventArgs e)
        {
            IsDark = e.RequestedTheme == AppTheme.Dark;
            InvokeAsync(StateHasChanged);
        }
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {if (firstRender)
            {
                // 获取零碎主题
                var appTheme = ThemeService.GetAppTheme();
                // 依据零碎主题是否为 Dark，为 IsDark 属性赋值
                IsDark = appTheme == AppTheme.Dark;
                ThemeService.ThemeChanged(HandlerAppThemeChanged);
                StateHasChanged();}
            await base.OnAfterRenderAsync(firstRender);
        }
    }
}

切换成果如下：

咱们曾经实现了底部导航栏追随零碎主题切换的性能，那如何实现全局替换呢？
在 Masa Blazor 中非常简单，只须要批改MainLayout.razor，将
Dark=”IsDark” 增加到 MApp 即可

@inherits LayoutComponentBase

<ErrorBoundary>
    <ChildContent>
        <MApp Dark="IsDark"> // 全局款式
            <div style="height: calc(100vh - 56px); overflow-y: auto">
                @Body
            </div>
...
        </MApp>
    </ChildContent>
</ErrorBoundary>

咱们再看一下成果

扫码进群，理解更多
MASA Blazor 欢送你的退出