如何在运行时为javaFX ProgressBar设置特定的css值？

Question

我的ProgressBar通常使用CSS：

.progress-bar > .track {
  -fx-background-color: transparent;
}
.progress-bar > .bar {
  -fx-background-color: transparent;
  -fx-background-image: url('/images/progress_bar.png');
  -fx-background-size: 1600px 50px;
  -fx-background-repeat: no-repeat;
}

图片progress_bar.png是三色条，当它到达它时，它会从绿色变为红色。它在运行应用程序时运行良好。

我的问题是背景大小的硬编码值。这项全高清显示工作完美，但在1366x768上大多数黄色/红色部分都被剪掉了。我想在运行时设置此属性以匹配屏幕大小。这可能吗？

我尝试在setStyle()中使用ProgressBar方法，但没有成功。也许我只是做错了所以如果有人有工作的例子......

我也尝试将宽度设置为100％（而不是px），但这也不起作用。它只显示压缩条，然后将其拉伸至100％宽度。

这是图片：

Answer 1

我不认为单独使用CSS是可行的。但是，可以使用自定义Skin替换bar Node和ImageView，并使用bar作为剪辑：

progress.BarBackgroundProgressBarSkin

public class BarBackgroundProgressBarSkin extends ProgressBarSkin {

    public BarBackgroundProgressBarSkin(ProgressBar control) {
        super(control);
    }

    private ImageView barBackground;

    @Override
    protected void initialize() {
        super.initialize();

        barBackground = new ImageView();

        barBackground.setManaged(false);

        barBackground.setPreserveRatio(false);
        barBackground.getStyleClass().setAll("bar-background");
        int barIndex;

        List<Node> children = getChildren();
        int size = children.size();

        for (barIndex = 0; barIndex < size && !children.get(barIndex).getStyleClass().contains("bar"); barIndex++) {
        }

        Region bar = (Region) children.set(barIndex, barBackground);
        barBackground.setClip(bar);

        // fill the bar for clipping
        bar.setBackground(new Background(new BackgroundFill(Color.WHITE, new CornerRadii(2), new Insets(3, 3, 4, 3))));
    }

    @Override
    protected void layoutChildren(double x, double y, double w, double h) {
        // set pos
        barBackground.setLayoutX(x);
        barBackground.setLayoutY(y);

        // set size
        barBackground.setFitHeight(h);
        barBackground.setFitWidth(w);

        super.layoutChildren(x, y, w, h);
    }

}

的style.css

.progress-bar {
    -fx-skin: 'progress.BarBackgroundProgressBarSkin';
}

.progress-bar > .bar-background {
    /* your image goes here */
    -fx-image: url('http://i.stack.imgur.com/glUAd.png');
}

.progress-bar > .track {
    -fx-background-color: transparent;
}

演示

@Override
public void start(Stage primaryStage) {

    ProgressBar progressBar = new ProgressBar();

    StackPane root = new StackPane();
    root.getChildren().add(progressBar);
    progressBar.setPrefSize(300, 18);

    Scene scene = new Scene(root, 200, 200);

    scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());

    Timeline tl = new Timeline(
            new KeyFrame(Duration.ZERO, new KeyValue(progressBar.progressProperty(), 0d)),
            new KeyFrame(Duration.seconds(10), new KeyValue(progressBar.progressProperty(), 1d, Interpolator.EASE_OUT))
    );

    tl.setCycleCount(Animation.INDEFINITE);
    tl.play();

    primaryStage.setScene(scene);
    primaryStage.show();
}