翻譯自   Slider

在本章中，您將學習如何在JavaFX應用程式中使用滑塊來顯示和與一系列數值進行互動。

該Slider控制元件由一個軌道和一個可拖動的拇指組成。它還可以包括刻度線和刻度標籤，用於指示範圍的數值。圖16-1顯示了一個典型的滑塊並指出了它的主要元素。

圖16-1滑塊的元素

建立滑塊

花點時間檢視示例16-1中生成如圖16-1所示滑塊的程式碼片段。

示例16-1建立滑塊

Slider slider = new Slider();
slider.setMin(0);
slider.setMax(100);
slider.setValue(40);
slider.setShowTickLabels(true);
slider.setShowTickMarks(true);
slider.setMajorTickUnit(50);
slider.setMinorTickCount(5);
slider.setBlockIncrement(10);
 

的setMin和setMax方法定義，分別為最小和由滑塊表示的最大數字值。該setValue方法指定滑塊的當前值，該值始終小於最大值且大於最小值。使用此方法可以在應用程式啟動時定義拇指的位置。

兩個布林方法，setShowTickMarks並setShowTickLabels定義滑塊的視覺外觀。在例16-1中，啟用了標記和標籤。此外，主刻度標記之間的單位距離設定為50，任意兩個主刻度之間的次刻度數指定為5.您可以指定setSnapToTicks方法true以使滑塊的值與刻度線對齊。

該setBlockIncrement方法定義當用戶點選軌道時拇指移動的距離。在示例16-1中，此值為10，這意味著每次使用者單擊軌道時，拇指會向點選位置移動10個單位。

在圖形應用程式中使用滑塊

現在檢視圖16-2。此應用程式使用三個滑塊來編輯圖片的渲染特徵。每個滑塊調整特定的視覺特性：不透明度級別，棕褐色調值或縮放係數。

圖16-2三個滑塊

例16-2顯示了該應用程式的原始碼。

實施例16-2滑塊樣品

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
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 Main extends Application {
 
    final Slider opacityLevel = new Slider(0, 1, 1);    
    final Slider sepiaTone = new Slider(0, 1, 1);
    final Slider scaling = new Slider (0.5, 1, 1);
    final Image image  = new Image(getClass().getResourceAsStream(
        "cappuccino.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.WHITE;
    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("Slider Sample");
        scene.setFill(Color.BLACK);
 
        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);
        grid.getChildren().add(opacityCaption);
        
 
        opacityLevel.valueProperty().addListener(new ChangeListener<Number>() {
            public void changed(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);
        grid.getChildren().add(opacityLevel);
 
        opacityValue.setTextFill(textColor);
        GridPane.setConstraints(opacityValue, 2, 1);
        grid.getChildren().add(opacityValue);
 
        sepiaCaption.setTextFill(textColor);
        GridPane.setConstraints(sepiaCaption, 0, 2);
        grid.getChildren().add(sepiaCaption);
 
        sepiaTone.valueProperty().addListener(new ChangeListener<Number>() {
            public void changed(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);
        grid.getChildren().add(sepiaTone);
 
        sepiaValue.setTextFill(textColor);
        GridPane.setConstraints(sepiaValue, 2, 2);
        grid.getChildren().add(sepiaValue);
 
        scalingCaption.setTextFill(textColor);
        GridPane.setConstraints(scalingCaption, 0, 3);
        grid.getChildren().add(scalingCaption);
 
        scaling.valueProperty().addListener(new ChangeListener<Number>() {
            public void changed(ObservableValue<? extends Number> ov,
                Number old_val, Number new_val) {
                    cappuccino.setScaleX(new_val.doubleValue());
                    cappuccino.setScaleY(new_val.doubleValue());
                    scalingValue.setText(String.format("%.2f", new_val));
            }
        });
        GridPane.setConstraints(scaling, 1, 3);
        grid.getChildren().add(scaling);
 
        scalingValue.setTextFill(textColor);
        GridPane.setConstraints(scalingValue, 2, 3);
        grid.getChildren().add(scalingValue);
 
        stage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}
 

ImageView物件的opacity屬性根據名為opacityLevel的第一個滑塊的值而更改。SepiaTone當sepiaTone滑塊的值發生變化時，效果的級別會發生變化。第三個滑塊通過傳遞給setScaleX和setScaleY滑塊的當前值來定義影象的縮放因子。

例16-3中的程式碼片段演示了將類getValue方法返回的double值轉換為的方法。它還應用格式將滑塊的值渲染為浮點數，後面有兩位數。SliderString

例16-3格式化渲染滑塊的值

scalingValue.setText((Double.toString(value)).format("%.2f", value));

增強滑塊外觀的下一步是為其應用視覺效果或CSS樣式。

相關的API文件  

• Slider

• SepiaTone