FireMonkey 底下用自己定義 Style 的方式,給按鈕 Button 以顏色

FireMonkey 裏面有 Style 的支持。通常的用法是做一整套的 Style 然後給一個程序用。官方提供了不少的各種配色的 Style 設計,程序可以直接拿來用。通過使用 Style 來達到換膚的目的。

但自己設計整套的 Style 比較麻煩。有時候只是想給一個按鈕設置一個不同的顏色,而按鈕是沒有 Color 這樣的屬性可以用來設置顏色的。這時候,可以利用 FireMonkey 提供的 Style 的功能來達到我們想要的效果。

B站有個視頻講解了如何操作。視頻在這裏:用 Style 的方式給 Button 設置顏色。

我照着那方式做了一下,並且我給按鈕做了一個漸變色的效果。基本操作步驟如下:

1. 新起一個 FireMonkey 工程。放一個按鈕 Button1 到 Form1 上面;

2. 在控件選擇面板 Palette 裏面,選擇 TStyleBook 放到 Form1 上面,是爲 StyleBook1;

3. 雙擊 StyleBook1,彈出 Style Designer 頁面。在這個頁面裏,拖一個 TRectangle 過來,給它的 Name 屬性命名爲 Rectangle1;

4. 屬性面板裏面找到這個 Rectangle1 的 Fill 屬性,拉開,裏面的 Kind 屬性設置爲 Gradient,這個是漸變色。在其 Gradient 屬性旁邊的拉下按鈕點下去,拉到底部,有 Create New TGradientAnamation 的字樣,點它,會彈出 Brush Designer 窗口,在裏面選擇漸變顏色。它同時創建了一個屬於這個 Rectangle1 的 ColorAnimation1Style 的對象。

5. 點擊 Style Designer 頁面的頂部右邊的三角形按鈕(類似 Play 的按鈕),Apply 這個設計,讓設計生效。

6. 回到 Form1,選中 Button1,在屬性面板裏面找到它的 StyleLookup 屬性,在裏面填寫剛剛設計的 Style 的名字:Rectangle1。然後你能看到這個按鈕的顏色變成了你剛剛在 Style Designer 裏面給 Rectangle1 設置的漸變色。

7. 注意,FireMonkey 裏面,所有控件都可以當作容器,在上面擺放其它控件。每個控件都有一個 HitTest 屬性,如果是 True 則它響應鼠標點擊,然後它下面的控件就無法接收到鼠標點擊了。因此,這裏,我們需要在 Style Designer 裏面,把那個 Rectangle1 的 HitTest 設置爲 False 避免 Button1 無法觸發 OnClick。

8. Button1 使用了 Style 後,相當於設計的那個 Rectangle1 覆蓋到了它的表面。這樣它原本的 Text 無法顯示了。如果需要顯示文字,需要回到 Style Designer 頁面,在 Rectangle1 上面,放一個 TText,設置它的文字。注意同樣要把這個 TText 的 HitTest 設置爲 False;要讓它的文字保持在按鈕中間,設置它的 Align 爲 Content;

9. 動畫效果:如果我想鼠標按下去的時候變顏色,鼠標釋放的時候是另外一個顏色,則需要做:

9.1. 回到 Style Designer 頁面,左上角,選中 Rectangle1 的 ColorAnimation1Style 的對象,在屬性面板裏面,有 Start Value 和 Stop Value,分別選擇不同的顏色,然後再點開它的 Trigger 屬性,下拉,選擇 IsPressed=true,點開 TriggerInverse 屬性,下拉,選擇 IsPressed=false。這樣當按鈕被按下去的時候,它會變色。

10. 注意,每次在 Style Designer 裏面修改完後,需要點右上角的 Apply style 按鈕(三角形的類似 Play 的按鈕)。

到處,運行你的程序,用鼠標去點按鈕,可以看到按鈕的顏色發生變化,並且按鈕的顏色是漸變色的。

發佈了116 篇原創文章 · 獲贊 17 · 訪問量 12萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章