乐趣区

关于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 文件中 ActivityConfigurationChanges 须要蕴含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 欢送你的退出

退出移动版