MAUI Blazor学习8-支持多语言

发布时间 2023-05-26 21:52:42作者: SunnyTrudeau

MAUI Blazor学习8-支持多语言

 

MAUI Blazor系列目录

  1. MAUI Blazor学习1-移动客户端Shell布局 - SunnyTrudeau - 博客园 (cnblogs.com)
  2. MAUI Blazor学习2-创建移动客户端Razor页面 - SunnyTrudeau - 博客园 (cnblogs.com)
  3. MAUI Blazor学习3-绘制ECharts图表 - SunnyTrudeau - 博客园 (cnblogs.com)
  4. MAUI Blazor学习4-绘制BootstrapBlazor.Chart图表 - SunnyTrudeau - 博客园 (cnblogs.com)
  5. MAUI Blazor学习5-BLE低功耗蓝牙 - SunnyTrudeau - 博客园 (cnblogs.com)
  6. MAUI Blazor学习6-扫描二维码 - SunnyTrudeau - 博客园 (cnblogs.com)
  7. MAUI Blazor学习7-实现登录跳转页面 - SunnyTrudeau - 博客园 (cnblogs.com)

 

 

微软官网有Blazor项目多语言方案的详细介绍。

https://learn.microsoft.com/zh-cn/aspnet/core/blazor/globalization-localization?view=aspnetcore-7.0&pivots=server

ASP.NET Core Blazor 全球化和本地化 _ Microsoft Learn.html

 

试验发现,MAUI Blazor不支持注册服务builder.Services.AddLocalization,也不支持使用中间件app.UseRequestLocalization,所以不能使用Blazor ServerIStringLocalizer多语言方案。但是,MAUI Blazor可以使用Windows软件传统的设置语言方案:直接修改CultureInfo.CurrentCulture

 

创建语言帮助类

LangHelper主要功能包括读写语言配置,设置软件当前的语言。

D:\Software\gitee\mauiblazorapp\MaBlaApp\Data\LangHelper.cs

 

/// <summary>
/// 语言帮助类
/// </summary>
public static class LangHelper
{
    /// <summary>
    /// 软件当前的语言
    /// </summary>
    public static string CurrentLang
    {
        get => Preferences.Get(nameof(CurrentLang), "en-US");
        set => Preferences.Set(nameof(CurrentLang), value);
    }

    /// <summary>
    /// 软件支持的语言
    /// </summary>
    public static string[] SupportLangs = new string[] { "en-US", "zh-CN", };

    /// <summary>
    /// 设置软件语言
    /// </summary>
    public static void SetCurrentLang(string lang)
    {
        var cultureInfo = new CultureInfo(lang);

        //影响razor页面字符串
        CultureInfo.CurrentCulture = cultureInfo;

        //影响类库字符串
        CultureInfo.CurrentUICulture = cultureInfo;

        System.Diagnostics.Debug.WriteLine($"{DateTimeOffset.Now}, 设置软件语言{lang}");
    }
}

 

 

增加语言字符串文件

在项目的Resources目录下再新建Langs目录,新建默认语言字符串文件AppRes.resx文件名随意,但是文件名不能含有语言类型。添加几个英文字符串。访问修饰符选择Public,它会自动生成每个语言字符串的静态变量。

D:\Software\gitee\mauiblazorapp\MaBlaApp\Resources\Langs\AppRes.resx

然后新建中文语言字符串文件AppRes.zh-CN.resx,文件名跟默认语言字符串文件相比,多了中间的zh-CN语言类型。访问修饰符选择无代码生成。

 

使用语言字符串

_Imports.razor添加对语言字符串命名空间的全局引用

D:\Software\gitee\mauiblazorapp\MaBlaApp\_Imports.razor

@using Resources.Langs

 

在项目中可以直接@AppRes.xxx的方式使用语言字符串。

D:\Software\gitee\mauiblazorapp\MaBlaApp\Shared\NavMenu.razor

                <span class="navbarApp-linkLabel">@AppRes.Home</span>

                <span class="navbarApp-linkLabel">@AppRes.Chart</span>

                <span class="navbarApp-linkLabel">@AppRes.Todo</span>

 

增加选择语言UI

在主页增加一个菜单,可以打开选择语言页面

D:\Software\gitee\mauiblazorapp\MaBlaApp\Pages\Index.razor

<li class="list-group-item">

        <a href="selectlang" class="btn btn-primary btn-sm">@AppRes.SelectLang</a>

    </li>

 

增加选择语言页面,显示当前CurrentCulture,通过select组件选择语言后,保存到Preferences

D:\Software\gitee\mauiblazorapp\MaBlaApp\Pages\SelectLang.razor

 

@page "/selectlang"
@using System.Globalization

<h3>设置语言(重启APP生效)</h3>

<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between mb-1">
        <strong>CurrentCulture</strong>
        <small>@CultureInfo.CurrentCulture</small>
    </li>
    <li class="list-group-item d-flex justify-content-between mb-1">
        <strong>CurrentUICulture</strong>
        <small>@CultureInfo.CurrentUICulture</small>
    </li>

    <li class="list-group-item d-flex justify-content-between mb-1">
        <strong class="align-self-center">@AppRes.SelectLang</strong>
        <select class="form-control" style="width: 50%;" @bind="LangHelper.CurrentLang">
            @foreach (var item in LangHelper.SupportLangs)
            {
                <option value=@item>@item</option>
            }
        </select>
    </li>
</ul>

 

软件启动时设置语言

MauiProgramCreateMauiApp()函数最后面设置软件的当前语言。在初始化阶段其他位置设置语言可能也行,没试。

D:\Software\gitee\mauiblazorapp\MaBlaApp\MauiProgram.cs

//设置软件语言

        LangHelper.SetCurrentLang(LangHelper.CurrentLang);

 

        return builder.Build();

 

测试选择语言

首次运行导航栏菜单是英文的语言字符串。

选择中文语言后,重启软件,导航栏菜单引用语言字符串的文本,显示为中文了。

 

问题

目前这个方案改变语言需要重启软件。在运行时改变语言,页面字符串并不会改变。如果需要运行时动态切换语言字符串,可以参考这个文章,使用I18nText方案。

MAUI 第四天 使用MASA Blazor 中英文切换_为风而战的博客-CSDN博客

 

DEMO代码地址:https://gitee.com/woodsun/mauiblazorapp