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