参考原文:DOC-03-18 滑动条(Slider) | JavaFX中文资料

javaFX应用程序中使用滑动条(Slider)来显示一个区间范围内的数据并与之交互。Slider控件由一个滑轨(Track)和一个可拖放的滑块(Thumb)组成。它也可以包括多个刻度标记(TickMark)和刻度标签(TickLabel),用于表示数值区间范围

滑块的主要组成元素

java中slider java中slider的有哪些_ide

创建一个Slider

Slider slider = new Slider();

slider.setMin(0);    表示的数据的最小值

slider.setMax(100); 表示的数据的最大值

slider.setValue(40);  设置当前值

slider.setShowTickLabels(true); 是否显示刻度值

slider.setShowTickMarks(true); 是否显示刻度线

slider.setMajorTickUnit(50); 刻度Mark之间的单位距离被设置为了50

slider.setMinorTickCount(5);  每两个主刻度之间都被设置分为了5个小刻度

slider.setBlockIncrement(10); Thumb将会向点击位置的方向移动10个单元

setMin和SetMax方法分别定义了Slider所表示的数据的最小和最大值。setValue方法指定了Slider的当前值,当前值应该永远比最大值要小并且比最小值要大。在程序启动时将使用此方法来定义滑块的所在位置。setShowTickMarks和setShowTickLabels方法都需要传递Boolean型参数,它们定义了Slider的外观

 刻度的Mark和Label都被启用了。另外主刻度Mark之间的单位距离被设置为了50,而每两个主刻度之间都被设置分为了5个小刻度。你可以调用setSnapToTicks方法并设置参数值为true,这样可以使Slider所表示的值永远对齐到刻度标记之上。

setBlockIncrement方法定义了当用户点击Track时Thumb的移动距离。该值被设置为了10,也就是说每次用户点击Track时,Thumb将会向点击位置的方向移动10个单元 

 在图片展示程序中使用Slider

这个应用程序使用了3个Slider来编辑图片的渲染效果。每个Slider会调整一个特定的视觉效果:不透明度(Opacity)、棕褐色调值(SepiaTone)、缩放因子(ScalingFactor)

 带有三个Slider的程序

java中slider java中slider的有哪些_css_02

ImageView对象的opacity属性根据第一个名为opacityLevel的Slider的值而改变。SepiaTone效果的等级根据名为sepiaTone的Slider而改变。第三个Slider定义了图片的缩放因子,它的当前值被传给了setScaleX和setScaleY方法 


