翻譯自? ?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();@Overridepublic 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

總結

以上是生活随笔為你收集整理的JavaFX UI控件教程（十七）之Slider的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。