日常工作或者活動比價多的朋友相信都用過日程表，來提醒自己要做什么，或者做過什么。那么對日程進(jìn)行管理是必不可少的。

?

這里有一種常見的日程管理的方式：點擊日期，在一個固定的區(qū)域顯示活動；可以對活動進(jìn)行添加和修改?？匆幌麓笾碌男Ч窃鯓拥模?/p>

想自己操作一下，更直接的感受效果，可以點擊預(yù)覽效果。https://tm4qzd.axshare.com

?

首先分析一下，這個日程管理的交互邏輯是怎么樣的

1、點擊日期，顯示與日期相對應(yīng)的活動

2、當(dāng)日沒有活動，可以添加活動

3、當(dāng)日已有活動，可以修改活動

?

怎么樣，有沒有覺得很眼熟？沒錯了，不止是在日程管理可以看到，許多管理類的產(chǎn)品都可以看到類似的邏輯。只要掌握了方法，做其他的產(chǎn)品時都沒有問題了。

?

那么就讓我們開始吧，直接來掌握做法。

?

在這個例子里面，由兩部分組成，一個是日歷，一個是活動內(nèi)容。

?

日歷部分比較簡單，我這里是直接用矩形搭建出來，大家也可以采用其他方式去做。

?

重點！重點！下面的活動內(nèi)容的部分，應(yīng)該怎么做呢？有朋友第一反應(yīng)可能是用動態(tài)面板去做。31天做31個狀態(tài)，點擊日期時進(jìn)行狀態(tài)的切換。這不失為一種方法，這里我要介紹的另一種方法，利用中繼器去做。

?

對樣式進(jìn)行簡單的設(shè)置就可以了。設(shè)置分頁，每頁顯示一項，并且起始頁設(shè)置為當(dāng)前日期。這樣設(shè)置，就能夠單獨顯示一天的活動內(nèi)容。在點擊日歷中日期的時候，用中繼器動作“設(shè)置當(dāng)前頁面”即可。

這樣，我們剛才分析出來的第一點交互邏輯就完成了。

?

下面要到活動內(nèi)容（中繼器）中去完成其他的交互邏輯了。

?

內(nèi)容有兩種可能性，一是沒有活動，二是已有活動。沒有活動的時候，需要添加活動，所以按鈕應(yīng)該是“添加”。添加完成之后，可以再次進(jìn)行修改，這時按鈕應(yīng)該是“修改”。這里我的默認(rèn)按鈕是“修改”，所以下面設(shè)置“添加”。什么情況下設(shè)置為“添加”？

看數(shù)據(jù)集，很容易知道當(dāng)plan這一列的沒有內(nèi)容也就是為空的時候，該日是沒有活動，可以添加的。很簡單，將按鈕的文字設(shè)置為“添加”，就行了。

?

添加和修改內(nèi)容應(yīng)該怎么做呢？這個問題就是我們也是使用中繼器制作的一個關(guān)鍵，大家應(yīng)該記得，中繼器有一個動作—更新行。我們只需輸入內(nèi)容，點擊保存之后，將數(shù)據(jù)更新為我們輸入的內(nèi)容就可以了。

?

當(dāng)這個按鈕是“添加”和“修改”按鈕的時候，點擊之后，我們可以輸入或修改內(nèi)容。既然要輸入或修改，那么我們就在這里用一個多行文本框來制作輸入框。先隱藏了，點擊的時候再顯示出來就行。添加時，輸入框原本內(nèi)容是空的，修改時，輸入框原本內(nèi)容是中繼器數(shù)據(jù)集中的內(nèi)容，跟數(shù)據(jù)集都是能匹配的。所以，在這個情況下需要先讓輸入框獲取到中繼器的數(shù)據(jù)對應(yīng)的內(nèi)容。

?

在輸入框中編輯好文字之后，我們就可以保存這些文字了。按照剛才我們的分析，利用中繼器的更新行，只需將item.plan的數(shù)據(jù)更新為我們輸入的文字就可以了。

?

再將輸入框隱藏，按鈕的文字修改，我們的完整的交互就完成了。

?

最后再來理一下整個交互邏輯。點擊日期，如果沒有活動，點擊添加按鈕，輸入內(nèi)容，點擊保存，添加完成，獲得內(nèi)容；如果已有活動，點擊修改按鈕，修改內(nèi)容，點擊保存，修改完成，獲得新內(nèi)容。

?

簡單畫一下圖，一目了然，整個邏輯非常清楚了。在整理思路的時候，簡單的畫一下圖對我們是很有幫助的，能讓我們的思路清晰。

?

這個例子說起來不難，在我們的工作、生活中也見得不少了，只要理解了思路，就能夠舉一反三，隨機(jī)應(yīng)變了。