Java，JavaFX的流畅设计风格组合框和滚动条


Fluent Design Style ComboBox and Scroll Bar for Java, JavaFX

在本文中，我将描述刚刚发布的JMetro版本4。

JMetro是受Fluent Design启发的Java，JavaFX主题。 此版本为以下控件带来了新样式：

  • 组合框

    滚动条

  • 滚动窗格

    • 这些新样式包含新的深色和浅色版本。

    JMetro 4.0详细信息

    我首先从更新组合框开始。

    组合框新样式

    在这种新的组合框样式中，颜色和向下箭头图像已更改：

    Combo Box JMetro light theme. Java (JavaFX) UI theme, inspired by Fluent Design System (previously named Metro)

    组合框JMetro灯光主题。 Java(JavaFX)UI主题，灵感来自Fluent Design System(以前称为" Metro")。" data-comments-opened =" 1" data-attachment-id =" 1285">

    组合框 OLD JMetro Light主题

    Combo Box JMetro light theme. Java (JavaFX) UI theme, inspired by Fluent Design System (previously named Metro).

    组合框JMetro灯光主题。 Java(JavaFX)UI主题，灵感来自Fluent Design System(以前称为" Metro")。" data-comments-opened =" 1" data-attachment-id =" 1996">

    组合框 NEW JMetro Light主题

    您会在此处注意到，向下箭头图像的笔触较细且较宽。 这是Fluent Design中不会发生的一件事，但是当您将鼠标移到组合框上时，JMetro会发生这种情况。 然后，它立即开始打开键盘上的按键。 这由焦点指示符指示-组合框的边框变为黑色(在深色主题的情况下为白色)。 现在，按下上下箭头键盘键将更改所选项目。 这是JavaFX的默认行为。

    您会在上面注意到，当组合框包含更多内容时，JavaFX将添加滚动条。 没有滚动条的情况下，第一个组合框就可以了，而下面的组合框则向用户显示了滚动条，以便用户可以滚动浏览更大的内容集。

    Combo Box JMetro dark theme. Java (JavaFX) UI theme, inspired by Fluent Design System (previously named Metro).

    Combo Box JMetro dark theme. Java (JavaFX) UI theme, inspired by Fluent Design System (previously named 'Metro')." data-comments-opened="1" data-attachment-id="1286">

    组合框JMetro黑暗主题。 Java(JavaFX)UI主题，灵感来自Fluent设计系统(以前称为" Metro")。" data-comments-opened =" 1" data-attachment-id =" 1286">

    组合框 OLD JMetro Dark主题

    Combo Box JMetro dark theme for Java (JavaFX). Inspired by Microsoft Fluent Design System.

    Java的Combo Box JMetro深色主题(JavaFX)。 受Microsoft Fluent设计系统启发。" data-comments-opened =" 1" data-attachment-id =" 1994">

    组合框 NEW JMetro深色主题

    滚动条样式更改

    由于更改了组合框样式，因此我借此机会更新了滚动条。 我这样做是因为，就像我说的那样，滚动条也可以在组合框的内部使用。

    Scroll Bar control JMetro light theme, Java (JavaFX) UI theme, inspired by Fluent Design System (previously named Metro).

    滚动条控件JMetro轻主题，Java(JavaFX)UI主题，灵感来自Fluent Design System(以前称为" Metro")。" data-comments-opened =" 1" data-attachment-id =" 1259">

    滚动条 OLD JMetro轻主题

    Scroll Bar control JMetro light theme, Java (JavaFX) UI theme, inspired by Fluent Design System (previously named Metro).

    滚动条控件JMetro轻主题，Java(JavaFX)UI主题，灵感来自Fluent Design System(以前称为" Metro")。" data-comments-opened =" 1" data-attachment-id =" 2003">

    滚动条 NEW JMetro轻主题

    颜色略有不同，并且箭头的笔触变细了。 深色样式也是如此，箭头图像的颜色变为白色。

    Scroll Bar control JMetro dark theme, Java (JavaFX) UI theme, inspired by Fluent Design System (previously named Metro).

    滚动条控件JMetro黑暗主题，Java(JavaFX)UI主题，灵感来自Fluent Design System(以前称为" Metro")。" data-comments-opened =" 1" data-attachment-id =" 1258">

    ScrollBar OLD JMetro Dark主题

    Scroll Bar control JMetro dark theme, Java (JavaFX) UI theme, inspired by Fluent Design System (previously named Metro).

    滚动条控件JMetro深色主题，Java(JavaFX)UI主题，灵感来自Fluent Design System(以前称为" Metro")。" data-comments-opened =" 1" data-attachment-id =" 2004">

    ScrollBar NEW JMetro Dark主题

    以及新的Scroll Pane浅色和深色样式：

    ScrollPane NEW JMetro light theme

    ScrollPane NEW JMetro dark theme

    包起来

    JMetro 4.0版为滚动条和组合框带来了新样式。 这些控件的箭头图像将变得越来越薄。 浅色和深色主题的颜色也发生了变化-只是略有变化。

    自几周前发布3.0版以来，已更新了12个控件。 这包括没有样式的控件的新样式以及刷新的现有样式。 由于每个控件都有一个明暗版本，因此自上次迭代开始以来，已有24种新样式！

    有了这24种新样式，就可以进行大量细微的细节更改。 它们看起来很小，但是它们全部加起来可能是界面的亮点。

    我采用的版本控制对您来说似乎有些奇怪(也许实际上是)，但是我的目标是在5.0版中完成所有重要控件的外观刷新。 另外，我可能会为尚没有控件的控件添加一种或两种新样式，并可能添加一项新功能，该功能允许通过方法调用或CSS变量覆盖来更改主题的颜色。

    我还没有更新JavaFX Java主题JMetro的文档页面。 我会在不久的将来这样做。