基于Avalonia 11.0.0+ReactiveUI 的跨平臺項目開發(fā)1-通用框架
基于Avalonia 11.0.0+ReactiveUI 的跨平臺項目開發(fā)1-通用框架
Avalonia簡介:
Avalonia是.NET的一個跨平臺UI框架,提供了一個靈活的樣式系統(tǒng),支持廣泛的操作系統(tǒng),如Windows、Linux、macOS,并對Android、iOS和WebAssembly提供了實驗性支持。
為什么使用Avalonia:
之前已經(jīng)了解了基于Avalonia的項目在國產(chǎn)麒麟系統(tǒng)中運行的案例。正是Avalonia在跨平臺的出色表現(xiàn),學(xué)習(xí)和了解Avalonia這個UI框架顯得十分有必要。本項目采用的是最新穩(wěn)定版本11.0.0-rc1.1。希望通過該項目了解和學(xué)習(xí)Avalonia開發(fā)的朋友可以在我的github上拉取代碼,同時希望大家多多點點star。
https://github.com/raokun/TerraMours.Chat.Ava
項目需求:
Web端的AI應(yīng)用我已經(jīng)開發(fā)了一個AI聊天平臺了。希望開發(fā)一個跨平臺的AI聊天和其他功能的客戶端平臺。有個面試邀請是要求avalonia應(yīng)用經(jīng)驗要求。寫這樣一個項目來學(xué)習(xí)和了解Avalonia。同時麒麟系統(tǒng)的開放版本也發(fā)布了也想后面部署一個將這個項目部署在openKylin 1.0 的系統(tǒng)上。
開發(fā)環(huán)境:
.net 7
篇幅有限,創(chuàng)建項目的部分跳過,需要了解的可以看我之前的基礎(chǔ)博客:https://www.raokun.top/archives/chuang-jian-avalonia-mo-ban-xiang-mu—ji-chu
下面我會直接以TerraMours.Chat.Ava項目為例子 來介紹項目開發(fā)過程和各技術(shù)的應(yīng)用
1.nuget包引用

引用包介紹:
Avalonia 版本11.0.0-rc1.1,穩(wěn)定版本,其他基于avalonia的包要選用支持11.0.0-rc1.1的版本
Avalonia.ReactiveUI MVVM 架構(gòu)模式的工具庫,創(chuàng)建avalonia項目時會提示選擇。
DialogHost.Avalonia?它提供了一種簡單的方式來顯示帶有信息的對話框或在需要信息時提示用戶。
FluentAvaloniaUI UI庫,并將更多WinUI控件引入Avalonia
System.Data.SQLite 本地數(shù)據(jù)庫SQLite
CsvHelper Csv導(dǎo)入導(dǎo)出工具庫
Markdown.Avalonia?用于顯示markdown文本的工具,用于展示聊天結(jié)果的渲染
Betalgo.OpenAI 調(diào)用ChatGpt的擴(kuò)展庫
2.功能介紹
項目開發(fā)的功能分為如下:
1.通用框架:
VMLocator: ViewModel 定位器。方便地獲取和管理 ViewModel 實例,從而實現(xiàn)界面和數(shù)據(jù)的解耦和模塊化,提高代碼的可維護(hù)性和可測試性。
國際化: 使用 CultureInfo.CurrentCulture 來實現(xiàn)多語言支持和本地化
本地化數(shù)據(jù):通過SQLite實現(xiàn)數(shù)據(jù)本地化
CSV導(dǎo)入導(dǎo)出:實現(xiàn)數(shù)據(jù)的遷移和補充
自定義快捷鍵: 自定義快捷鍵,方便操作。發(fā)揮客戶端的按鍵優(yōu)勢。
自定義字體
全局樣式
2.界面交互
LoadView.axaml?加載界面:系統(tǒng)打開時候的加載界面,用于首頁替換的技術(shù)實踐??筛脑斐傻顷懡缑妗?/strong>
MainWindow.axaml?首頁
MainView.axaml?主界面
DataGridView.axaml?會話列表
ChatView.axaml?聊天界面
ApiSettingsView.axaml?API配置
3.功能開發(fā)
1.通用功能開發(fā)
1.VMLocator ViewModel 定位器
VMLocator 類在 Avalonia 項目中的作用是作為一個靜態(tài)的 ViewModel 定位器,用于管理和提供各個 ViewModel 類的實例。ViewModel 是 MVVM 模式中用于處理界面邏輯和數(shù)據(jù)的類,而 ViewModel 定位器則負(fù)責(zé)管理 ViewModel 的實例,供界面進(jìn)行數(shù)據(jù)綁定和交互。
優(yōu)點:
提供了一種集中管理 ViewModel 的機(jī)制,使得整個應(yīng)用程序可以方便地訪問和使用各個 ViewModel 實例。
通過使用靜態(tài)屬性和延遲初始化的方式,避免了頻繁創(chuàng)建 ViewModel 實例的開銷,提高了程序的性能和效率。
可以在需要的時候動態(tài)獲取 ViewModel 實例,而不需要手動實例化 ViewModel 類。
可以在不同的界面和組件之間共享同一個 ViewModel 實例,實現(xiàn)數(shù)據(jù)的共享和一致性
1.創(chuàng)建資源類VMLocator

2.注入資源
app.axaml.cs中OnFrameworkInitializationCompleted方法加入

2.國際化
1.添加不同語言的資源文件
1.創(chuàng)建個語言的資源文件

2.文件內(nèi)容

代碼如下:
資源文件中定義了各個配置的說明文本的內(nèi)容,通過使用?CultureInfo.CurrentCulture?來實現(xiàn)多語言支持和本地化
2.添加Application.Resources
App.axaml中添加資源文件配置

3.添加AvaloniaXaml
在csproj中添加AvaloniaXaml

什么是AvaloniaXaml:
AvaloniaXaml 是 Avalonia 框架中用于定義用戶界面的 XAML 格式。它具有以下作用和特點:
作用:
聲明式定義用戶界面:AvaloniaXaml 允許開發(fā)人員使用 XAML 標(biāo)記語言來聲明用戶界面的結(jié)構(gòu)和外觀。它提供了一種簡潔、可讀性強的方式來描述應(yīng)用程序的用戶界面。
分離視圖與邏輯:通過使用 AvaloniaXaml,開發(fā)人員可以將用戶界面的定義與應(yīng)用程序的邏輯代碼進(jìn)行分離。這種分離可以提高代碼的組織性、可維護(hù)性和可測試性。
支持樣式和模板:AvaloniaXaml 提供了強大的樣式和模板機(jī)制,使開發(fā)人員能夠輕松地定制和重用用戶界面的外觀和行為。這樣,可以實現(xiàn)更靈活和可擴(kuò)展的界面設(shè)計。
4.自動判斷語言
通過CultureInfo.CurrentCulture?實現(xiàn)系統(tǒng)隨機(jī)器的語言系統(tǒng)自動切換顯示語言實現(xiàn)國際化配置。
CultureInfo.CurrentCulture 是一個表示當(dāng)前線程所使用的區(qū)域設(shè)置(Culture)的屬性。它提供了關(guān)于當(dāng)前文化信息(如語言、國家/地區(qū)、日期和時間格式等)的訪問和管理。
在MainWindow的構(gòu)造函數(shù)中添加

代碼如下:
Translate 方法

