Java,JavaFX的流畅设计风格拨动开关
嗨,這次我將在新版本的JMetro中討論新的Toggle Switch樣式。
撥動開關是一種近年來變得非常流行的控件。 我前一段時間在ControlsFX庫中添加了JavaFX實現。
剛剛發布的JMetro版本4.1中提供了此新樣式。
什么是撥動開關
在以前的文章中,我談到了切換開關控件,它是什么以及我已經完成并添加到ControlsFX庫中的實現。
簡而言之,撥動開關就像復選框或切換按鈕一樣,具有兩種狀態(打開和關閉)。 它通常沒有Check Box可以具有的不確定狀態,并且在某些實現中,當其狀態更改時,其文本可能會更改,以進一步說明其所處的狀態。
默認情況下,ControlsFX實現的外觀符合默認的JavaFX Modena主題。 那時,我還在JMetro中添加了Metro風格的樣式,您可以在下面看到:
撥動開關OLD JMetro燈光樣式
撥動開關OLD JMetro深色風格
新的撥動開關樣式
創建新的JMetro樣式時,我遇到了一些問題。 首先,我在外觀實現中遇到了一些錯誤,這些錯誤是在新添加的MetroToggleSwitchSkin 。
JMetro樣式表已更改為引用此新外觀:
.toggle-switch {-fx-skin: "impl.jfxtras.styles.jmetro8.MetroToggleSwitchSkin"; }這是一個實現細節,因此您通常不必真的在乎。 外觀位于impl包中,以反映它不是公共API。 如果在代碼中使用它,請注意將來情況可能會發生重大變化。
我遇到的另一個問題是我現在希望切換開關位于左側,而其文本位于右側。 這與當前實現相反。 為此,我添加了一個新CSS屬性: -toggle-display 。 與Labeled -fx-content-display屬性類似。
-toggle-display具有三個可能的值:
- left :切換開關顯示在左側,附帶的文本顯示在右側
- right :切換顯示在右側
- thumb-only :僅顯示切換開關,不顯示任何文本
默認值為right ,它反映了我在Toggle Switch的第一個實現中的外觀。 但是,默認情況下,JMetro會覆蓋此參數并將其設置為left, :
.toggle-switch {-thumb-move-animation-time: 100;-toggle-display: left; }另一件事發生了變化,您會在上一個代碼片段中注意到切換動畫的持續時間。 也就是說,無論開關點處于關閉狀態還是打開狀態,切換點從左到右移動的時間(反之亦然)。 如-thumb-move-animation-time CSS屬性所指示,此時間已從200ms更改為100ms。
事不宜遲,以下是Toggle Switch的新的明暗JMetro樣式:
撥動開關NEW JMetro燈光樣式
撥動開關NEW JMetro深色風格
包起來
JavaFX主題JMetro的 4.1版已經發布。 此版本增加了一個新的切換開關樣式,靈感來自Fluent Design 。 視覺效果已經完全改變,包括動畫速度。
還添加了一個新皮膚,它添加了一個新的-toggle-display CSS屬性。 請注意,此外觀位于impl包中,因為它是實現細節。
Java的文檔頁面JavaFX主題JMetro將很快更新。
和往常一樣,在Twitter上關注我并訂閱此博客。
這是我下一步計劃的:
- 帶有動畫的新按鈕樣式;
- 新的滑塊樣式;
- 新的進度欄樣式;
- 容易改變顏色的可能性。
翻譯自: https://www.javacodegeeks.com/2018/08/fluent-design-style-toggle-switch-javafx.html
總結
以上是生活随笔為你收集整理的Java,JavaFX的流畅设计风格拨动开关的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Win10修改Windows文件夹权限(
- 下一篇: how2java_HOW-TO:在Spr