沃梦达 / 编程问答 / 前端问题 / 正文

具有 2 种不同颜色的 JavaFX 滑块，例如选定区域为绿色，未选定区域为红色

前端问题
2022-01-01

JavaFX Slider with 2 different colors , for example green for selected area and red for unselected area(具有 2 种不同颜色的 JavaFX 滑块，例如选定区域为绿色，未选定区域为红色)

本文介绍了具有 2 种不同颜色的 JavaFX 滑块，例如选定区域为绿色，未选定区域为红色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想要实现的是拥有一个如下所示的 JavaFX 滑块:

我希望选定区域为绿色，未选定区域为红色:

这可以用简单的 css 来完成吗，因为 JavaFX 很棒，我相信它可以，但现在如何:_)

<小时>

我在做什么直到 ....

直到现在我只是添加一个 StackPane 并在其后面添加一个 ProgressBar ，与 Slider 的值同步，我的意思是什么?:)

，但是嘿，现在我需要两种颜色，我必须在 StackPane 中创建两个不同颜色(红色和绿色)的 ProgressBars .... 很多代码...

解决方案

1个滑块和2个进度条，下面我会贴出.fxml代码，.java代码以及外观和感觉所需的 .css :)

任何问题都可以回答:)

至于代码，这是为

.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"><孩子们><BorderPane fx:id="borderPane" minHeight="0.0" minWidth="0.0"><底部><StackPane minHeight="0.0" minWidth="0.0" BorderPane.alignment="CENTER"><孩子们><HBox alignment="CENTER" maxHeight="-Infinity" minHeight="0.0" minWidth="0.0" prefHeight="15.0"><孩子们><ProgressBar fx:id="volumeProgress1" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0" mouseTransparent="true" prefHeight="15.0" progress="1.0" HBox.hgrow="ALWAYS"><风格类><String fx:value="透明进度条"/><String fx:value="transparent-volume-progress-bar2-nostrip"/></styleClass></进度条><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="总是"><风格类><String fx:value="透明进度条"/><String fx:value="transparent-volume-progress-bar3-nostrip"/></styleClass></进度条></孩子们></HBox><滑块 fx:id="masterVolumeSlider" majorTickUnit="15.0" max="150.0" maxWidth="1.7976931348623157E308" minorTickCount="55" value="75.0"><风格类><String fx:value="透明滑块"/><String fx:value="timer-slider"/></styleClass></滑块></孩子们><BorderPane.margin><插入左=5.0"右=5.0"/></BorderPane.margin></StackPane></底部></边框窗格></孩子们></fx:root>

.java

import java.io.IOException;导入 javafx.fxml.FXML；导入 javafx.fxml.FXMLLoader；导入 javafx.scene.control.ProgressBar；导入 javafx.scene.control.Slider；导入 javafx.scene.layout.BorderPane；导入 javafx.scene.layout.StackPane；导入 main.java.com.goxr3plus.xr3player.application.tools.InfoTool；公共类 MixTabInterface 扩展 StackPane {//--------------------------------------------------------------@FXML私人边界窗格边界窗格；@FXML私人进度条volumeProgress1；@FXML私人进度条volumeProgress2；@FXML私人滑块 masterVolumeSlider;//-------------------------------------------------------------/*** 构造函数.*/公共 MixTabInterface() {//------------------------------------FXMLLOADER -----------------------------------------------------FXMLLoader loader = new FXMLLoader(getClass().getResource(InfoTool.PLAYERS_FXMLS + "MixTabInterface.fxml"));loader.setController(this);loader.setRoot(this);尝试 {加载器.load();} 捕捉(IOException ex){ex.printStackTrace();}}/*** fxml 初始化后立即调用*/@FXML私人无效初始化(){//masterVolumeSlidermasterVolumeSlider.boundsInLocalProperty().addListener((observable, oldValue, newValue) -> calculateBars());masterVolumeSlider.valueProperty().addListener((observable, oldValue, newValue) -> {计算条()；});}/*** 计算条形定位*/私人无效计算条(){//变量双值 = masterVolumeSlider.getValue();双半 = masterVolumeSlider.getMax()/2;双 masterVolumeSliderWidth = masterVolumeSlider.getWidth();//进度最大值1volumeProgress1.setProgress(1);volumeProgress2.setProgress(1);//下面是思维技巧如果((int)值==(int)一半){volumeProgress1.setMinWidth(masterVolumeSliderWidth/2);volumeProgress2.setMinWidth(masterVolumeSliderWidth/2);} else if (value < half) {双倍进度 = 1.0 - (价值/一半);双 minimumWidth = masterVolumeSlider.getWidth()/2 + ( masterVolumeSlider.getWidth()/2 ) * ( 进度 );volumeProgress1.setMinWidth(masterVolumeSliderWidth - minimumWidth);volumeProgress1.setMaxWidth(masterVolumeSliderWidth - minimumWidth);volumeProgress2.setMinWidth(minimumWidth);} else if (value > half) {双倍进度=(价值-一半)/一半；双 minimumWidth = masterVolumeSlider.getWidth()/2 + ( masterVolumeSlider.getWidth()/2 ) * ( 进度 );volumeProgress1.setMinWidth(minimumWidth);volumeProgress2.setMinWidth(masterVolumeSliderWidth - minimumWidth);volumeProgress2.setMaxWidth(masterVolumeSliderWidth - minimumWidth);}}/*** @return 边框*/公共BorderPane getBorderPane(){返回边界窗格；}/*** @return 主音量滑块*/公共滑块 getMasterVolumeSlider() {返回主音量滑块；}}

.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 重音:rgb(0.0, 144.0, 255.0);-fx-背景色:-fx-口音；-fx-背景-半径:0.0；-fx-边界半径: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 口音:#fc4f4f；-fx-背景色:-fx-口音；-fx-背景-半径:0.0；-fx-边界半径:0.0；}.进度条>.酒吧 {-fx-口音:耐火砖；/*-fx-背景色:耐火砖；*/-fx-背景色:线性渐变(从 0.0px 0.75em 到 0.75em 0.0px，重复，-fx 重音 0.0%,-fx 口音 49.0%,派生(-fx-accent，30.0%)50.0%，派生(-fx-accent, 30.0%) 99.0%);-fx-背景-插图:3.0；-fx-填充:0.2em；}.transparent-progress-bar:determinate .track,.transparent-progress-bar:indeterminate .track{-fx-背景色:rgb(0.0,0.0,0.0,0.5);}/* .透明进度条 */.透明进度条>.bar,.transparent-progress-bar: 不确定 .bar{-fx-口音:耐火砖；}

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>

.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;

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;
}

这篇关于具有 2 种不同颜色的 JavaFX 滑块，例如选定区域为绿色，未选定区域为红色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

本文标题为：具有 2 种不同颜色的 JavaFX 滑块，例如选定区域为绿色，未选定区域为红色

上一篇： 是否可以使用固定高度的全宽 JSSOR 滑块?
下一篇： 具有放大/缩小过渡效果的全屏滑块

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2