如何在JavaFX中获得一个小型ProgressBar

Question

我试图让iTunes像进度条一样非常小（高度约为5px），但我似乎不会低于19或20px。

我尝试设置-fx-max-height无效，也在周围的窗格上。请注意，此值确实会改变高度 - 我只能将其小于约20px。

任何想法如何实现？我希望避免使用普通矩形来表示由于失去语义和支持辅助技术而取得进展。

感谢。

Answer 1

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

我们可以在modena.css CSS选择器的progress-bar文件中看到：

.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表示周围灰色栏的高度。

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

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

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

@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();
}