如何在JavaFX中获得一个小型ProgressBar [英] How to get a small ProgressBar in JavaFX

问题描述

我正试图获得一个非常小的进度条（大约5px的高度），但我似乎不能低于19或20px。

I'm trying to get an iTunes like progress bar that is very small (height of about 5px) but I can't seem to go any lower than 19 or 20px.

我尝试设置-fx-max-height但无效，也在周围的窗格上。请注意，这个值确实会改变高度 - 我只是不能低于约20px。

I tried setting -fx-max-height with no avail, also on the surrounding pane. Note that this value does indeed change the height - I just can't get it less than about 20px.

任何想法如何实现？我想避免使用普通的矩形来表示进度，因为语义的丧失和辅助技术的支持。

Any ideas how to achieve that? I'd like to avoid using a plain rectangle for indicating progress because of loss of semantic and support of assistive technology.

谢谢。

推荐答案

ProgressBar 默认样式是您无法降低其高度的原因。

The ProgressBar default styling is the reason why you can't reduce its height.

我们可以在 modena.css 文件中看到进度条 CSS选择器：

As we can see in the modena.css file for the progress-bar CSS selector:

.progress-bar > .bar {
    -fx-background-color: linear-gradient(to bottom, derive(-fx-accent, -7%), derive(-fx-accent, 0%), derive(-fx-accent, -3%), derive(-fx-accent, -9%) );
    -fx-background-insets: 3 3 4 3;
    /*-fx-background-radius: 0.583em; *//* 7 */
    -fx-background-radius: 2;
    -fx-padding: 0.75em;
}

两个CSS属性负责： -fx -padding 表示蓝色内栏的高度， -fx-background-insets 表示周围灰色栏的高度。

two CSS properties are responsible for this: -fx-padding for the height of the blue inner bar and -fx-background-insets for the height of the surrounding gray bar.

因此，您可以根据需要自定义此选择器。例如，使用这些属性，您将拥有5个像素的高度：

So you can customize this selector as you need. For instance, with these properties you will have 5 pixels height:

.progress-bar > .bar {
    -fx-background-insets: 1 1 2 1;
    -fx-padding: 0.20em;
}

无需对代码进行高度设置：

No need for height settings on your code:

@Override
public void start(Stage primaryStage) {

    ProgressBar pb = new ProgressBar(0.4);
    pb.setPrefWidth(200);
    StackPane root = new StackPane(pb);

    Scene scene = new Scene(root, 300, 200);
    scene.getStylesheets().add(getClass().getResource("root.css").toExternalForm());
    primaryStage.setTitle("Hello World!");
    primaryStage.setScene(scene);
    primaryStage.show();
}

这篇关于如何在JavaFX中获得一个小型ProgressBar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！