javafx按钮设计风格_Java，JavaFX的流畅设计风格按钮，切换按钮和工具提示

javafx按钮设计风格

你好，我们又见面了！

这个周末，在业余时间，我继续从事JMetro的工作。最终结果是新的Button和ToggleButton深色和浅色样式。这些新样式包括按下按钮时的新动画。可以通过CSS打开和关闭。

最后，我快速调整了工具提示样式。

这会将JMetro版本号提高到4.4。

JMetro版本4.4

有时，我对在JavaFX中工作仅几个小时所能取得的成就印象深刻。我尝试尽可能诚实，并确保自从开始工作以来就一直有偏见。由于JavaFX仍为beta（在版本1之前）。如果它是自己的脚本语言（ JavaFX script ）。您必须反复尝试才能与Java语言（？！）交互。它使NPE静音（？！？!！）。

令人印象深刻的是，过去几周每个周末只有几个小时的空闲时间，我几乎完成了JMetro的这一新迭代。其中包括几乎对所有JavaFX控件进行重新样式设置（新的动画，新的颜色，新的整体样式）。包括JavaFX框架中不存在的一些。而且所有这两次，因为JMetro包括明暗版本。更不用说设计（代码/ API设计以及视觉设计和UX），测试和调整，直到我认为这已经足够好为止。就个人而言，到目前为止，我所花费的时间给我留下了深刻的印象。

我不尝试出售任何特定技术。因为就像我以前听过Kirill Grouchnikov（现在在Google工作）一样，前软件工程师在Swing上写了博客：“客户不在乎这项技术”。客户不在乎所使用的技术。客户关心产品是否运作良好。

我不介意使用其他技术。实际上，在最近的几年中，我一直在使用javascript，html等进行Web开发。我总是尝试选择最适合工作的工具，除了激情之外（当然，使用工具包的经验也很重要）。

在这个博客中，我尽量保持诚实和公正。不试图通过任何特定技术向读者出售产品。目前，我不隶属于Oracle或任何其他出售JavaFX产品或JavaFX咨询公司的公司。除了我已经使用了很长时间之外，我没有对JavaFX进行任何投资。通常，我首先将自己描述为JavaFX顾问和自由职业者，只是因为那是我最有经验的经验。可能还有其他技术可以像JavaFX一样高效（显然，我并不十分了解它们）。不过，我认为仅花费几个小时就可以实现令人印象深刻的目标。

Button和ToggleButton新样式

单击时，只用了几个小时就用一个新动画完全重新实现了按钮样式。还有一个新CSS属性可以打开/关闭该动画。

首先是按钮的旧的明暗风格：

按钮– JMetro OLD灯光主题

按钮-JMetro OLD深色主题

您在上方看到的“默认”代表按钮的样式，将其设置为默认样式。查看API规范以获取更多信息。

新样式如下所示：

按钮– JMetro NEW轻主题

按钮– JMetro全新深色主题

按下，悬停等的颜色以及相应的效果已更改。还添加了一个新的动画，该动画在单击“按钮”时发生。当按下按钮时，按钮会收缩，然后逐渐恢复到正常大小。您可以使用-shrink-animate-on-press CSS属性打开或关闭此动画。默认情况下，它在JMetro样式表中设置为on：

 .button, .toggle-button { -shrink-animate- on -shrink-animate- -press: true ;  }

切换按钮样式高度基于按钮。这是旧样式：

切换按钮– JMetro OLD灯光主题

切换按钮– JMetro OLD深色主题

现在，新的“切换按钮”样式如下所示：

切换按钮– JMetro NEW轻主题

切换按钮– JMetro全新深色主题

工具提示新样式

JMetro版本4.4的最后一个新增功能是工具提示的新样式。这是对旧样式的快速调整。浅色和深色版本看起来都一样：

工具提示– JMetro OLD主题

工具提示– JMetro新主题

略微调整颜色，使字体变大。

结论

在这篇博客文章中，我对JavaFX的生产率表示了自己的看法。尤其是在几周前才开始的新JMetro迭代的情况下。

然后，我提到了JMetro 4.4版本中的新增功能。这包括新的Button和ToggleButton深色和浅色样式，并添加了CSS可样式化的动画。以及新调整的工具提示样式。

接下来是我要更新的内容：

文字栏位样式；
密码字段样式；
进度栏样式；
继续进行工作，以使开发人员将来可以轻松调整JMetro颜色；
大概在版本5左右的某个地方，我将致力于通过Maven Central提供JMetro。该项目有一些特殊性并没有使它变得那么容易。

JMetro的文档位于JavaFX主题JMetro页面上。尚未更新，已添加了最新版本。

和往常一样，在Twitter上关注我。

翻译自: https://www.javacodegeeks.com/2018/08/fluent-design-style-toggle-button.html

javafx按钮设计风格