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); } } }
大功告成,两种主题样式如下
切换效果如下:
分类:
MAUI Blazor实战
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期