如何在javafx中更改滑塊的填充顏色

Question

即時通訊制作視頻播放器，並想使用滑塊的時間軸，我想將滑塊從第一張圖片更改為第二張圖片

我可以使用CSS代碼執行此操作嗎？ 如果是的話，這是什么代碼

Answer 1

下面的長篇文章..如果您想要一種簡單的方法來實現滑塊上的​​顏色，我應該提到您可以只使用具有所需功能的JFoenix Slider 。

盡管實際上您無需原生使用相同的結果，也無需使用第三庫。

嗯，沒有像-fx-progress-color這樣的CSS規則可以將其設置為特定的顏色，然后就完成了。 .track的顏色是通過以下CSS規則設置的：

.slider .track {
      -fx-background-color:
          -fx-shadow-highlight-color,
          linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
          linear-gradient(to bottom,
            derive(-fx-control-inner-background, -9%),
            derive(-fx-control-inner-background, 0%),
            derive(-fx-control-inner-background, -5%),
            derive(-fx-control-inner-background, -12%)
          );
    -fx-background-insets: 0 0 -1 0, 0, 1;
    -fx-background-radius: 0.25em, 0.25em, 0.166667em; /* 3 3 2 */
    -fx-padding: 0.25em; /* 3 */
}

您只需要做幾件事，第一件事是偵聽滑塊的值更改，第二件事是根據滑塊的值更新軌道顏色。 要設置背景顏色，您將需要為背景設置線性漸變，例如：

-fx-background-color: linear-gradient(to right, #2D819D START, #969696 END);

在上面的代碼中，您將使用從左到右的線性漸變背景，使用＃2D819D顏色（代表“進度”顏色）和＃969696代表剩余的進度。 現在，START和END應該是數字，並且為了具有所需的外觀，兩個數字必須相等，因此當一個停止時另一個開始。 例如，如果您設置：

-fx-background-color: linear-gradient(to right, #2D819D 20%, #969696 20%);

真正的挑戰是找到一種方法來在滑塊的ChangeListener中以編程方式設置這些值。 我的第一種方法是使用CSS變量，例如：

.slider .track{
    -progress : 0.2;
    -fx-background-color: linear-gradient(to right, #2D819D -progress, #969696 -progress);
}

並更新-progress使用上的ChangeListener內聯CSS規則。 遺憾的是，由於某些原因，該功能不受支持。 我也想找出原因。 另外，您不能為子類應用內聯CSS，這意味着您不能執行slide.setStyle（“。track {...}”）;

綜上所述，您可以：

1.使用查找訪問滑塊的軌道，然后直接應用CSS。

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Slider;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class CustomSlider extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        BorderPane mainPane = new BorderPane();
        mainPane.setPadding(new Insets(15));

        Slider slider = new Slider();
        slider.setId("color-slider");

        mainPane.setCenter(slider);

        Scene scene = new Scene(mainPane, 250, 400);
        stage.setScene(scene);
        stage.show();

        StackPane trackPane = (StackPane) slider.lookup(".track");

        slider.valueProperty().addListener(new ChangeListener<Number>() {
            public void changed(ObservableValue<? extends Number> ov, Number old_val, Number new_val) {
                String style = String.format("-fx-background-color: linear-gradient(to right, #2D819D %d%%, #969696 %d%%);",
                        new_val.intValue(), new_val.intValue());
                trackPane.setStyle(style);
            }
        });

        trackPane.setStyle("-fx-background-color: linear-gradient(to right, #2D819D 0%, #969696 0%);");

    }

    public static void main(String[] args) {
        launch(args);
    }
}

2.從頭開始制作自定義滑塊（不是那么難）

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Slider;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class SliderTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        BorderPane mainPane = new BorderPane();
        mainPane.setPadding(new Insets(15));

        mainPane.setCenter(new ColorSlider());

        Scene scene = new Scene(mainPane, 250, 400);
        primaryStage.setScene(scene);
        primaryStage.show();

    }

    public static void main(String[] args) {
        launch(args);
    }

    public class ColorSlider extends StackPane {

        public ColorSlider() {
            getStylesheets().add(this.getClass().getResource("colorSlider.css").toExternalForm());
            Slider slider = new Slider();
            slider.setId("color-slider");

            // The rectangle which shows the progress
            Rectangle progressRec = new Rectangle();
            // Bind both width and height to match the size of Slider
            progressRec.heightProperty().bind(slider.heightProperty().subtract(7));
            progressRec.widthProperty().bind(slider.widthProperty());

            progressRec.setFill(Color.web("#969696"));

            // Make the corners of Rectangle to be rounded
            progressRec.setArcHeight(15);
            progressRec.setArcWidth(15);

            // Listen on value changes on the slider to update the progress (color)
            slider.valueProperty().addListener(new ChangeListener<Number>() {
                public void changed(ObservableValue<? extends Number> ov, Number old_val, Number new_val) {
                    // Using linear gradient we can fill two colors to show the progress
                    // the new_val gets values between 0 - 100
                    String style = String.format("-fx-fill: linear-gradient(to right, #2D819D %d%%, #969696 %d%%);",
                            new_val.intValue(), new_val.intValue());
                    // set the Style
                    progressRec.setStyle(style);
                }
            });

            getChildren().addAll(progressRec, slider);
        }
    }
}

colorSlider.css

#color-slider .track{
    -fx-background-color:transparent;
}