本篇體驗做一個簡單圓角文本框，做到3個效果：
1、初始狀態，圓角文本框有淡淡的背景色，邊框的顏色為淺灰色
2、點擊圓角文本框，讓其獲取焦點，邊框變成藍色，背景色變成白色
3、圓角文本框失去焦點，邊框變成紅色，背景色變成白色
從組成上分析，圓角文本框實際是由里層的Text Field和外層的Rectangle組成。
對於第一個狀態，給Rectangle設置背景色和邊框色，並且讓Text Field失去邊框，並讓其隱藏起來。
對於第二個狀態，是由Rectangle的的點擊事件觸發，顯示Text Field，並讓焦點進入其中。圓角文本框藍色的邊框和白色的背景如何實現呢？可以借助在Rectangle交互樣式的Disabled實現。
對於第三種狀態，是由Text Field的失去焦點事件觸發。圓角文本框紅色的邊框和白色背景如何實現呢？可以借助Rectangle交互樣式的Selected實現。
接下來是具體實現。
讓Text Field嵌套於Rectangle， 通過Rectangle的變形讓其變成圓角框，通過尺寸的設置、兩者的水平和垂直居中，讓它們看上去是一個整體，是一個圓角框。再把Text Field的邊框顏色去掉，讓其隱藏。設置Rectangle的邊框和背景色，使其符合第一種狀態。
圓角文本框的第二種狀態和Rectangle的交互樣式Disabled有關，按如下設置：
以上，Rectangle的交互樣式Disabled中，把背景色設置成白色，邊框設置成藍色，這里是為第二種狀態准備的。
圓角文本框的第三種狀態和Rectangle的交互樣式Selected有關，按如下設置：
以上，Rectangle的交互樣式Selected中，把背景色設置成白色，邊框設置成紅色，這里是為第三種狀態准備的。
當我們點擊圓角文本框，實際是觸發Rectangle的點擊事件，設置如下：
以上，當點擊Rectangle，就先禁用Rectangle(符合Disabled狀態，即圓角文本框藍色的邊框和白色的背景)，顯示Text Field, 並設置Text Field的焦點觸發其事件，由於點擊Rectangle的時候讓Rectangle的Selected狀態會出來，但這時候還不需要這種狀態出來，就先通過Text Field獲取焦點事件禁用Selected狀態。
當圓角文本框失去焦點，實際是觸發Text Field的失去焦點事件，設置如下：
以上，首先是啟用Rectangle，然后設置Selected狀態。
總結，圓角文本框實際上是Rectangle和Text Field之間的游戲:
→給Rectangle設置Disabled和Selected兩種交互樣式
→先讓Text Field隱藏
→點擊Rectangle,讓Rectangle處於Disabled狀態，並顯示Text Field讓其獲得焦點
→Text Field獲得焦點，讓Rectangle的Selected失效，並讓Rectangle處於Disabled狀態
→Text Field失去焦點，啟用Rectangle,並設置Rectangle的Selected狀態