代碼如下:
3.本地化數(shù)據(jù)
本地化數(shù)據(jù)采用了SQLite本地數(shù)據(jù)庫,直接使用SQLite,用sql查詢,簡單高效,但是需要開發(fā)人員對sql的了解程度高。當(dāng)然,也可以其他ORM框架調(diào)用SQLite。
1.SQLite特點
SQLite 是一種嵌入式關(guān)系型數(shù)據(jù)庫管理系統(tǒng)(RDBMS),有以下優(yōu)點,這些優(yōu)點也是為什么客戶端廣泛使用它的原因:
簡單易用:SQLite 的設(shè)計目標(biāo)之一是簡化數(shù)據(jù)庫系統(tǒng)的使用和管理。它有一個簡潔的操作接口,易于學(xué)習(xí)和使用,無需繁瑣的配置和管理步驟。因此,開發(fā)人員可以很快上手并快速開發(fā)出功能豐富的應(yīng)用程序。
無服務(wù)器架構(gòu):與大多數(shù)數(shù)據(jù)庫管理系統(tǒng)不同的是,SQLite 是一個無服務(wù)器的數(shù)據(jù)庫引擎,數(shù)據(jù)庫以一個文件的形式存儲在磁盤上。這種架構(gòu)使得 SQLite 的部署和維護(hù)變得非常簡單,不需要安裝和配置額外的服務(wù)器。
輕量級和高性能:由于 SQLite 的設(shè)計目標(biāo)是資源消耗低、性能高效,它被認(rèn)為是一個輕量級的數(shù)據(jù)庫引擎。SQLite 數(shù)據(jù)庫文件通常較小,并且可以在資源受限的環(huán)境中快速運行。同時,SQLite 使用了精簡的 SQL 語法和優(yōu)化技術(shù),提供了快速的查詢和高效的數(shù)據(jù)讀寫性能。
跨平臺支持:SQLite 是一個跨平臺數(shù)據(jù)庫引擎,可以在多種操作系統(tǒng)上運行,包括 Windows、Linux、macOS 和嵌入式系統(tǒng)等。這種跨平臺的特性使得開發(fā)人員可以方便地在不同的環(huán)境中使用 SQLite,并輕松共享和遷移數(shù)據(jù)庫文件。
高度可移植:SQLite 數(shù)據(jù)庫文件是獨立于操作系統(tǒng)和硬件的二進(jìn)制文件,可以在不同的平臺之間自由傳輸和共享。這種可移植性使得 SQLite 成為一個理想的選擇,特別是在需要在不同系統(tǒng)之間進(jìn)行數(shù)據(jù)共享或遷移的情況下。
ACID 事務(wù)支持:SQLite 支持事務(wù)處理和完整性約束,遵循 ACID(原子性、一致性、隔離性和持久性)原則。這意味著開發(fā)人員可以使用 SQLite 進(jìn)行可靠的數(shù)據(jù)處理,并確保數(shù)據(jù)的正確性和一致性。
2.創(chuàng)建數(shù)據(jù)庫操作類 DatabaseProcess
1.數(shù)據(jù)庫連接
2.創(chuàng)建表和索引

代碼如下:
3.查詢列表(例)

代碼如下:
4.新增(例)

4.CSV導(dǎo)入導(dǎo)出
通過CsvHelper實現(xiàn)數(shù)據(jù)的導(dǎo)入導(dǎo)出
1.選擇文件
彈出選擇文件框,限制文件類型為CSV

代碼如下:
2.導(dǎo)入到數(shù)據(jù)庫
CSV從文件導(dǎo)入數(shù)據(jù),跳過標(biāo)題行,取得數(shù)據(jù),將數(shù)據(jù)插入數(shù)據(jù)庫

代碼如下:
5.自定義快捷鍵
1.CustomNumericUpDown
提供了一種自定義的 NumericUpDown 控件,可以用于在用戶界面中顯示和編輯數(shù)字值。NumericUpDown 控件通常用于允許用戶輸入數(shù)值或選擇數(shù)值的場景。
通過重寫 OnApplyTemplate 方法,該類可以在控件的模板應(yīng)用后,獲取到控件內(nèi)部的 TextBox 控件,并訂閱其 KeyDown 事件。
在 TextBox_KeyDown 事件處理程序中,實現(xiàn)了自定義的鍵盤輸入邏輯,只允許在 TextBox 中輸入數(shù)字、小數(shù)點以及一些控制鍵。
在 DetachedFromVisualTree 事件中,清理了事件的訂閱,以避免內(nèi)存泄漏。
通過實現(xiàn) IStyleable 接口,可以定義該控件的樣式(StyleKey)。

6.自定義字體
1.添加 AvaloniaResource
在csproj中添加
2.設(shè)置控件對應(yīng)的字體

7.全局樣式
1.添加Styles.axaml
Styles.axaml的作用是全局定義樣式,控制整個系統(tǒng)的樣式風(fēng)格

2.Application.Styles
app.axaml中添加

代碼如下:
3.添加AvaloniaResource
csproj添加AvaloniaResource
項目截圖:

篇幅有限,功能開發(fā)部分請?zhí)D(zhuǎn)下篇
基于Avalonia 11.0.0+ReactiveUI 的跨平臺項目開發(fā)2-功能開發(fā)