javafX8初探（滚动面板）

本节我们介绍在javafX应用中使用滚动面板。

滚动面板提供了可滚动的UI元素。可以使得用户滚动的浏览内容。下图展示在滚动面板中加入一个图片：

 

创建一个滚动面板

Image roses = new Image(getClass().getResourceAsStream("roses.jpg"));
ScrollPane sp = new ScrollPane();
sp.setContent(new ImageView(roses));

我们使用setContent方法来设置滚动面板的内容，这个方法只能指定一个元素，如果我们想要为滚动面板添加多个组件，那么我们可以使用布局容器来实现，比如Group类。

为滚动面板设置滚动条策略

ScrollPane提供了滚动策略：总是、从不或者需要的时候。可以通过setHBarPolicy和setVBarPolicy方法来设置。

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

 

如下图所示：

改变滚动面板中组件的大小

当我们设计UI组件的时候，我们可能想让组件的大小和滚动面板的大小进行自适应。通过setFitToWith和setFitToHeight方法来适应一个特定的维度。

下图是一个包含3个单选按钮，一个文本域和一个密码域的滚动面板，我们设置了宽度自适应后如下图：

如果我们去掉宽度自适应，如下图所示：

 

滚动面板的简单实例

package com.chu.button;

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 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"};

    @Override
    public 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((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);
    }
}

 

运行如下图所示：