javaFX学习之滚动面板(ScrollPane)

原文地址:DOC-03-11 滚动面板(Scroll Pane) | JavaFX中文资料

如何在应用程序中构建滚动面板。滚动面板为UI元素提供了一个可滚动的视图。此控件允许用户使用滚动条或移动视口（Viewport）来滚动界面内容

setContent方法定义了滚动面板的内容节点。你只能为滚动面板的内容设置一个内容节点。如果希望创建包含多个组件的滚动面板，你可以使用布局容器或Group类。如果希望通过单击图片并移动鼠标来预览图像，你可以使用setPannable方法，并将其值设置为true。在预览时，滚动条的位置将会相应地进行改变。

使用滚动面板来展示图片

 

 

设置滚动条的显示策略

对于何时展现滚动条，ScrollPane类提供了不同的策略：总是展现、永不展现或者只有需要时展现。使用setHbarPolicy和setVbarPolicy方法来分别为横向和纵向滚动条指定显示策略。因此，在例中，纵向滚动条将会显示出来，而横向滚动条则不会显示。

设置横向和纵向滚动条的显示策略

1 2	sp.setHbarPolicy(ScrollBarPolicy.NEVER); sp.setVbarPolicy(ScrollBarPolicy.ALWAYS);

改变滚动面板内部组件的大小

在设计UI界面时，你可能会需要改变滚动面板内部组件的大小，以使其能适应滚动面板的宽和高。可以通过使用setFitToWidth或setFitToHeight方法将对应属性设置为true来在对应维度上适应大小变化。

在图11-3中展示的滚动面板包括了几个单选按钮、一个文本框、一个密码框。这些组件的大小超出了滚动面板预定义的范围，因此出现了一个纵向滚动条。然而，由于对滚动面板使用了setFitToWidht方法并设置其参数值为true，因此滚动面板的内容将会在水平方向上被压缩，并且永不会显示横向滚动条。

自适应宽度的滚动面板

 

在默认情况下，FIT_TO_WIDHT和FIT_TO_HEIGHT属性值都是false，并且所有的内容均会保持其初始大小。如果从代码中移除了对setFitToWidth方法的调用，那么将会看到如下的效果。

面板内容采用自适应大小属性采用默认值

ScrollPane类允许你获取和设置面板内容宽度和高度的当前值、最小值、最大值。你可以在应用程序中尝试使用这些的功能。

滚动面板样例程序

例使用了一个滚动面板来展示一个带有图片的VBox。ScrollPanle类的VVALUE属性用于帮助确定当前展示的图片并显示图片文件名


package scrollpanesample;

import javafx.application.Application;
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 ScrollPaneSample 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"};//图片的相对url值

    @Override
    public void start(Stage stage) {
        VBox box = new VBox();//创建盒子布局器对象
        Scene scene = new Scene(box, 500, 300);//创建一个场景对象
        stage.setScene(scene);//舞台挂载场景对象
        stage.setTitle("ScrollPaneSample");//给舞台设置标题
        box.getChildren().addAll(sp, fileName);//垂直盒子布局对象上瓜子scrollPane对象和一个Label类型标签对象fileName
        VBox.setVgrow(sp, Priority.ALWAYS);//Vbox对象设置垂直方向增长优先级参数，总是以scrollPane对象的在垂直轴上的增长值为基准

        fileName.setLayoutX(30);//设置Label对象在X轴上的坐标位置
        fileName.setLayoutY(160);//设置Label对象在Y轴上的坐标位置
        
        Image roses = new Image(getClass().getResourceAsStream("roses.jpg"));//创建一个图片对象
        System.out.println(getClass().getResourceAsStream("roses.jpg"));
        sp.setContent(new ImageView(roses));//将图片对象加载到ImageView视图区域对象中，并将ImageView对象添加到scrollPane对象的内容区域当中去
        sp.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);//设置scrollPane对象的水平滚动策略(本例中设置为水平位置从不滚动)
        
        
        
        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]);//vbox语句对象添加图片可视化区域为自己的被布局元素
        }

        sp.setVmax(440);//设置scrollPane对象在垂直轴上的最大可滚动值
        sp.setPrefSize(115, 150);//初始化scrollPane对象的宽度和高度
        sp.setContent(vb);//设置VBox类型对象为scrollPanel对象的内容区域挂载内容

        sp.setPannable(true);//是否可平移

        sp.vvalueProperty().addListener((ObservableValue<? extends Number> ov, 
            Number old_val, Number new_val) -> {//设置scrollPane对象在垂直轴上滚动的值改变事件处理机制
                fileName.setText(imageNames[(new_val.intValue() - 1)/100]);//设置标签Label类型对象的文本取值，通过计算得出来的图片名称
        });
        stage.show();//舞台展现
    }

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

说明:

纵向滚动条的最大值与vbox的高度相等。例的代码片段显示了当前被展示图片的文件名。

例跟踪滚动条的纵向坐标值的变化

1 2 3 4

sp.vvalueProperty().addListener((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数组中当前图片的索引值。

可以通过改变纵向和横向滚动条的最大和最小值来动态地更新用户界面。