iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Mobile Development

Re: 從零開始用 Xamarin 技術來復刻過去開發的一個 App : TopStore系列 第 10

EP 10

Hello, 各位 iT邦幫忙 的粉絲們大家好~~~

本篇是 Re: 從零開始用 Xamarin 技術來複刻過去開發的一個 App: TopStore 系列文的 EP10。

在上一篇 EP9 當中已經能讓 PeoplePage 點選右上角的 "新增" 按鈕後,透過 Shell 利用 URI 的 Navigation 模式轉跳到 PersonDetailPage 的頁面,並且新增一筆聯絡人資料到聯絡人列表當中。

接下來本篇 EP10 要來討論一個問題,當我們從 PeoplePage 的聯絡人列表去點選某一個聯絡人時,可否能跳到原本設計的 PersonDetailPage 並且把資訊帶過去檢視,並再進一步做到編輯呢?

就來看怎麼處理吧,Go~~~


如果是要從 PeoplePage 的聯絡人列表點選某一個聯絡人時引發 UI 有反應動作,當然要針對 ListView 這個控制項的標記本身設計來作一些調整。

在這邊選擇增加 ListView 的 ItemTapped 事件,並且在透過該 ItemTapped 事件去執行 PeoplePageViewModel 所設計的 EditCommand (在 EP7 的時候就預留設計的)。

就打開 PeoplePage.xaml 找到 ListView 的標記增加 ItemTapped 的事件處理常式。
ListView 標記增加 ItemTapped 事件 1

透過 Visual Studio 的提示很快就能完成此事件處理常識的建立。
ListView 標記增加 ItemTapped 事件 2

再來打開 PeoplePage.xaml.cs 並找到剛剛增加的事件處理常式的 C# 程式碼。
ItemTapped 事件 C# 程式碼 1

撰寫執行 PeoplePageViewModel 所設計的 EditCommand 的程式碼,而 ListView 的 ItemTapped 事件的 e 參數,透過 e.Item 可以取得使用者透過 UI 點選的項目內容所對應的物件資料,也就是 Person。
ItemTapped 事件 C# 程式碼 2

接下來就打開 PeoplePageViewModel 來編輯一下 EditCommand。
EditCommand 程式碼 1

由於前面確定 ItemTapped 的事件處理常式會丟一個 Person 的物件資料進到 EditCommand 來執行,所以我們將 Command 的泛型改成 Person 的類別,並且將引數名稱設計改叫做 person。
EditCommand 程式碼 2

如果沒什麼規劃上的特殊需求,這邊也是要轉跳到 PersonDetailPage 這個頁面,所以撰寫上跟 AddCommand 的動作差不多,透過 Shell 的 URI 設計方式進行 Navigation 到 PersonDetailPage。
EditCommand 程式碼 3
喔,對了...GoToAsync 是非同步呼叫的方法,所以別忘記加上 "await/async" 的使用。

目前的雙平台(iOS、Android)執行結果上其實跟點選 ToolbarItem 的 "新增" 效果是一樣的,就切換到 PersonDetailPage 正確無誤。
EditCommand 的執行

但怎哪裡怪怪的?

是的,點選的該筆聯絡人資料並沒有被帶入到 PersonDetailPage 中顯示,雖然我們在 ListView 的 ItemTapped 的事件處理常式當中的程式碼撰寫,有將聯絡人的資訊帶給 EditCommand 沒錯,但是當我們在透過 Shell 的 URI 進行 Navigation 轉跳到 PersonDetailPage 的時候,我們並沒有將該資料帶入 URI 的參數當中來傳遞,所以我們並沒有辦法在 PersonDetailPage 順利的將該筆聯絡人顯示出來。

在這邊我們還要透過一些調整,才能正確地帶入資料到 PersonDetailPage。

首先回到 Models 當中的 Person 類別設計,這邊我們再多增加一個 Id 的屬性。
傳遞資料到 PersonDetailPage 的處理 1

第二個調整的部分是在 MockData 的部分增加 Id 的資料值。
傳遞資料到 PersonDetailPage 的處理 2

第三個調整的部分是 EditCommand 的 URI 加入傳遞資料的參數格式。
傳遞資料到 PersonDetailPage 的處理 3

第四個調整的其中第1部分是 PersonDetailPageViewModel 的 class 設計要掛上 QueryProperty 的 Attritube 以便接收參數資料
傳遞資料到 PersonDetailPage 的處理 4-1

第四個調整的其中第2部分是 PersonDetailPageViewModel 的 class 中多設計一個屬性 PersonId (也就是前一個步驟 QueryProperty 的 Attritube 設計 "nameof()" 小括號中要給予的屬性名稱)。
傳遞資料到 PersonDetailPage 的處理 4-2
另外,這邊在透過 Linq 找出 MockData 所設計的 People 當中 Person 的 Id 跟傳遞的 PersonId 一致的 Person 資料,並且將該 Person 資料設定給 EditPerson。

所以最後我們來執行看看,如果想看 personId 傳遞過程可以透過 "F5" 的偵錯模式,透過中斷點設定來確認 personId 的設定過程。

personId 的傳遞過程

而雙平台(iOS 在 ListView 當中點選第四筆資料、Android 在 ListView 當中點選第五筆資料)的執行結果如下效果:
雙平台的執行結果 1

PersonDetailPage 正確的顯示點選的 Person 資訊。
雙平台的執行結果 2

等等...雖然本篇 EP10 介紹到這邊~~~

點選聯絡人的 ListView 選許某筆聯絡人轉跳 PersonDetailPage 後能夠正確的在當中顯示 Person 資料了,但到目前似乎還沒有辦法區分出 "新增" 跟 "檢視/編輯" 的差異呢...?

是的!

目前還沒能明顯的區分,我們會在 PersonDetailPage 的 ToolbarItem 當中來做一點變化,以便區隔出 "新增" 跟 "檢視/編輯" 的差異。

這就留待下一篇 EP 來介紹囉~~~

囉辣各位,鳩咪^_<


上一篇
EP 9
下一篇
EP 11
系列文
Re: 從零開始用 Xamarin 技術來復刻過去開發的一個 App : TopStore31

尚未有邦友留言

立即登入留言