iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Mobile Development

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

EP 11

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

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

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

在本系列的 EP10 當中則是已經能讓使用者在 PeoplePage 點選聯絡人列表的 ListView 當中某筆聯絡人,透過 Shell 利用 URI 的 Navigation 模式,並傳遞所該筆聯絡人資訊轉跳進入到 PersonDetailPage 的頁面,並且呈現出該筆聯絡人詳細資料。

接下來本回 EP11 要來討論一個問題,當我們在 EP 10 從 PeoplePage 的聯絡人列表去點選某一個聯絡人時,可否能跳到所設計的 PersonDetailPage 並且把資訊帶過去時是 "檢視" 模式,然後有需要再進入 "編輯" 模式,完成資料上的變更處理後存回聯絡人列表,且不影響到原本 EP9 所設計的 "新增" 聯絡人的功能呢?

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


其實只要有了解到 EP9 跟 EP10 的轉跳到 PersonDetailPage 的做法,應該會發現到兩篇都是轉跳進入到 PersonDetailPage ,但很明顯的差異就是 EP9 "沒有" 資料的傳遞處理而 EP10 ""。

如果能夠發現個差異要解決就不是太困難了。

首先,我們就來修改一下 PersonDetailPage 當中 Entry 的標記,幫這個頁面中的每個 Entry 都呈現成可觀看但不可編輯的效果。

修改 "姓名"、"電話" 兩個 Entry 的 IsEnabled 屬性。
Entry 的 IsEnabled 設定為 false 1

修改 "Email"、"地址" 兩個 Entry 的 IsEnabled 屬性。
Entry 的 IsEnabled 設定為 false 2

那雙平台進入到 PersonDetailPage 呈現的效果就會如此(雖然 iOS 看不太出來差別)。
Entry 的 IsEnabled 效果呈現

可是在這邊或許會有人有疑問了,這不對阿,那這樣從 "PeoplePage" 的新增進來到 "PersonDetailPage" 的時候也不能編輯 Entry 的內容阿!

是的!

但如果我們繼續把這四個 Entry 的 IsEnabled 的屬性改成由 Binding 屬性來賦予呢? (為了版面截圖,將 Label 標記的 XAML 縮起)
Entry 的 IsEnabled 屬性值的設定由 Binding 屬性賦予

然後再接著到 PersonDetailPageViewModel 當中多設計一個 IsEdit 的屬性來提供繫結。
PersonDetailPageViewModel 設計 IsEdit 屬性提供細節

所以那關鍵就會變成是我們如何操控 PersonDetailPageViewModel 當中所設計的那個 IsEdit 的屬性的資料,以便區分 "新增" 或 "檢視/編輯" 傳跳進入 PersonDetailPage 的時候 Entry 是否能編輯內容了。

其手法其實各位也已經在 EP10 的介紹中學到了...是的,我們就在透過傳跳進入 PersonDetailPage 的時候時要指定的 URI 所帶的參數資料,來區分出 "新增" 或 "檢視/編輯" 其 Entry 是否能編輯內容。
PersonDetailPageViewModel 再新增 QueryProperty 的設計 1

然後再透過 QueryProperty 的資料設定 IsEdit 的屬性值。
PersonDetailPageViewModel 再新增 QueryProperty 的設計 2

所以後面的修改大家應該也不意外了,是吧?

在 PeoplePageViewModel 執行 GoToAsync 的時候,將 URI 都設定接帶入 isEdit 的參數值,在 AddCommand 當中就帶入 "isEdit=true",在 EditCommand 當中就帶入 "isEdit=false" 的設計。
PeoplePageViewModel 在 URI 設定直接帶入 isEdit 參數值

好啦,所以以下來看一下雙平台的展示效果吧~~~

PeoplePage 點選 "新增" 準備轉跳進入 PersonDetailPage 的畫面:
PeoplePage 點選 "新增"

PeoplePage 點選 "新增" 後進入到 PersonDetailPage 的畫面,在 PersonDetailPage 的 Entry 是 "可以" 編輯的:
PeoplePage 點選 "新增" 後進入 PersonDetailPage

PeoplePage 點選某筆 "聯絡人" 準備進入 PersonDetailPage 的畫面:
PeoplePage 點選某筆 "聯絡人" 準備進入 PersonDetailPage

PeoplePage 點選某筆 "聯絡人" 後進入到 PersonDetailPage 的畫面,在 PersonDetailPage 的 Entry 是 "不能" 編輯的:
PeoplePage 點選某筆 "聯絡人" 後進入到 PersonDetailPage

好啦收工...本 EP 11 就介紹到這邊囉~~~

等等,有人問 PeoplePage 點選某筆 "聯絡人" 後進入到 PersonDetailPage 右上角的按鈕是不是怪怪的,不應該是 "儲存" 而該是 "編輯" 才對阿?

PeoplePage 點選某筆 "聯絡人" 進入到 PersonDetailPage

是的!

目前還沒能正確顯示,我們會在 PersonDetailPage 的 ToolbarItem 當中來做一點變化,以便區隔出 "檢視/編輯" 的之間差異。

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

囉蝦各位,鳩咪^_<


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

尚未有邦友留言

立即登入留言