[英]Dynamically change JavaFX css property
在我的FXML中,我有一個簡單的滑塊:
<Slider fx:id="timeSlider" showTickLabels="true" GridPane.rowIndex="3" GridPane.columnIndex="0" GridPane.columnSpan="4"/>
該滑塊是我正在編寫的桌面音樂應用程序的一部分,它表示歌曲已播放多遠。 我編寫了一個change事件,每次更改歌曲時間時都會調用此事件,並且成功完成了向下滑動旋鈕/拇指的操作。
現在,當旋鈕向下滑動時,我也嘗試將左部分(已播放)和右部分(尚未播放)塗成白色。 如果將這行代碼硬編碼到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添加為樣式有關,因為即使添加簡單的非動態樣式也不起作用。 我沒有錯誤,所以我不確定自己在做什么錯。
感謝您的任何幫助,也感謝實現此目的的更好方法。 謝謝!
方法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);
}
}
在您的應用程序中,您可以使用媒體播放器的當前時間執行相同的操作(或僅在滑塊的value屬性上注冊一個偵聽器,因為這也正在發生變化)。
在評論中,我提出了一個解決方案,
.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());
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.