JavaFX UI控件教程（十）之Scroll Bar

翻译自 Scroll Bar

本章介绍如何使用滚动条控件创建可滚动窗格。

本ScrollBar类可以在应用程序中创建滚动窗格和意见。图9-1显示了滚动条的三个区域：拇指，右侧和左侧按钮（或向下和向上按钮）以及轨道。

图9-1滚动条的元素

创建滚动条

花点时间查看例9-1中的代码片段。

例9-1简单滚动条

ScrollBar sc = new ScrollBar（）;
sc.setMin（0）;
sc.setMax（100）;
sc.setValue（50）;

的setMin和setMax方法定义由滚动条表示的最小值和最大值。当用户移动拇指时，滚动条的值会改变。在示例9-1中，值等于50，因此当应用程序启动时，拇指位于滚动条的中心。默认情况下，滚动条水平定向。但是，您可以使用该setOrientation方法设置垂直方向。

用户可以单击左或右按钮（垂直方向的向下或向上按钮）以单位增量滚动。该UNIT_INCREMENT属性指定单击按钮时滚动条的调整量。另一个选项是通过块增量在轨道内单击。该BLOCK_INCREMENT属性定义单击条形轨迹时滚动条的调整量。

在您的应用程序中，您可以使用多个滚动条之一滚动超出可用空间边界的图形内容。

在应用程序中使用滚动条

检查滚动条的运行情况。示例9-2中显示的应用程序实现了可滚动场景以查看图像。此应用程序的任务是使用户能够查看垂直框的内容，该内容比场景的高度更长。

例9-2滚动多个图像

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Orientation;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ScrollBar;
import javafx.scene.effect.DropShadow;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;public class Main extends Application {final ScrollBar sc = new ScrollBar();final Image[] images = new Image[5];final ImageView[] pics = new ImageView[5];final VBox vb = new VBox();DropShadow shadow = new DropShadow();@Overridepublic void start(Stage stage) {Group root = new Group();Scene scene = new Scene(root, 180, 180);scene.setFill(Color.BLACK);stage.setScene(scene);stage.setTitle("Scrollbar");root.getChildren().addAll(vb, sc);shadow.setColor(Color.GREY);shadow.setOffsetX(2);shadow.setOffsetY(2);vb.setLayoutX(5);vb.setSpacing(10);sc.setLayoutX(scene.getWidth()-sc.getWidth());sc.setMin(0);sc.setOrientation(Orientation.VERTICAL);sc.setPrefHeight(180);sc.setMax(360);for (int i = 0; i < 5; i++) {final Image image = images[i] =new Image(getClass().getResourceAsStream("fw" +(i+1)+ ".jpg"));final ImageView pic = pics[i] =new ImageView(images[i]);pic.setEffect(shadow);vb.getChildren().add(pics[i]);}sc.valueProperty().addListener(new ChangeListener<Number>() {public void changed(ObservableValue<? extends Number> ov,Number old_val, Number new_val) {vb.setLayoutY(-new_val.doubleValue());}});stage.show();}public static void main(String[] args) {launch(args);}
}

代码的第一行添加了一个带有图像的垂直框和一个滚动条到场景。

Y当VALUE滚动条的属性发生变化时，垂直框的坐标会发生变化，因此每次移动滑块或单击按钮或轨道时，垂直框都会移动，如例9-3所示。

示例9-3实现垂直框的滚动

sc.valueProperty().addListener(new ChangeListener<Number>() {public void changed(ObservableValue<? extends Number> ov,Number old_val, Number new_val) {vb.setLayoutY(-new_val.doubleValue());}
});

编译并运行此应用程序将生成如图9-2所示的输出。

图9-2滚动条示例