javafx 教程_Java，JavaFX的流畅设计风格进度栏

最新推荐文章于 2025-02-02 22:11:10 发布

cunfu5234

最新推荐文章于 2025-02-02 22:11:10 发布

阅读量459

点赞数

文章标签： java python css android html

原文链接：https://www.javacodegeeks.com/2018/10/fluent-design-style-progress-bar-javafx.html

版权

javafx 教程

按照承诺，刚刚发布的Java JavaFX主题JMetro 4.6版为进度栏带来了新样式。

进度栏有两种可能的状态：确定和不确定，新的JMetro版本具有这两种状态。在本文中，我还将详细介绍我在JMetro中遵守的一些API设计原则。

JMetro API设计原则

关于JMetro的API，我有一些原则。其中之一是它应要求最少的设置并具有最少的必需API。这意味着，例如，仅需很少的方法调用，就可以将JMetro应用为主题。现在，只需要这两行代码(可以很容易地折叠为一行)：

JMetro jMetro = new JMetro(Style.LIGHT);
jMetro.applyTheme(root);

这也意味着我尝试不引入新控件，除非应该绝对引入它们。例如，使用新的文本字段和密码字段样式，我可以引入新的控件，因为这两个控件都添加了新功能，例如清除和显示密码按钮。相反，我选择通过引入可以在原始控件中使用的新外观类来添加这些新功能。

这种方法有两个优点：

开发人员可以轻松更改主题。从JMetro到其他主题，反之亦然。由于JMetro仅在严格必要时才引入新控件，因此与JMetro没有强耦合。例如，您可能决定在移动设备上或在不同的OS上使用不同的主题，或者只是您决定不再使用JMetro。使用JMetro非常简单。
学习曲线浅。开始使用JMetro应该真的很容易。至少，您需要知道的是配置和应用JMetro的两行代码。大多数控件已经在JavaFX SDK中。在后台将新外观应用于这些控件。

您还可以通过CSS属性来配置大多数控件的新外观，从而使您可以继续使用与以前相同的Java代码(不使用JMetro时)。将来，我可能会添加新的API以通过代码(例如Java代码)配置这些功能，但我仍然计划保留所需的最少API。

旧的JMetro进度栏

像往常一样，我首先要展示进度条在以前版本中的外观：

ProgressBar旧的JMetro灯光主题

ProgressBar旧的JMetro黑暗主题

这是用于确定状态的简单平面设计样式。在旧版本中，不确定状态没有样式。

新的JMetro进度栏

在继续显示新的进度栏外观之前，我想解释为什么存在两种可能的状态。当您可以确定地确定特定任务已取得多少进展时，您将使用确定状态。在这种状态下，您将显示已完成了多少进度。进度量由进度栏的“填充”程度决定。当任务即将完成时，进度栏将被“填满”或几乎“填满”。

相反，当您无法确定已完成的进度或由于某种原因而不想计算进度时，可以将状态设置为不确定。这不会显示已取得多少进展。但这至少将表明正在进行一些计算。

受Fluent Design启发，您可以在下面看到进度栏的新样式。现在，两个新的不同外观代表了这两个状态。自从我在Twitter上的最后一篇文章以来，我对不确定的动画进行了一些调整。

ProgressBar新的JMetro主题

上面的动画可能看起来不像实时版本那样流畅。我没有时间发布视频而不是GIF。那可能会更好地证明实际结果。

深色和浅色版本之间没有区别。

进度栏详细信息

我试图使新进度条CSS样式与原始JavaFX Modena CSS尽可能相似。您仍然可以找到一个“ track ”和“ bar ” CSS样式类，可以对其进行样式设置，就像在Modena样式表中一样。对于不确定状态，这是不可能的，因为外观完全不同。

对于不确定状态，每个“点”都是一个具有样式类的Region ： dot和dot_<number> 。 <Number>是点的位置，从1开始。您可以根据需要设置每个“点”的样式，因为每个点都是一个Region 。

例如，如果您希望点逐渐变暗，则可以添加以下CSS：

.progress-bar:indeterminate .dot_1 {
    -fx-background-color: ACCENT_COLOR;
}
 
.progress-bar:indeterminate .dot_2 {
    -fx-background-color: derive(ACCENT_COLOR, -15%);
}
 
.progress-bar:indeterminate .dot_3 {
    -fx-background-color: derive(ACCENT_COLOR, -30%);
}
 
.progress-bar:indeterminate .dot_4 {
    -fx-background-color: derive(ACCENT_COLOR, -45%);
}
 
.progress-bar:indeterminate .dot_5 {
    -fx-background-color: derive(ACCENT_COLOR, -60%);
}

ACCENT_COLOR是JMetro中定义的JavaFX CSS变量，用于指定JMetro主题的强调色。 derive(..)是一个JavaFX CSS帮助器函数，根据传入的百分比是负数还是正数，它可以使给定的颜色变暗或变亮。

此示例将给出以下结果：