Java Fx Ui 组件 Slider 自定义控件 Slider（滑块）

最新推荐文章于 2025-02-02 22:10:23 发布

置顶小胖子爱撅着嘴

最新推荐文章于 2025-02-02 22:10:23 发布

阅读量2.1k

点赞数 1

分类专栏： java FX 文章标签： java FX

本文链接：https://blog.youkuaiyun.com/qq_34651026/article/details/86502835

版权

FX 同时被 2 个专栏收录

7 篇文章

订阅专栏

java

6 篇文章

订阅专栏

本文介绍了如何使用JavaFX自定义Slider组件，通过修改Track和Thumb的样式，实现滑块的美化。示例展示了运行效果，并提供了一个相关学习资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

java FX 滑块 Slider 原生的滑动后没有颜色甚至thumb比较简单先看下Slider的组成

本文章主要更改Track 和Thumb

public class CustomSlider  extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        BorderPane mainPane = new BorderPane();
        mainPane.setPadding(new Insets(15));

        mainPane.setCenter(new ColorSlider());

        Scene scene = new Scene(mainPane, 250, 400);
        stage.setScene(scene);
        stage.show();


    }
    public class ColorSlider extends StackPane {
        public ColorSlider() {
            getStylesheets().add(this.getClass().getResource("testcss.css").toExternalForm());
            Slider slider = new Slider();
            slider.setId("color-slider");
            Rectangle progressRec = new Rectangle();
            progressRec.heightProperty().bind(slider.heightProperty().subtract(7));
            progressRec.widthProperty().bind(slider.widthProperty());

            progressRec.setFill(Color.web("#c3c3c3"));

            progressRec.setArcHeight(15);
            progressRec.setArcWidth(15);

            slider.valueProperty().addListener(new ChangeListener<Number>() {
                @Override
                public void changed(ObservableValue<? extends Number> ov, Number old_val, Number new_val) {
                    // Using linear gradient we can fill two colors to show the progress
                    // the new_val gets values between 0 - 100
                    String style = String.format("-fx-fill: linear-gradient(to right, #1979ca %d%%, #c3c3c3 %d%%);",
                            new_val.intValue(), new_val.intValue());
                    // set the Style
                    progressRec.setStyle(style);
                }
            });

            getChildren().addAll(progressRec, slider);
        }
    }
}

ColorSlider extends StackPane 然后去加载css样式，下面是我的css样式

看下运行效果图：

这样就完成了并不是很难，有什么问题可以留言。

我在推荐个网站：http://www.javafxchina.net/blog/2015/04/doc03_slider/