JavaFX ProgressBar: làm thế nào để thay đổi màu sắc thanh?

Question

Tôi đang cố gắng để thay đổi màu sắc của quán bar ở ProgressBar với

pBar.setStyle("-fx-accent: green"); 

nhưng tôi đã gặp phải một vấn đề: đó dường như không làm việc phù hợp với tôi! (Hoặc tôi chỉ không hiểu điều gì đó)

đây là mã:

public class JavaFXApplication36 extends Application { 

@Override 
public void start(Stage primaryStage) { 
AnchorPane root = new AnchorPane(); 
ProgressBar pbRed = new ProgressBar(0.4); 
ProgressBar pbGreen = new ProgressBar(0.6); 
pbRed.setLayoutY(10); 
pbGreen.setLayoutY(30); 

pbRed.setStyle("-fx-accent: red;");  // line (1) 
pbGreen.setStyle("-fx-accent: green;"); // line (2) 

root.getChildren().addAll(pbRed, pbGreen); 
Scene scene = new Scene(root, 150, 50); 
primaryStage.setTitle("Hello World!"); 
primaryStage.setScene(scene); 
primaryStage.show(); 
} 
} 

tôi luôn luôn nhận được 2 progressbars đỏ với nó! Có vẻ như mã trong dòng (1) thay đổi kiểu của lớp ProgressBar, không phải là cá thể.

Một khoảnh khắc lạ khác là xóa dòng (1) không dẫn đến 2 thanh tiến trình màu xanh lá cây. Vì vậy, tôi có thể hình rằng dòng (2) là hoàn toàn vô ích !! TẠI SAO?! Đó chắc chắn là kỳ lạ.

Có cách nào để đặt màu riêng biệt cho các thanh tiến trình riêng biệt không?

Answer 1

trả lời được cập nhật thêm một ví dụ phi hoạt hình đơn giản với nhiều thanh tiến

Các mã trong câu hỏi của bạn sẽ hiển thị hai thanh tiến trình màu khác nhau, thực tế là nó không phải là một lỗi trong hệ thống xử lý css JavaFX. Đăng nhập lỗi đối với dự án thời gian chạy tại đây: http://javafx-jira.kenai.com.

Giải pháp thay vì gọi setStyle trên thanh tiến trình, xác định màu nhấn được sử dụng để tô màu thanh tiến trình trong biểu định kiểu và thêm lớp kiểu vào thanh tiến trình. Sau đó, bạn có thể tạo nhiều thanh tiến trình trong cùng một ứng dụng, tất cả đều có màu sắc khác nhau.

Như Uluk chỉ ra, bạn có thể sử dụng JavaFX 2.2 caspian.css kết hợp với JavaFX 2 css reference guide và JavaFX 2 css tutorial để xác định cách tạo kiểu.

Dưới đây là một số mã mẫu tùy chỉnh thanh tiến trình dựa trên thông tin trong các tham chiếu đó.

mẫu css:

/** progress.css 
    place in same directory as 
    ColoredProgressBarStyleSheet.java or SimpleColoredProgressBar.java 
    ensure build system copies the css file to the build output path */ 

.root { -fx-background-color: cornsilk; -fx-padding: 15; } 

.progress-bar { -fx-box-border: goldenrod; } 

.green-bar { -fx-accent: green; } 
.yellow-bar { -fx-accent: yellow; } 
.orange-bar { -fx-accent: orange; } 
.red-bar { -fx-accent: red; } 

chương trình mẫu đơn giản:

import javafx.application.Application; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.ProgressBar; 
import javafx.scene.layout.VBox; 
import javafx.stage.Stage; 

// shows multiple progress bars drawn in different colors. 
public class SimpleColoredProgressBar extends Application { 
    public static void main(String[] args) { launch(args); } 

