ProgressBar
的默认外观是一个蓝色条,随着进度的增加在控件上移动:
我的应用程序中有一张(火车的)图像作为资源。是否有可能使用 CSS(或其他技术)让图像在控件中移动而不是默认的蓝色条?它应该看起来像:
最佳答案
只需使用外部 CSS 文件并在栏上设置背景图像即可。条形图本身由具有样式类 bar
的 Region
表示(请参阅 docs ),因此您只需要类似的东西
.progress-bar > .bar {
-fx-background-image: url("http://upload.wikimedia.org/wikipedia/commons/c/ce/Train_icon_small.png");
-fx-background-position: right ;
-fx-background-color: transparent ;
-fx-background-repeat: repeat-x ;
}
完整示例:
import javafx.application.Application;
import javafx.concurrent.Task;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ProgressBar;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class TrainProgressBar extends Application {
@Override
public void start(Stage primaryStage) {
ProgressBar progressBar = new ProgressBar();
progressBar.setProgress(0);
Button startButton = new Button("Start");
startButton.setOnAction(e -> {
startButton.setDisable(true);
Task<Void> task = new Task<Void>() {
@Override
public Void call() throws Exception {
for (int i = 0; i < 100; i++) {
Thread.sleep(20);
updateProgress(i, 100);
}
updateProgress(100, 100);
return null ;
}
};
progressBar.progressProperty().bind(task.progressProperty());
task.setOnSucceeded(evt -> startButton.setDisable(false));
new Thread(task){{setDaemon(true);}}.start();
});
VBox root = new VBox(15, progressBar, startButton);
Scene scene = new Scene(root, 250, 100);
scene.getStylesheets().add("train-progress-bar.css");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
使用 train-progress-bar.css:
.root {
-fx-padding: 10 ;
-fx-alignment: center ;
}
.progress-bar > .bar {
-fx-background-image: url(http://upload.wikimedia.org/wikipedia/commons/c/ce/Train_icon_small.png);
-fx-background-position: right ;
-fx-background-color: transparent ;
-fx-background-repeat: repeat-x ;
}
关于java - 更改进度条javaFX的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30176510/