JavaFX UI控件教程（十一）之Scroll Pane

翻译自 Scroll Pane

在本章中，您将学习如何在JavaFX应用程序中构建滚动窗格。

滚动窗格提供UI元素的可滚动视图。此控件使用户可以通过平移视口或使用滚动条来滚动内容。具有默认设置和添加的图像的滚动窗格如图10-1所示。

创建滚动窗格

示例10-1显示了如何在应用程序中创建此滚动窗格。

Image roses = new Image（getClass（）。getResourceAsStream（“roses.jpg”））;
ScrollPane sp = new ScrollPane（）;
sp.setContent（new ImageView（roses））;

该setContent方法定义用作此滚动窗格内容的节点。您只能指定一个节点。要创建具有多个组件的滚动视图，请使用布局容器或Group类。您还可以通过单击并移动鼠标光标来指定预览图像true的setPannable方法的值。滚动条的位置相应地改变。

设置滚动窗格的滚动条策略

本ScrollPane类提供了一个政策来确定何时显示滚动条：永远，永远，或只在需要的时候。使用setHbarPolicy和setVbarPolicy方法分别为水平和垂直滚动条指定滚动条策略。因此，在例10-2中，将出现垂直滚动条，而不是水平滚动条。

示例10-2设置水平和垂直滚动条策略

sp.setHbarPolicy（ScrollBarPolicy.NEVER）;
sp.setVbarPolicy（ScrollBarPolicy.ALWAYS）;

因此，您只能垂直滚动图像，如图10-2所示。

图10-2禁用水平滚动条

调整滚动窗格中的组件大小

在设计UI界面时，您可能需要调整组件的大小，以使它们与滚动窗格的宽度或高度相匹配。设置setFitToWidth或setFitToHeight方法true以匹配特定维度。

图10-3中显示的滚动窗格包含单选按钮，文本框和密码框。内容的大小超出滚动窗格的预定义大小，并显示垂直滚动条。但是，由于该setFitToWidth方法true为滚动窗格设置，因此内容的宽度会缩小，而不会水平滚动。

图10-3拟合滚动窗格的宽度

默认情况下，两者FIT_TO_WIDTH和FIT_TO_HEIGHT属性都是false,，并且可调整大小的内容保持其原始大小。如果setFitToWidth从该应用程序的代码中删除方法，您将看到如图10-4所示的输出。

图10-4适合内容的默认属性

本ScrollPane类允许您检索和设置当前，最小和内容最大值在水平和垂直方向。了解如何在您的应用程序中使用它们。

使用滚动窗格的示例应用程序

示例10-3使用滚动窗格显示带有图像的垂直框。该类的VVALUE属性ScrollPane有助于识别当前显示的图像并呈现图像文件的名称。

示例10-3使用滚动窗格查看图像

package scrollpanesample;import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;public class Main extends Application {final ScrollPane sp = new ScrollPane();final Image[] images = new Image[5];final ImageView[] pics = new ImageView[5];final VBox vb = new VBox();final Label fileName = new Label();final String [] imageNames = new String [] {"fw1.jpg", "fw2.jpg","fw3.jpg", "fw4.jpg", "fw5.jpg"};@Overridepublic void start(Stage stage) {VBox box = new VBox();Scene scene = new Scene(box, 180, 180);stage.setScene(scene);stage.setTitle("Scroll Pane");box.getChildren().addAll(sp, fileName);VBox.setVgrow(sp, Priority.ALWAYS);fileName.setLayoutX(30);fileName.setLayoutY(160);for (int i = 0; i < 5; i++) {images[i] = new Image(getClass().getResourceAsStream(imageNames[i]));pics[i] = new ImageView(images[i]);pics[i].setFitWidth(100);pics[i].setPreserveRatio(true);vb.getChildren().add(pics[i]);}sp.setVmax(440);sp.setPrefSize(115, 150);sp.setContent(vb);sp.vvalueProperty().addListener(new ChangeListener<Number>() {public void changed(ObservableValue<? extends Number> ov,Number old_val, Number new_val) {fileName.setText(imageNames[(new_val.intValue() - 1)/100]);}});stage.show();}public static void main(String[] args) {launch(args);}
}

编译并运行此应用程序将生成如图10-5所示的窗口。

图10-5滚动图像

垂直滚动条的最大值等于垂直框的高度。例10-4中显示的代码片段呈现当前显示的图像文件的名称。

示例10-4跟踪滚动窗格垂直值的更改

sp.vvalueProperty().addListener(new ChangeListener<Number>() {public void changed(ObservableValue<? extends Number> ov,Number old_val, Number new_val) {fileName.setText(imageNames[(new_val.intValue() - 1)/100]);}
});

该ImageView对象将图像高度限制为100像素。因此，当new_val.intValue() - 1除以100时，结果给出imageNames数组中当前图像的索引。

在您的应用程序中，您还可以更改垂直和水平滚动条的最小值和最大值，从而动态更新用户界面。

相关的API文档

ScrollPane
ScrollBar