Avaloia 实现国产麒麟系统中文显示界面 - Powered by Discuz! Archiver

首页 › 麒麟系统论坛 › Avaloia 实现国产麒麟系统中文显示界面

郭元民 發表於 2024-9-11 17:52:00

Avaloia 实现国产麒麟系统中文显示界面

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
                     <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)"></path>
               </svg>
               <p>最近在搞一个国产麒麟系统的接口对接，因为，接口内含复杂的签名验证，而且还是离线环境，所以，postman不是很好用。</p>
<p>就想着哪个方式好一些，主要是有选择图片的操作，所以，在Electron和Avalonia中做选择，其他的很少支持linux系统的。</p>
<p>综合考虑还是选择Avalonia，毕竟原生开发，xaml也跟WPF基本一致，所以，就来个Avalonia做了，试了下效果还是很不错的。</p>
<p>这里只做一个简单的窗体，能在麒麟桌面跑，其他的可以参考WPF。</p>
<h2>Avaloia安装</h2>
<p>打开 Visual Studio 2022 选择扩展菜单<br>
<img src="https://img-blog.csdnimg.cn/img_convert/cbc70033dd6619f50ade30598bf77e83.png"><br>
选择扩展管理器<br>
<img src="https://img-blog.csdnimg.cn/img_convert/2bf54bb0d6efd7e9721b4699410374ba.png"><br>
在扩展管理器里输入 Avalonia 关键词，然后把扩展都安装了。<br>
<img src="https://img-blog.csdnimg.cn/img_convert/b4a9c38ed8a6b264da0d02e99e12bb00.png"><br>
然后，选择安装，就会显示下面，安装程序（需要关闭vs才可以，重复两次）<br>
<img src="https://img-blog.csdnimg.cn/img_convert/de8a9aa8d4071b86dcb7344418bdd405.png"><br>
安装完毕会显示成功信息。<br>
<img src="https://img-blog.csdnimg.cn/img_convert/6e962ffa8a3509e541ced42a77efbe18.png"></p>
<h2>创建 Avaloia 项目</h2>
<p>先新建 Avaloia c# Project项目，作为默认项目。<br>
<img src="https://img-blog.csdnimg.cn/img_convert/b1ab3d67003f17da2aa2caa8139d88bb.png"><br>
我这边默认选择桌面应用。<br>
<img src="https://img-blog.csdnimg.cn/img_convert/d5b4696df4f14eb31c8b7b5afaa24917.png"><br>
这个设计模式（design pattern）分为了两种，实际上就是MVVM的实现方式吧，ReactiveUI和Community toolkit，相对来讲，community toolkit应该跟WPF差不多，我就选择了这个。</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/8e126a3ac131ccadd1c5f8cf41d2e1c9.png"><br>
剩下的都选应该也没啥问题，都是绑定了，资源嵌入之类的。<br>
<img src="https://img-blog.csdnimg.cn/img_convert/8a14a6153fb30d855a0fc48c7c208925.png"><br>
创建完就是下面这个项目，整体结构简单，也不复杂。<br>
<img src="https://img-blog.csdnimg.cn/img_convert/63ae8301e8d2edd3b9d168ff7f255e38.png"><br>
我们F5 ，运行起来项目，是这样的，我增加了点中文显示。<br>
<img src="https://img-blog.csdnimg.cn/img_convert/772bb559be210365c39bb538b1f3d188.png"></p>
<h2>部署到麒麟系统</h2>
<p>项目右键发布，我设置了以下相关配置。<br>
<img src="https://img-blog.csdnimg.cn/img_convert/e3063b55b85d880e25ea3be36a46416b.png"></p>
<p>把生成的文件直接复制到目标系统上</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/efbe87a709adce0572d399232a32e12b.png"></p>
<p>麒麟系统信息</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/e03e0a469646f74b6d3ae02412efd81c.png"></p>
<h3>运行项目</h3>
<p>直接双击AvaloniaApplication1.Desktop 会打开文本编辑器。</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/9a6c175684b8389c0dbb0af5e581a596.png"></p>
<p>所以，我们需要修改名称为 AvaloniaApplication1,然后，授予执行权限就可以运行了.</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/49cce3c3804694250057e12451e9fdae.png"></p>
<p>双击应用，选择直接运行。</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/828d3dc27da13c389a1b4d91db53aa8e.png"></p>
<p>然后会发现，什么都没有，太不正常了。</p>
<p>这个时候只能命令行执行</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/3f0e18cb73d3efe02fc19487a470ee99.png"><br>
真是出现了异常，大概意思是字体异常。</p>
<h3>字体异常处理</h3>
<p>在linux上不一定有默认的字体，那么，就需要导入相关字体，这里我选择了阿里云的商用免费字体。</p>
<p>访问 https://www.alibabafonts.com/#/font，下载你喜欢的字体</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/07736cdb5ddebad831bf9dc9549a79f1.png"></p>
<p>下载完后，大致是这个东西</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/11e029c9136aa2c6f3acef2f8f5c7173.png"><br>
只选择.ttf格式的文件就可以了，如下图所示<br>
<img src="https://img-blog.csdnimg.cn/img_convert/adefba9972313aff5fdcd9a87fc8b6f4.png"><br>
放到资源文件夹里，就像这样，我只放了一个，放的多，文件就越大。<br>
<img src="https://img-blog.csdnimg.cn/img_convert/b1c2457a5c0ef939db9e794be69e69e7.png"><br>
还需要设置资源的嵌入类型，为 AvaloniaResource</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/d36bfac5154e9f4d5bb4ea8fb5b957fa.png"></p>
<h4>如何获取字体的家族名字</h4>
<p>需要一个工具叫做 FontForge<br>
下载地址: https://fontforge.org/en-US/downloads/windows-dl/</p>
<p>运行程序，选择你的字体文件</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/f3b2f531a32d644f323dd398b689592d.png"><br>
点击ok，就可以打开这个界面</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/1cc99fc50ec167bae773a355a3018aa7.png"></p>
<p>点击 element，选择 font info<br>
<img src="https://img-blog.csdnimg.cn/img_convert/d4e6bc438b642d078dfeae73ffb510cf.png"></p>
<p>就可以看到字体的相关信息了<br>
<img src="https://img-blog.csdnimg.cn/img_convert/f961893f301ea6eb14c5ef4de5ec115a.png"></p>
<h3>引入离线字体</h3>
<p>需要在入口处增加字体扩展</p>
<pre><code class="prism language-csharp"><span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token keyword">class</span> <span class="token class-name">AvaloniaAppBuilderExtensions</span>
<span class="token punctuation">{</span>
<span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token return-type class-name">AppBuilder</span> <span class="token function">UseFontAlibaba</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token attribute"><span class="token class-name">DisallowNull</span></span><span class="token punctuation">]</span> <span class="token keyword">this</span> <span class="token class-name">AppBuilder</span> builder<span class="token punctuation">,</span> <span class="token class-name">Action<span class="token punctuation"><</span>FontSettings<span class="token punctuation">></span><span class="token punctuation">?</span></span> configDelegate <span class="token operator">=</span> <span class="token keyword">default</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
   <span class="token class-name"><span class="token keyword">var</span></span> setting <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token constructor-invocation class-name">FontSettings</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   configDelegate<span class="token punctuation">?.</span><span class="token function">Invoke</span><span class="token punctuation">(</span>setting<span class="token punctuation">)</span><span class="token punctuation">;</span>

   <span class="token keyword">return</span> builder<span class="token punctuation">.</span><span class="token function">With</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token constructor-invocation class-name">FontManagerOptions</span>
   <span class="token punctuation">{</span>
         DefaultFamilyName <span class="token operator">=</span> setting<span class="token punctuation">.</span>DefaultFontFamily<span class="token punctuation">,</span>
         FontFallbacks <span class="token operator">=</span> <span class="token keyword">new</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
         <span class="token punctuation">{</span>
            <span class="token keyword">new</span> <span class="token constructor-invocation class-name">FontFallback</span>
            <span class="token punctuation">{</span>
               FontFamily <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token constructor-invocation class-name">FontFamily</span><span class="token punctuation">(</span>setting<span class="token punctuation">.</span>DefaultFontFamily<span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
         <span class="token punctuation">}</span>
   <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ConfigureFonts</span><span class="token punctuation">(</span>manager <span class="token operator">=></span> manager<span class="token punctuation">.</span><span class="token function">AddFontCollection</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token constructor-invocation class-name">EmbeddedFontCollection</span><span class="token punctuation">(</span>setting<span class="token punctuation">.</span>Key<span class="token punctuation">,</span> setting<span class="token punctuation">.</span>Source<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">FontSettings</span>
<span class="token punctuation">{</span>
   <span class="token keyword">public</span> <span class="token class-name"><span class="token keyword">string</span></span> DefaultFontFamily <span class="token operator">=</span> <span class="token string">"fonts:AvaloniaApplication1FontFamilies#Alibaba PuHuiTi"</span><span class="token punctuation">;</span>
   <span class="token keyword">public</span> <span class="token return-type class-name">Uri</span> Key <span class="token punctuation">{</span> <span class="token keyword">get</span><span class="token punctuation">;</span> <span class="token keyword">set</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token constructor-invocation class-name">Uri</span><span class="token punctuation">(</span><span class="token string">"fonts:AvaloniaApplication1FontFamilies"</span><span class="token punctuation">,</span> UriKind<span class="token punctuation">.</span>Absolute<span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token keyword">public</span> <span class="token return-type class-name">Uri</span> Source <span class="token punctuation">{</span> <span class="token keyword">get</span><span class="token punctuation">;</span> <span class="token keyword">set</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token constructor-invocation class-name">Uri</span><span class="token punctuation">(</span><span class="token string">"avares://AvaloniaApplication1/Assets/Fonts"</span><span class="token punctuation">,</span> UriKind<span class="token punctuation">.</span>Absolute<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>然后，在此处引用即可，其中 DefaultFontFamily 的内容，我并没有深入，大体分为了三部分</p>
<pre><code>fonts:AvaloniaApplication1FontFamilies#Alibaba PuHuiTi

fonts://字体标识
AvaloniaApplication1FontFamilies# //自定义字体家族
Alibaba PuHuiTi //字体家族名称 Alibaba PuHuiTi 3.0 65 Medium （Alibaba PuHuiTi ）就可以了
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/79da39dac5d452c04f4a356c786933f5.png"></p>
<h3>修改后，重新发布麒麟</h3>
<p>可以看到已经能运行了。<br>
<img src="https://img-blog.csdnimg.cn/img_convert/452af8f1547afdd3b9400f36528fc04a.png"></p>
<h2>git地址</h2>
<pre><code>https://github.com/kesshei/AvaloniaDemo
https://gitee.com/kesshei/AvaloniaDemo
</code></pre>
<h2>资源链接</h2>
<pre><code>https://www.alibabafonts.com/#/font
https://fontforge.org/en-US/downloads/windows-dl/
</code></pre>
<h2>参考链接</h2>
<pre><code>https://www.cnblogs.com/wdw984/p/17717864.html
</code></pre><br><br>
来源：https://www.cnblogs.com/kesshei/p/19155030

頁: [1]

查看完整版本: Avaloia 实现国产麒麟系统中文显示界面