Avalnoia跨平台实战(一)，Avalonia初始化

前言：

记录一下小菜鸟程序员从WPF一知半解转向Avalonia跨平台桌面端开发的一点记录和感想，我个人是比较喜欢用.NET来开发的，当然，这也和我的技术栈有很大关系，本人只是从大专出来的，在学校里学的就是.NET，所以各位看官不喜勿喷，技术只是个人爱好。

所以刚开始看到Avalonia的时候，觉得挺有趣的，一直以来，我相对来讲喜欢桌面端开发，前端开发地狱级的CSS调的我头痛，很多开源框架一旦封装的过于复杂改起来也头痛。所以一下子看到跨平台的桌面端，而且还是自己会的技术栈，兴趣一下就上来了。

---

• 安装Avalonia模板

  

  安装命令

  dotnet new install Avalonia.Templates
  

  也可以查看官网文档，Alalonid官方文档

---

• IDE选择

  对于IDE，目前支持的有Visual Studio、Visual Code、JetBrains Rider，这里我是用的是Rider，不是说vs不好，而是vs的扩展还有很多问题，至少添加控件编译上经常报错，识别不到代码。我不知道大家有没有遇到这种问题，后续演示的IDE都是使用Rider。

  IDE设置请查看下图或者查看官方文档

  Rider在设置中插件搜索AvaloniaRider插件安装即可

  

  Visual Studio在扩展中搜索Avalonia for Visual Studio

  

---

• 创建项目

  打开Rider，选择新建解决方案，如下图

  

  在这里，我们能看到有三个模板。

  • Avalonia.NET App 默认模板、

  • Avalonia.NET MVVM App 带MVVM的模板 、

  • Avalonia Cross Platform Application 跨平台模板

  ---

  我选择的是带MVVM的模板，在Avalonia中有两个MVVM框架，一个就是我们比较熟悉的CommunityToolkit,还有一个名为ReactiveUI的mvvm框架，这里我使用的是ReactiveUI

  其实对于这个新的mvvm我也不太熟，但是我这个人比较喜欢尝试新事物，所以即使坑多也照样用，哈哈。如果大家想选择这个框架，还是先去看下官网文档，ReactiveUI官方文档。

  ---

  进入项目我们能看到下图的项目结构

  

  我们可以看到App.axml下多了这么一段代码，项结构中也多了一个ViewLocator

  <Application.DataTemplates>
      <local:ViewLocator/>
  </Application.DataTemplates>
  

  

  这个类有什么用呢，后续说导航的时候会给大家解释一下，因为Avalonia和WPF的导航有区别

  这里Reactive的响应式全部继承至ViewModelBase，ViewModelBase又继承ReactiveObject，至于为什么这个模板得绕一层，我不是很明白，欢迎大佬给我解答一下

  ---

• 热重载

  在vs和Rider中，虽然我们有看到热重载，但是没办法像WPF中那样，我们去更改xml代码，效果会实时更新。

  对于Avalonia中的现有的热重载只现定于.cs文件。所以，在这种情况下开发效率就很低。

  那我们就没办法了吗，其实有的，有一个现成的库可以帮我们实现这一个热重载功能，HotAvalonia，HotAvalonia热重载

  
  

  我们在项目的csproj文件中加入这么一行代码引入这个包

  <PackageReference Include="HotAvalonia" Version="3.0.0" PrivateAssets="All" Publish="True" />
  

  并且在App.axml.cs中的Initialize()方法加入这么一行代码，如下图

  

  一定得加在AvaloniaXamlLoader.Load(this);这句代码前面，这样我们就完成了热重载。

  

  可以看到，我们一边写一边效果就出来了，增大了我们的开发效率。