import javafx.application.Application;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.effect.SepiaTone;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class SliderTest extends Application {

    final Slider opacityLevel = new Slider(0, 1, 1);//创建一个Slider对象
    final Slider sepiaTone = new Slider(0, 1, 1);//创建一个Slider对象
    final Slider scaling = new Slider (0.5, 1, 1);//创建一个Slider对象
    final Image image  = new Image(getClass().getResourceAsStream(
            "background1.jpg")//在类路径下引入图片
    );

    final Label opacityCaption = new Label("Opacity Level:");//透明度设置
    final Label sepiaCaption = new Label("Sepia Tone:");//棕色色调设置
    final Label scalingCaption = new Label("Scaling Factor:");//缩放因子设置

    final Label opacityValue = new Label(
            Double.toString(opacityLevel.getValue()));//透明度数值显示标签
    final Label sepiaValue = new Label(
            Double.toString(sepiaTone.getValue()));//棕色调色值数据显示标签
    final Label scalingValue = new Label(
            Double.toString(scaling.getValue()));//缩放因子值

    final static Color textColor = Color.BLUE;//蓝色
    final static SepiaTone sepiaEffect = new SepiaTone();//深褐色

    @Override
    public void start(Stage stage) {
        Group root = new Group();//节点组容器对象
        Scene scene = new Scene(root, 600, 400);//场景对象
        stage.setScene(scene);//舞台设置场景
        stage.setTitle("滑动组件标题");

        GridPane grid = new GridPane();//表格布局面板对象
        grid.setPadding(new Insets(10, 10, 10, 10));//布局对象中设置内边距
        grid.setVgap(10);//设置垂直间隙距离
        grid.setHgap(70);//设置水平间隙距离

        final ImageView cappuccino = new ImageView (image);//创建图片显示区域
        cappuccino.setEffect(sepiaEffect);//图片设置棕色特效
        GridPane.setConstraints(cappuccino, 0, 0);//表格布局器第一行第一列设置放入图片视图区域
        GridPane.setColumnSpan(cappuccino, 3);//设置图片跨三列
        grid.getChildren().add(cappuccino);//图片在表格布局器中跨三列
        scene.setRoot(grid);//场景上添加表格布局器

        opacityCaption.setTextFill(textColor);//透明度文字标签添加颜色
        GridPane.setConstraints(opacityCaption, 0, 1);//表格布局器第2行第一列添加文字标签
        grid.getChildren().add(opacityCaption);//表格容器中添加label标签对象


        opacityLevel.valueProperty().addListener((//给Slider组件对象添加事件监听器
                ObservableValue<? extends Number> ov,
                Number old_val, Number new_val) -> {//新救治改变事件回调函数
            cappuccino.setOpacity(new_val.doubleValue());//图片对象透明度值的设置
            opacityValue.setText(String.format("%.2f", new_val));//文字标签对象文本值的设置
        });

        GridPane.setConstraints(opacityLevel, 1, 1);//给透明度Slider设置在表格布局中的布局属性
        grid.getChildren().add(opacityLevel);//布局容器对象中添加文本标签对象

        opacityValue.setTextFill(textColor);//文字标签label设置颜色
        GridPane.setConstraints(opacityValue, 2, 1);//文本label对象布局到表格布局器中位置为第二行第二列
        grid.getChildren().add(opacityValue);//表格布局器中添加透明度文字标签

        sepiaCaption.setTextFill(textColor);//调色Slider对象文字颜色设置
        GridPane.setConstraints(sepiaCaption, 0, 2);//第三行第1列添加文本标签对象
        grid.getChildren().add(sepiaCaption);//文本标签添加到表格布局器中

        sepiaTone.valueProperty().addListener((//给颜色效果调制Slider对象添加值改监听器对象
                ObservableValue<? extends Number> ov, Number old_val,
                Number new_val) -> {//匿名监听器对象的创建以及监听事件处理回调函数的实现
            sepiaEffect.setLevel(new_val.doubleValue());//棕色特效值的设置
            sepiaValue.setText(String.format("%.2f", new_val));//棕色文本标签值的设置
        });
        GridPane.setConstraints(sepiaTone, 1, 2);//表格布局器中布局调色Slider对象的布局规约设置
        grid.getChildren().add(sepiaTone);//布局器中添加被布局的节点对象

        sepiaValue.setTextFill(textColor);//给文本标签添加颜色
        GridPane.setConstraints(sepiaValue, 2, 2);//约束颜色标签文本label对象的布局位置
        grid.getChildren().add(sepiaValue);//布局对象上添加label标签

        scalingCaption.setTextFill(textColor);//label标签颜色设置
        GridPane.setConstraints(scalingCaption, 0, 3);//给label元素设置在GridPane布局器上的布局位置约束
        grid.getChildren().add(scalingCaption);//grid上添加被布局的节点对象

        scaling.valueProperty().addListener((//缩放比例Slider组件交互事件监听器对象的添加
                ObservableValue<? extends Number> ov, Number old_val,
                Number new_val) -> {//监听对象的事件监听回调函数的实现
            cappuccino.setScaleX(new_val.doubleValue());//设置图片在X轴上的缩放比例
            cappuccino.setScaleY(new_val.doubleValue());//设置图片在Y轴上的缩放比例
            scalingValue.setText(String.format("%.2f", new_val));//设置缩放标签文本label显示的文字
        });
        GridPane.setConstraints(scaling, 1, 3);//设置表格布局对象在第四行第二列上面的布局约束
        grid.getChildren().add(scaling);//布局对象上添加缩放Slider组件

        scalingValue.setTextFill(textColor);//label添加颜色
        GridPane.setConstraints(scalingValue, 2, 3);//设置scalingValue对象在grid对象上的布局约定:第四行第三列
        grid.getChildren().add(scalingValue);//表格布局对象中添加缩放文字标签对象

        stage.show();//舞台展现
    }

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


 ImageView对象的opacity属性根据第一个名为opacityLevel的Slider的值而改变。SepiaTone效果的等级根据名为sepiaTone的Slider而改变。第三个Slider定义了图片的缩放因子,它的当前值被传给了setScaleX和setScaleY方法

展示了将Slider类的getValue方法返回的double类型的值转换成String类型。它同时将这个值格式化成一个带有两位小数的float数字来展示Slider的值 

格式化Slider的展示值 

scalingValue.setText(String.format("%.2f", new_val));