MAUI Blazor 实战：开发界面跟随系统主题切换的App

​

1、安装Masa Blazor

参考：MASA Blazor https://blazor.masastack.com/getting-started/installation

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;
        }
    }
}

在 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);
        }
    }
}

大功告成，两种主题样式如下

切换效果如下：

​