實戰案例1:實現單選按鈕及在文本框中展示選中的按鈕內容

案例1:實現單選按鈕,並將單選按鈕內容填充至文本框

(1)元件準備:三個單選按鈕,一個button按鈕,一個文本框

(2)分析:a.單選按鈕的實現;

                     b.將選中按鈕的內容填充至文本框;

                     c.在下一個選中按鈕的行爲產生之前,對應的單選按鈕還是處於選中的狀態。


操作步驟:

1.首先在左下角的圖形庫裏選擇三個單選按鈕(以三個按鈕爲例),並分別對三個按鈕命名,命名方式是選中要命名的按鈕,在屬性上面的空白框裏輸入命名,操作如下所示:

 2.選中按鈕操作的實現:由於該頁面存在三個按鈕,要實現單選的效果,必須要使這幾個按鈕產生互斥,那麼這時候我們需要利用交互中的添加用例,當我們選中其中一個按鈕時(選中狀態爲true),其他兩個按鈕的選中狀態就應該爲false,這裏我們以“man”這個單選按鈕爲例,即將man按鈕的選中狀態設置爲true,同時其他兩個按鈕設置爲false即可,具體操作如下所示:

由於woman及baomi按鈕選中互斥的操作與man按鈕操作類似,這裏不多說。完成了單選按鈕的設置,那麼問題來了,我們要如何將選中按鈕的內容可以顯示在對應的文本框呢?與此同時,當內容顯示在文本框時,對應的單選按鈕還是處於選中的狀態(在點擊下一個按鈕之前)?

3.將選中的單選按鈕內容顯示在對應的文本框中:首先需要在工作區域拖入一個文本框,爲了後續便於區分,這裏我們將文本框命名爲“展示選中內容”,再添加一個button按鈕來觸發交互行爲,以下所有設置都是在該按鈕上設置的。

a.選中按鈕的設置:選中按鈕,選擇交互行爲中的添加用例,在彈出的用例編輯頁面雙擊case1,彈出條件設立彈框,設置對應的狀態,以man按鈕爲例,具體操作如下所示:

 b.選擇“設置文本”,雙擊中間模塊的內容,右邊會對應彈出配置動作相應的圖形,勾選要顯示內容的文本框,在右下角填入文本框中要顯示的內容“男”,點擊確定,預覽就可以發現文本框中會顯示選中按鈕的內容,具體操作如下所示:

c.在內容顯示在文本框時,選擇下一個選中按鈕之前,對應的單選按鈕還是處於選中的狀態的設置,具體操作如下所示:

三個按鈕設置完成之後如下圖所示:

 4.按F5預覽效果如下:



 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章