JavaFx：滑块 - 带颜色的双向移动

Question

背景：

我试图在 JavaFx 的 TableView 中创建实时股票走势的视觉表示，如 2 个附加图像（绿色表示正值，琥珀色表示负值，左下角的值表示当天的最低点，右下角的值表示当天的高点）。运动将由实时数据流控制。因此，如果滑动标记超过当天的开放值，则需要能够双向滑动并改变颜色

研究：

我总是提到这个精彩的 ->链接，但在这种情况下寻求指导，因为我不确定它对于进度栏或滑块是否可行。

任何可以实现这一目标的指示都将不胜感激。

Answer 1

您可以使用滑块或进度条相当简单地完成此操作，使用 CSS 更改轨道的背景颜色。对于进度条，只需将进度条设置为透明即可。

基本思想是使用线性“渐变”。如果起始值为x%且当前值为y%，则y > x您需要颜色停止于

(default 0%, default x%, green x%, green y%, default y%, default 100%)

其中default是默认背景颜色。（与红色替换绿色类似，并且x如果y则切换y < x。）

这是一个 SSCCE：

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.ProgressBar;
import javafx.scene.control.Slider;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class BidirectionalSlider extends Application {

    @Override
    public void start(Stage primaryStage) {
        double startingValue = 0.5 ;
        Slider slider = new Slider(0, 1, startingValue);

        slider.styleProperty().bind(Bindings.createStringBinding(() -> {

            double min = slider.getMin();
            double max = slider.getMax();
            double value = slider.getValue() ;

            return createSliderStyle(startingValue, min, max, value);

        }, slider.valueProperty()));

        ProgressBar progressBar1 = new ProgressBar(0.1);
        ProgressBar progressBar2 = new ProgressBar(0.9);

        progressBar1.styleProperty().bind(Bindings.createStringBinding(() -> 
            createSliderStyle(startingValue, 0.0, 1.0, progressBar1.getProgress()), 
            progressBar1.progressProperty()));

        progressBar2.styleProperty().bind(Bindings.createStringBinding(() -> 
            createSliderStyle(startingValue, 0.0, 1.0, progressBar2.getProgress()), 
            progressBar2.progressProperty()));

        VBox root = new VBox(5, slider, progressBar1, progressBar2);
        root.setAlignment(Pos.CENTER);

        Scene scene = new Scene(root, 400, 400);
        scene.getStylesheets().add("style.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private String createSliderStyle(double startingValue, double min, double max, double value) {
        StringBuilder gradient = new StringBuilder("-slider-track-color: ");
        String defaultBG = "derive(-fx-control-inner-background, -5%) " ;
        gradient.append("linear-gradient(to right, ").append(defaultBG).append("0%, ") ;

        double valuePercent = 100.0 * (value - min) / (max - min);

        double startingValuePercent = startingValue * 100.0;


        if (valuePercent > startingValuePercent) {
            gradient.append(defaultBG).append(startingValuePercent).append("%, ");
            gradient.append("green ").append(startingValuePercent).append("%, ");
            gradient.append("green ").append(valuePercent).append("%, ");
            gradient.append(defaultBG).append(valuePercent).append("%, ");
            gradient.append(defaultBG).append("100%); ");
        } else {
            gradient.append(defaultBG).append(valuePercent).append("%, ");
            gradient.append("red ").append(valuePercent).append("%, ");
            gradient.append("red ").append(startingValuePercent).append("%, ");
            gradient.append(defaultBG).append(startingValuePercent).append("%, ");
            gradient.append(defaultBG).append("100%); ");               
        }
        return gradient.toString() ;
    }

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

和基本 CSS 文件 ( style.css)：

(default 0%, default x%, green x%, green y%, default y%, default 100%)