Динамическое изменение свойства JavaFX css

Question

В моем FXML у меня есть простой слайдер:

<Slider fx:id="timeSlider" showTickLabels="true" GridPane.rowIndex="3" GridPane.columnIndex="0" GridPane.columnSpan="4"/>

Этот слайдер является частью музыкального приложения для настольного компьютера, которое я пишу, и оно показывает, как далеко в песне был воспроизведен.Я написал событие изменения, которое вызывается каждый раз, когда изменяется время песни, и это успешно завершает скольжение ручки / большого пальца вниз.

Теперь я пытаюсь также покрасить левую часть (уже сыгранную) синими правая часть (которую еще предстоит сыграть) белая, когда ручка сдвигается вниз.Если я жестко закодирую эту строку в своем CSS, я смогу добиться затухания сине-белого на отметке 50%.

.slider .track {-fx-background-color: linear-gradient(to right, #90C7E0 50%, white 50%);}

Однако мне нужно, чтобы это было динамично в зависимости от того, как далеко я нахожусь в песне.Я написал следующий код, но, кажется, не могу применить стиль CSS

song.getMediaPlayer().currentTimeProperty().addListener(new ChangeListener<Duration>() {
        @Override
        public void changed(ObservableValue<? extends Duration> observable, Duration oldValue, Duration newValue) {
            if (newValue != null && timeSlider != null) {
                timeSlider.setValue(newValue.toSeconds());
                double percentage = (newValue.toSeconds()/song.getDuration())*100;
                String css = ".slider .track{-fx-background-color: linear-gradient(to right, #90C7E0 " +
                 percentage + "%, white " + percentage + "%);}";
                timeSlider.getStyleClass().add(css);
            }
        }
    });

Я считаю, что это связано с тем, как я добавляю CSS как стиль, потому что даже добавление простогоне динамический стиль не работает.Я не получаю ошибок, поэтому я не уверен, что я делаю неправильно.

Любая помощь приветствуется, и лучшие способы сделать это также приветствуются.Спасибо!

Answer 1

Метод getStyleClass() возвращает список имен классов CSS, связанных с узлом.Эти имена классов используются для определения того, какие правила во внешнем файле CSS применяются к узлу.Здесь нельзя передавать селекторы и правила CSS.

Вместо этого напишите внешний файл CSS, который содержит правило для цвета фона для дорожки.Вы можете использовать «искомый цвет» здесь, который в основном работает как «переменная CSS».Определите «искомый цвет» для ползунка и используйте его в правиле для дорожки, чтобы установить цвет фона:

style.css:

.slider {
    -track-color: white ;
}
.slider .track {
    -fx-background-color: -track-color ;
}

Теперь вJava-код, вы можете обновить значение для искомого цвета, вызвав setStyle("-track-color: /* someColor */") на слайдере.Вот краткий пример:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Slider;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class SliderTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        Slider slider = new Slider();
        slider.valueProperty().addListener((obs, oldValue, newValue) -> {
            double percentage = 100.0 * (newValue.doubleValue() - slider.getMin()) / (slider.getMax() - slider.getMin());
            slider.setStyle("-track-color: linear-gradient(to right, #90C7E0 " + percentage+"%, white "+percentage+("%);"));
        });
        StackPane root = new StackPane(slider);
        root.setPadding(new Insets(20));
        Scene scene = new Scene(root);
        scene.getStylesheets().add("style.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

В вашем приложении вы можете сделать то же самое, используя текущее время медиаплеера (или просто зарегистрировать слушателя в свойстве значения ползунка, поскольку оно тоже меняется).

Answer 2

С помощью тех, кто в комментариях, я нашел решение,

.getStyleClass.add (...) не сделал то, что я изначально думал, и мне нужно было использовать .setStyle (...) вместо этого мне нужно было установить стиль на слайдере TRACK, а не на самом слайдере.Вот мой код сейчас ...

public void changed(ObservableValue<? extends Duration> observable, Duration oldValue, Duration newValue) {
            if (newValue != null && timeSlider != null) {
                double percentage = (newValue.toSeconds()/song.getDuration())*100;
                String cssValue = "-fx-background-color: linear-gradient(to right, #90C7E0 " +
                 percentage + "%, white " + percentage + "%)";
                StackPane sliderTrack = (StackPane) timeSlider.lookup(".track");
                sliderTrack.setStyle(cssValue);
                timeSlider.setValue(newValue.toSeconds());
            }
        }