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属性可以打开/关闭该动画。

首先是Button的旧的明暗风格：

按钮– 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 教程