MAUI Blazor 语言设置国际化 电脑版发表于:2023/3/20 15:40 ![](https://img.tnblog.net/arcimg/hb/a6fadc92495e44eab5dfda84fb6477f7.png) >#MAUI Blazor 语言设置国际化 [TOC] I18nText 前言 ------------ tn2>这个软件包是在Blazor Web应用程序中本地化文本的另一种方式! 特性 ------------ - Blazor 服务器和 WebAssembly 都受支持。 - 在 Blazor Wasm 中,它甚至可以在静态 Web 主机上运行。(不需要 ASP.NET Core 主机) - 只需要纯文本编辑器 - 不需要 .resx - 静态类型 - IntelliSense、代码提示… - 它支持 Blazor 组件库。你可以创建使用`Blazor I18nText`本地化的库的 NuGet 包。 新建MauiLearningBlazorApp项目 ------------ tn2>选择MAUI Blazor以及7.0的框架版本 ![](https://img.tnblog.net/arcimg/hb/c93c59b3695549bca577812cd27d596b.png) ![](https://img.tnblog.net/arcimg/hb/077888f2fbc849f8a990f77528e19fb2.png) ![](https://img.tnblog.net/arcimg/hb/ab4eaf6574744fb186aaef7b4371f328.png) tn2>首先安装相关包`Toolbelt.Blazor.I18nText`。 ![](https://img.tnblog.net/arcimg/hb/ba751c5f2ed24b00b3fb2236baab0505.png) tn2>在`MauiProgram.cs`中添加相关依赖服务。 ```csharp builder.Services.AddI18nText(); ``` 添加不同的语言 ------------ tn2>首先创建一个`i18ntext`的文件夹,并在该目录下创建三个不同语言的`json`语言,这里我以中文、英语、意大利语举例,分别对应的是`language.cn.json`、`language.en.json`与`language.it.json`。 ![](https://img.tnblog.net/arcimg/hb/4790a3daef2e4e10969b67e6bf407951.png) ```json { "HelloWord": "你好,世界!" } ``` ```json { "HelloWord": "Hello,World!en" } ``` ```json { "HelloWord": "Ciao, parola" } ``` tn>除了`json`还可以通过`csv`的方式。举个例子: ```bash Key1,Localized text 1 ``` tn>本地化文本源文件的命名规则必须如下: ```bash <Text Table Name>.<Language Code>.{json|csv} ``` tn2>然后通过`_imports.razor`设置全局引用命名空间。 ```csharp @using Toolbelt.Blazor.I18nText @using MauiLearningBlazorApp.I18nText ``` tn2>然后我们修改`index.razor`网页,并注入`I18nText`设置其中的语言。 并添加三个不同的按钮进行来回切换。 ```csharp @page "/" @inject I18nText I18nText @code { language MyText = new language(); protected override async Task OnInitializedAsync() { MyText = await I18nText.GetTextTableAsync<language>(this); } } <h1>@MyText.HelloWord</h1> Welcome to your new app. <SurveyPrompt Title="How is Blazor working for you?" /> <button class="btn btn-primary" @onclick="@(async e=>await OnChangeCurrentLang("cn"))">中文</button> <button class="btn btn-primary" @onclick="@(async e=>await OnChangeCurrentLang("en"))">English</button> <button class="btn btn-primary" @onclick="@(async e=>await OnChangeCurrentLang("it"))">Italian</button> @code { private async Task OnChangeCurrentLang(string lang) { await I18nText.SetCurrentLanguageAsync(lang); } } ``` tn2>测试。 ![](https://img.tnblog.net/arcimg/hb/b7de80bc8f8c4c439295ef17e991c303.png) ![](https://img.tnblog.net/arcimg/hb/1be7fe1af5ae417c812c598806455086.png) ![](https://img.tnblog.net/arcimg/hb/4e0c3573a1174a2980a0ad97a118bbd6.png) tn2>测试是没问题的。 tn>除了`@MyText.HelloWord`这样的调用之外,我们还可以通过`@MyText["HelloWord"]`来实现切换语言的效果。 指定默认语言设置 ------------ tn2>在`MauiProgram.cs`中的`CreateMauiApp`中,我们通过配置`RequestLocalizationOptions`来指定支持的语言以及默认的语言配置。 这里我设置的默认语言配置为`en`。 ```csharp builder.Services.Configure<RequestLocalizationOptions>(options => { var supportedCultures = new[] { "en", "cn", "it" }; options.DefaultRequestCulture = new RequestCulture("en"); options.AddSupportedCultures(supportedCultures); options.AddSupportedUICultures(supportedCultures); }); ``` ![](https://img.tnblog.net/arcimg/hb/8ad4c6e2af13436fbcd488989bdb41b0.png)