嗨,这次我将在新版本的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