JavaFX中带有进度条的滑块混合体

Question

我希望处理进度条上的单击事件，就像在滑块上一样，并了解跟踪的百分比。 我想使用滑块而不是进度条，但是它没有突出显示的轨道，只有拇指。

我需要创建类似于播放歌曲的音乐播放器中的进度，并可以通过单击进度来搜索。

有人有提示如何做到这一点吗？

- Vetalll

---

你尝试过什么？(http://mattgemmell.com/2008/12/08/what-have-you-tried/) - Benjamin Gale

我尝试使用CSS进行自定义，但是谷歌没有给出任何结果。文档中也没有关于像拇指和轨道这样的子结构的CSS参考。 - Vetalll

Answer 1

这里有另一种方法。它是滑块和进度条的真正混合 :). 请见SlidoProgressBar！

public class SlidoProgressBarDemo extends Application {

    @Override
    public void start(Stage stage) {
        Group root = new Group();
        Scene scene = new Scene(root);
        scene.getStylesheets().add(this.getClass().getResource("style.css").toExternalForm());
        stage.setScene(scene);
        stage.setTitle("Progress Controls");

        double sliderWidth = 200;

        final Slider slider = new Slider();
        slider.setMin(0);
        slider.setMax(50);
        slider.setMinWidth(sliderWidth);
        slider.setMaxWidth(sliderWidth);

        final ProgressBar pb = new ProgressBar(0);
        pb.setMinWidth(sliderWidth);
        pb.setMaxWidth(sliderWidth);

        final ProgressIndicator pi = new ProgressIndicator(0);

        slider.valueProperty().addListener(new ChangeListener<Number>() {
            public void changed(ObservableValue<? extends Number> ov,
                    Number old_val, Number new_val) {
                pb.setProgress(new_val.doubleValue() / 50);
                pi.setProgress(new_val.doubleValue() / 50);
            }
        });

        StackPane pane = new StackPane();

        pane.getChildren().addAll(pb, slider);

        final HBox hb = new HBox();
        hb.setSpacing(5);
        hb.setAlignment(Pos.CENTER);
        hb.getChildren().addAll(pane, pi);

        scene.setRoot(hb);
        stage.show();
    }

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

使用 style.css：

.slider .track {
    -fx-background-color:null;  /* Hide the track */
    -fx-background-insets: 1 0 -1 0, 0, 1;
    -fx-background-radius: 2.5, 2.5, 1.5;
    -fx-padding: 0.208333em; /* 2.5 */
}

基本逻辑是将滑块和进度条放入StackPane中。让它们具有相同的宽度。绑定它们的进度值。隐藏滑块的轨道。
输出:

- Uluk Biy

---

哈哈，我考虑过了。但我认为这可能只是随机的机会。你怎么知道你点击的是滑块还是进度条？ - Vetalll

@Vetal.lebed. StackPane将其子项重叠放置，以便最后添加的子项位于其他子项之上。因此，滑块（及其不可见的轨道）始终会接收鼠标单击。此外，默认情况下无法单击进度条。 - Uluk Biy

谢谢，我不知道。我是一名安卓开发者。 - Vetalll

很棒的原型，但不幸的是，在前30%中，进度条与滑块不太匹配。而且我似乎无法理解在这种情况下 -fx-background-insets 和 -fx-background-radius 的目的。 - xeruf

Answer 2

我用代码解决了这个问题：

progress.setOnMouseClicked(new EventHandler<MouseEvent>() {
        @Override
        public void handle(MouseEvent event) {
            if (event.getButton() == MouseButton.PRIMARY){
                Bounds b1 = progress.getLayoutBounds();
                double mouseX = event.getSceneX();
                double percent = (((b1.getMinX() + mouseX ) * 100) / b1.getMaxX());
                //correcting a percent, i don't know when it need
                percent -= 2;
                progress.setProgress((percent) / 100);
                //do something with progress in percent
            }
        }
    });

- Vetalll

Answer 3

只是一个tornadoFX的例子：

package bj

import javafx.application.Application
import javafx.geometry.Insets
import javafx.scene.control.ProgressBar
import javafx.scene.control.Slider
import javafx.scene.paint.Color
import tornadofx.*

/**
* Created by [e-mail] at 18-12-13 下午9:28
*/

class MainView : View() {

    private lateinit var progressBar: ProgressBar
    private lateinit var slider: Slider

    override val root = vbox {
        stackpane {
            padding = Insets(100.0)
            progressbar(initialValue = .0) {
                progressBar = this
                maxWidth = Double.MAX_VALUE
            }
            slider(max = 1, value = .0) {
                slider = this
            }
        }
    }

    init {
        progressBar.progressProperty().bind(slider.valueProperty())
        progressBar.paddingLeftProperty.bind(progressBar.heightProperty().divide(2))
        progressBar.paddingRightProperty.bind(progressBar.heightProperty().divide(2))
    }
}

class MainStylesheet : Stylesheet() {
    init {
        slider {
            track {
                backgroundColor = MultiValue(arrayOf(Color.TRANSPARENT))
            }
        }
    }

}

class App : tornadofx.App(MainView::class, MainStylesheet::class)

fun main(args: Array<String>) {
    Application.launch(App::class.java, *args)
}

- BaiJiFeiLong