    @Override public void start(Stage stage) { 
     final VBox layout = new VBox(10); 
     layout.setAlignment(Pos.CENTER); 
     layout.getChildren().setAll(
      new ColoredProgressBar("red-bar", 0.2), 
      new ColoredProgressBar("orange-bar", 0.4), 
      new ColoredProgressBar("yellow-bar", 0.6), 
      new ColoredProgressBar("green-bar", 0.8) 
     ); 
     layout.getStylesheets().add(getClass().getResource("progress.css").toExternalForm()); 
     stage.setScene(new Scene(layout)); 
     stage.show(); 
    } 

    class ColoredProgressBar extends ProgressBar { 
     ColoredProgressBar(String styleClass, double progress) { 
      super(progress); 
      getStyleClass().add(styleClass); 
     } 
    } 
} 

Simple đầu ra chương trình mẫu:

chương trình mẫu phức tạp hơn với một thanh tiến trình hoạt hình duy nhất mà thay đổi màu sắc tự động phụ thuộc g vào lượng tiến bộ đạt được:

import javafx.animation.*; 
import javafx.application.Application; 
import javafx.beans.value.*; 
import javafx.event.*; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.*; 
import javafx.scene.layout.VBox; 
import javafx.stage.Stage; 
import javafx.util.Duration; 

// shows a progress bar whose bar changes color depending on the amount of progress. 
public class ColoredProgressBarStyleSheet extends Application { 
    public static void main(String[] args) { launch(args); } 

    private static final String RED_BAR = "red-bar"; 
    private static final String YELLOW_BAR = "yellow-bar"; 
    private static final String ORANGE_BAR = "orange-bar"; 
    private static final String GREEN_BAR = "green-bar"; 
    private static final String[] barColorStyleClasses = { RED_BAR, ORANGE_BAR, YELLOW_BAR, GREEN_BAR }; 

    @Override public void start(Stage stage) { 
    final ProgressBar bar = new ProgressBar(); 

    final Timeline timeline = new Timeline(
     new KeyFrame(Duration.millis(0), new KeyValue(bar.progressProperty(), 0)), 
     new KeyFrame(Duration.millis(3000), new KeyValue(bar.progressProperty(), 1)) 
    ); 

    Button reset = new Button("Reset"); 
    reset.setOnAction(new EventHandler<ActionEvent>() { 
     @Override public void handle(ActionEvent event) { 
     timeline.playFromStart(); 
     } 
    }); 

    bar.progressProperty().addListener(new ChangeListener<Number>() { 
     @Override public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) { 
     double progress = newValue == null ? 0 : newValue.doubleValue(); 
     if (progress < 0.2) { 
      setBarStyleClass(bar, RED_BAR); 
     } else if (progress < 0.4) { 
      setBarStyleClass(bar, ORANGE_BAR); 
     } else if (progress < 0.6) { 
      setBarStyleClass(bar, YELLOW_BAR); 
     } else { 
      setBarStyleClass(bar, GREEN_BAR); 
     } 
     } 

     private void setBarStyleClass(ProgressBar bar, String barStyleClass) { 
     bar.getStyleClass().removeAll(barColorStyleClasses); 
     bar.getStyleClass().add(barStyleClass); 
     } 
    });  

    final VBox layout = new VBox(10); 
    layout.setAlignment(Pos.CENTER); 
    layout.getChildren().setAll(bar, reset); 
    layout.getStylesheets().add(getClass().getResource("progress.css").toExternalForm()); 
    stage.setScene(new Scene(layout)); 
    stage.show(); 

    timeline.play(); 
    }  
} 

phức tạp hơn đầu ra chương trình mẫu:

Answer 2

Bạn nên ghi đè (hoặc tùy chỉnh) kiểu với bộ chọn CSS JavaFX. Xem caspian.css để biết thêm thông tin. Trong stylesheet riêng bạn xác định:

.progress-bar .bar { 
    -fx-background-color: 
     -fx-box-border, 
     linear-gradient(to bottom, derive(-fx-accent,95%), derive(-fx-accent,10%)), 
     red; /* this line is the background color of the bar */ 
    -fx-background-insets: 0, 1, 2; 
    -fx-padding: 0.416667em; /* 5 */ 
}