案例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預覽效果如下: