[MAUI 專案實戰] 筆記App（一）：介紹與程式設計

林晓lx發表於2024-07-18
UI筆記APP程式設計

前言

有人說現在記事類app這麼多，市場這麼卷，為什麼還想做一個筆記類App？

一來，去年小孩剛出生，需要一個可以記錄餵奶時間的app，發現市面上沒有一款app能夠在兩步內簡單記錄一個時間，可能iOS可以透過備忘錄配合捷徑做到快速記錄，但是安卓上就沒有類似的app。

二是，自去年做的音樂播放器以來，很長一段時間我在部落格上的XF，MAUI都是在介紹區域性的功能，[MAUI 專案實戰]專題也很長沒更新了，這次透過筆記類App做一次完整專案，包括如何上架MAUI應用等內容一併更新了。

一開始用MAUI簡單做了一個功能，就記錄餵奶量 + 餵奶時間 + 提醒。後期逐步做成一個可以動態新增摘要片段的功能。取名為《凡事摘要》。

目前安卓版本已釋出打包，並上架騰訊應用商城：凡事摘要，iOS版本的部分頁面還有問題需要除錯，最近比較忙，我會抽出時間繼續完善。在這個時間點我決定把App所有的程式碼都放在GitHub上，方便大家學習。也歡迎有興趣的小夥伴一起參與。

框架

使用Abp框架，我之前寫過如何 將Abp移植進.NET MAUI專案，本專案也是按照這篇博文完成專案搭建。

這次的專案，主要透過原型和工廠模式建設基於模板的筆記內容。

沒有使用過多的跨平臺特性，如果需要了解更多MAUI跨平臺知識，請參考之前音樂播放器系列文章。

定義

  • Note - 筆記，可以成整頁開啟的內容
  • NoteTemplate - 筆記模板，或稱為場景，是可以快速建立筆記的模板
  • NoteSegment - 筆記片段，它是一個筆記（Note）的組成
  • NoteSegmentTemplate - 筆記片段模板，對應場景中可快速建立筆記片段的模板
  • NoteSegmentPayload - 筆記片段負載，儲存具體筆記片段的內容
  • NoteSegmentService - 筆記片段服務類，為筆記片段，或筆記片段模板提供增刪改等具體的業務邏輯
  • NoteSegmentServiceFactory - 筆記片段服務工廠，為筆記片段服務類提供工廠方法

核心類

INoteSegment：它是筆記片段的抽象類，模板類NoteSegmentTemplate和筆記片段類NoteSegment都實現了INoteSegment

在這裡插入圖片描述

它包含了筆記片段的屬性，如標題、顏色、圖示、是否隱藏、是否可刪除、排序、狀態、型別等。同時它關聯一個筆記片段負載類INoteSegmentPayload

public interface INoteSegment
{
    string Color { get; set; }
    string Desc { get; set; }
    string Icon { get; set; }
    bool IsHidden { get; set; }
    bool IsRemovable { get; set; }
    int Rank { get; set; }
    string Status { get; set; }
    string Title { get; set; }
    string Type { get; set; }

    INoteSegmentPayload GetNoteSegmentPayload(string key);
    INoteSegmentPayload GetOrSetNoteSegmentPayload(string key, INoteSegmentPayload noteSegmentPayload);
    void SetNoteSegmentPayload(INoteSegmentPayload noteSegmentPayload);
}

INoteSegementService：凡事摘要擁有不同的筆記型別，如：時間戳片段，文字片段，檔案片段等，App中可以透過新增片段按鈕檢視所有型別。

在這裡插入圖片描述

這些片段透過片段服務類（NoteSegementService）來描述該如何儲存，使用Payload中的資料。

不同的片段型別，透過不同的片段服務類來實現。比如，在時間戳片段中，我們要儲存當前時間和計算倒數計時，而檔案片段中，我們要儲存檔案路徑，檔名，檔案大小，檔案型別等資訊。

這些都是透過片段服務類來實現的。

在這裡插入圖片描述

具體型別如下：

型別 描述
DateTimeSegmentService 時間戳片段服務類
KeyValueSegmentService 數值片段服務類
FileSegmentService 檔案片段服務類
TextSegmentService 文字片段服務類
TodoSegmentService 待辦片段服務類
WeatherSegmentService 天氣片段服務類
LocationSegmentService 地點片段服務類
TimerSegmentService 鬧鐘片段服務類
ContactSegmentService 聯絡人片段服務類
VoiceSegmentService 錄音片段服務類
MediaSegmentService 媒體片段服務類
ScriptSegmentService 繪製片段服務類
DocumentSegmentService 檔案片段服務類

片段服務類包含了一個INoteSegment，它是當前的筆記片段物件

在這裡插入圖片描述

INoteSegmentServiceFactory:

片段服務類的工廠類，除此之外還有一個INoteSegmentTemplateServiceFactory，他們都是根據筆記片段，或者筆記模板中的片段型別建立對應的片段服務類。

在這裡插入圖片描述

用於筆記的片段服務類的工廠類:

public interface INoteSegmentServiceFactory: ISingletonDependency
{
    INoteSegmentService GetNoteSegmentService(NoteSegment noteSegment);
}

用於筆記模板的片段服務類的工廠類

public interface INoteSegmentTemplateServiceFactory: ISingletonDependency
{
    INoteSegmentService GetNoteSegmentService(NoteSegmentTemplate noteSegmentTemplate);
}

NoteSegmentService作為筆記片段服務的基類，它繼承了ViewModelBase，實際上服務基類是各筆記片段檢視層的ViewModel，檢視介面元素透過繫結服務類中的屬性來顯示或更新資料。

在這裡插入圖片描述

每一種服務類都對應的一個檢視。渲染時，Xaml透過NoteSegmentDataTemplateSelector模板選擇器來選擇對應的檢視。有關介面部分將在另一篇文章介紹。

專案地址

GitHub:MatoProductivity

相關文章