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

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

切换效果如下:

posted @   sunday866  阅读(259)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
点击右上角即可分享
微信分享提示