![volumeProgress2]( "volumeProgress2")
本文介绍了JavaFX Slider有两种不同的颜色，例如绿色表示所选区域，红色表示未选区域的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我想要实现的是拥有如下所示的JavaFX Slider： 我希望所选的是绿色，未选择的区域是红色： 这可以通过让我们说简单的CSS来完成，因为JavaFX很棒我相信它可以但现在如何：_） 我在做什么直到.... 到现在为止我只是添加一个StackPane，后面是一个ProgressBar，与Slider的值同步，我的意思是什么？ ：） .fxml： <？xml version =1.0encoding =UTF-8？> <？import java.lang.String？> <？import javafx.geometry.Insets？> <？import javafx.scene.control.ProgressBar？> <？import javafx.scene.control.Slider？> <？import javafx.scene.layout.BorderPane？> <？import javafx.scene.layout.HBox？> <？import javafx.scene.layout.StackPane？> < fx：root prefHeight =389.0prefWidth =228.0style = - fx-background-color：＃202020; stylesheets =@ .. / .. / style / application.csstype =StackPanexmlns：fx =http://javafx.com/fxml/1xmlns =http://javafx.com/javafx /9.0.1\"> < children> < BorderPane fx：id =borderPaneminHeight =0.0minWidth =0.0> < bottom> < StackPane minHeight =0.0minWidth =0.0BorderPane.alignment =CENTER> < children> < HBox alignment =CENTERmaxHeight = - InfinityminHeight =0.0minWidth =0.0prefHeight =15.0> < children> < ProgressBar fx：id =volumeProgress1maxWidth =1.7976931348623157E308minHeight =0.0minWidth =0.0mouseTransparent =trueprefHeight =15.0progress =1.0HBox.hgrow = ALWAYS> < styleClass> < String fx：value =transparent-progress-bar/> < String fx：value =transparent-volume-progress-bar2-nostrip/> < / styleClass> < / ProgressBar> < ProgressBar fx：id =volumeProgress2layoutX =10.0layoutY =10.0maxWidth =1.7976931348623157E308minHeight =0.0minWidth =0.0mouseTransparent =trueprefHeight =15.0 progress =1.0HBox.hgrow =ALWAYS> < styleClass> < String fx：value =transparent-progress-bar/> < String fx：value =transparent-volume-progress-bar3-nostrip/> < / styleClass> < / ProgressBar> < / children> < / HBox> < Slider fx：id =masterVolumeSlidermajorTickUnit =15.0max =150.0maxWidth =1.7976931348623157E308minorTickCount =55value =75.0> < styleClass> < String fx：value =transparency-slider/> < String fx：value =timer-slider/> < / styleClass> < / Slider> < / children> < BorderPane.margin> < Insets left =5.0right =5.0/> < /BorderPane.margin> < / StackPane> < / bottom> < / BorderPane> < / children> < / fx：root> .java import java.io.IOException; import javafx.fxml.FXML; import javafx.fxml.FXMLLoader; import javafx.scene.control.ProgressBar; import javafx.scene.control.Slider; import javafx.scene.layout.BorderPane; import javafx.scene.layout.StackPane; import main.java.com.goxr3plus.xr3player.application.tools.InfoTool; 公共类MixTabInterface扩展StackPane { // -------------------------- ------------------------------------ @FXML 私人BorderPane borderPane; @FXML private ProgressBar volumeProgress1; @FXML private ProgressBar volumeProgress2; @FXML private Slider masterVolumeSlider; // ---------------------------------------- --------------------- / ** *构造函数。 * / public MixTabInterface（）{ // ------------------------- ----------- FXMLLOADER -------------------------------------- - FXMLLoader loader = new FXMLLoader（getClass（）。getResource（InfoTool.PLAYERS_FXMLS +MixTabInterface.fxml））; loader.setController（this）; loader.setRoot（this）; try { loader.load（）; } catch（IOException ex）{ ex.printStackTrace（）; } } / ** * fxml初始化后立即调用 * / @FXML private void initialize（）{ // masterVolumeSlider masterVolumeSlider.boundsInLocalProperty（）。addListener（（observable，oldValue，newValue） - > calculateBars（））; masterVolumeSlider.valueProperty（）。addListener（（observable，oldValue，newValue） - > { calculateBars（）; }）; } / ** *计算定位条b $ b * / private void calculateBars（）{ //变量 double value = masterVolumeSlider.getValue（）; double half = masterVolumeSlider.getMax（）/ 2; double masterVolumeSliderWidth = masterVolumeSlider.getWidth（）; // Progress Max1 volumeProgress1.setProgress（1）; volumeProgress2.setProgress（1）; //以下是思维技巧 if（（int）value ==（int）half）{ volumeProgress1.setMinWidth（masterVolumeSliderWidth / 2）; volumeProgress2.setMinWidth（masterVolumeSliderWidth / 2）; }否则if（value< half）{ double progress = 1.0 - （value / half）; double minimumWidth = masterVolumeSlider.getWidth（）/ 2 +（masterVolumeSlider.getWidth（）/ 2）*（进度）; volumeProgress1.setMinWidth（masterVolumeSliderWidth - minimumWidth）; volumeProgress1.setMaxWidth（masterVolumeSliderWidth - minimumWidth）; volumeProgress2.setMinWidth（minimumWidth）; }否则if（value> half）{ double progress =（value - half）/ half; double minimumWidth = masterVolumeSlider.getWidth（）/ 2 +（masterVolumeSlider.getWidth（）/ 2）*（进度）; volumeProgress1.setMinWidth（minimumWidth）; volumeProgress2.setMinWidth（masterVolumeSliderWidth - minimumWidth）; volumeProgress2.setMaxWidth（masterVolumeSliderWidth - minimumWidth）; } } / ** * @return borderPane * / public BorderPane getBorderPane（）{ 返回borderPane; } / ** * @return masterVolumeSlider * / public Slider getMasterVolumeSlider（）{ return masterVolumeSlider; } } .css .transparent-volume-progress-bar2-nostrip> .bar，.transparent-volume-progress-bar2-nostrip：indeterminate .bar，.transparent-volume-progress-bar2-nostrip：determinate .track，.transparent-volume-progress-bar2-nostrip：indeterminate .track { -fx-accent：rgb（0.0,144.0,255.0）; -fx-background-color：-fx-accent; -fx-background-radius：0.0; -fx-border-radius：0.0; } .transparent-volume-progress-bar3-nostrip> .bar，.transparent-volume-progress-bar3-nostrip：indeterminate .bar，.transparent-volume-progress-bar3-nostrip：determinate .track，.transparent-volume-progress-bar3-nostrip：indeterminate .track { -fx-accent：＃fc4f4f; -fx-background-color：-fx-accent; -fx-background-radius：0.0; -fx-border-radius：0.0; } .progress-bar> .bar { -fx-accent：firebrick; / * - fx-background-color：firebrick; * / -fx-background-color：线性渐变（从0.0px 0.75em到0.75em 0.0px，重复， -fx-accent 0.0％， -fx-accent 49.0％， derive（-fx-accent，30.0％）50.0％， derive（-fx -accent，30.0％）99.0％）; -fx-background-insets：3.0; -fx-padding：0.2em; } .transparent-progress-bar：determinate .track，.transparent-progress-bar：indeterminate .track { -fx-background-color：rgb（0.0， 0.0,0.0,0.5）; } / * .transparent-progress-bar * / .transparent-progress-bar> .bar，.transparent-progress-bar：indeterminate .bar { -fx-accent：firebrick; } What i want to achieve is the have a JavaFX Slider like the below :I want the selected are to be green and the unselected area to be red :Can this be done with let's say simple css because JavaFX is awesome i am sure it can but now how :_)What i was doing till ....Until now i was just adding a StackPane and behind that a ProgressBar , synchronized with the value of the Slider , what i mean? :), but hey now i need two colors and i have to create two ProgressBars in a StackPane with different colors (RED and Green) .... to much code ... 解决方案 1 slider and 2 progress bars , I will post below the .fxml code , .java code and the needed .css for look and feel :)Any question feel free to answer :)As for the code , this is created for XR3Player (Open Source Github Project).fxml:<?xml version="1.0" encoding="UTF-8"?><?import java.lang.String?><?import javafx.geometry.Insets?><?import javafx.scene.control.ProgressBar?><?import javafx.scene.control.Slider?><?import javafx.scene.layout.BorderPane?><?import javafx.scene.layout.HBox?><?import javafx.scene.layout.StackPane?><fx:root prefHeight="389.0" prefWidth="228.0" style="-fx-background-color: #202020;" stylesheets="@../../style/application.css" type="StackPane" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/9.0.1"> <children> <BorderPane fx:id="borderPane" minHeight="0.0" minWidth="0.0"> <bottom> <StackPane minHeight="0.0" minWidth="0.0" BorderPane.alignment="CENTER"> <children> <HBox alignment="CENTER" maxHeight="-Infinity" minHeight="0.0" minWidth="0.0" prefHeight="15.0"> <children> <ProgressBar fx:id="volumeProgress1" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0" mouseTransparent="true" prefHeight="15.0" progress="1.0" HBox.hgrow="ALWAYS"> <styleClass> <String fx:value="transparent-progress-bar" /> <String fx:value="transparent-volume-progress-bar2-nostrip" /> </styleClass> </ProgressBar> <ProgressBar fx:id="volumeProgress2" layoutX="10.0" layoutY="10.0" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0" mouseTransparent="true" prefHeight="15.0" progress="1.0" HBox.hgrow="ALWAYS"> <styleClass> <String fx:value="transparent-progress-bar" /> <String fx:value="transparent-volume-progress-bar3-nostrip" /> </styleClass> </ProgressBar> </children> </HBox> <Slider fx:id="masterVolumeSlider" majorTickUnit="15.0" max="150.0" maxWidth="1.7976931348623157E308" minorTickCount="55" value="75.0"> <styleClass> <String fx:value="transparency-slider" /> <String fx:value="timer-slider" /> </styleClass> </Slider> </children> <BorderPane.margin> <Insets left="5.0" right="5.0" /> </BorderPane.margin> </StackPane> </bottom> </BorderPane> </children></fx:root>.javaimport java.io.IOException;import javafx.fxml.FXML;import javafx.fxml.FXMLLoader;import javafx.scene.control.ProgressBar;import javafx.scene.control.Slider;import javafx.scene.layout.BorderPane;import javafx.scene.layout.StackPane;import main.java.com.goxr3plus.xr3player.application.tools.InfoTool;public class MixTabInterface extends StackPane { //-------------------------------------------------------------- @FXML private BorderPane borderPane; @FXML private ProgressBar volumeProgress1; @FXML private ProgressBar volumeProgress2; @FXML private Slider masterVolumeSlider; // ------------------------------------------------------------- /** * Constructor. */ public MixTabInterface() { // ------------------------------------FXMLLOADER ---------------------------------------- FXMLLoader loader = new FXMLLoader(getClass().getResource(InfoTool.PLAYERS_FXMLS + "MixTabInterface.fxml")); loader.setController(this); loader.setRoot(this); try { loader.load(); } catch (IOException ex) { ex.printStackTrace(); } } /** * Called as soon as fxml is initialized */ @FXML private void initialize() { //masterVolumeSlider masterVolumeSlider.boundsInLocalProperty().addListener((observable , oldValue , newValue) -> calculateBars()); masterVolumeSlider.valueProperty().addListener((observable , oldValue , newValue) -> { calculateBars(); }); } /** * Calculate bars positioning */ private void calculateBars() { //Variables double value = masterVolumeSlider.getValue(); double half = masterVolumeSlider.getMax() / 2; double masterVolumeSliderWidth = masterVolumeSlider.getWidth(); //Progress Max1 volumeProgress1.setProgress(1); volumeProgress2.setProgress(1); //Below is mind tricks if ((int) value == (int) half) { volumeProgress1.setMinWidth(masterVolumeSliderWidth / 2); volumeProgress2.setMinWidth(masterVolumeSliderWidth / 2); } else if (value < half) { double progress = 1.0 - ( value / half ); double minimumWidth = masterVolumeSlider.getWidth() / 2 + ( masterVolumeSlider.getWidth() / 2 ) * ( progress ); volumeProgress1.setMinWidth(masterVolumeSliderWidth - minimumWidth); volumeProgress1.setMaxWidth(masterVolumeSliderWidth - minimumWidth); volumeProgress2.setMinWidth(minimumWidth); } else if (value > half) { double progress = ( value - half ) / half; double minimumWidth = masterVolumeSlider.getWidth() / 2 + ( masterVolumeSlider.getWidth() / 2 ) * ( progress ); volumeProgress1.setMinWidth(minimumWidth); volumeProgress2.setMinWidth(masterVolumeSliderWidth - minimumWidth); volumeProgress2.setMaxWidth(masterVolumeSliderWidth - minimumWidth); } } /** * @return the borderPane */ public BorderPane getBorderPane() { return borderPane; } /** * @return the masterVolumeSlider */ public Slider getMasterVolumeSlider() { return masterVolumeSlider; }}.css.transparent-volume-progress-bar2-nostrip > .bar,.transparent-volume-progress-bar2-nostrip:indeterminate .bar,.transparent-volume-progress-bar2-nostrip:determinate .track,.transparent-volume-progress-bar2-nostrip:indeterminate .track{ -fx-accent:rgb(0.0, 144.0, 255.0); -fx-background-color: -fx-accent; -fx-background-radius:0.0; -fx-border-radius:0.0;}.transparent-volume-progress-bar3-nostrip > .bar,.transparent-volume-progress-bar3-nostrip:indeterminate .bar,.transparent-volume-progress-bar3-nostrip:determinate .track,.transparent-volume-progress-bar3-nostrip:indeterminate .track{ -fx-accent:#fc4f4f; -fx-background-color: -fx-accent; -fx-background-radius:0.0; -fx-border-radius:0.0;}.progress-bar > .bar { -fx-accent:firebrick; /*-fx-background-color:firebrick;*/ -fx-background-color: linear-gradient( from 0.0px 0.75em to 0.75em 0.0px, repeat, -fx-accent 0.0%, -fx-accent 49.0%, derive(-fx-accent, 30.0%) 50.0%, derive(-fx-accent, 30.0%) 99.0% ); -fx-background-insets: 3.0; -fx-padding: 0.2em;}.transparent-progress-bar:determinate .track,.transparent-progress-bar:indeterminate .track{ -fx-background-color:rgb(0.0,0.0,0.0,0.5);} /* .transparent-progress-bar */.transparent-progress-bar > .bar,.transparent-progress-bar:indeterminate .bar{ -fx-accent:firebrick;} 这篇关于JavaFX Slider有两种不同的颜色，例如绿色表示所选区域，红色表示未选区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！ 07-30 23:45