javaFX学习之滚动面板(ScrollPane)

最新推荐文章于 2024-08-03 14:49:34 发布

brave_zhao

最新推荐文章于 2024-08-03 14:49:34 发布

阅读量7.9k

点赞数 2

分类专栏： javaFX 文章标签： javascript html css3

原文链接：http://www.javafxchina.net/blog/2015/04/doc03_scrollpane/

版权

javaFX 专栏收录该内容

39 篇文章 5 订阅

订阅专栏

原文地址: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的高度相等。例的代码片段显示了当前被展示图片的文件名。

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