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