（通译）第十六回 JavaFX2.0滚动栏ScrollBar _Web前端

（翻译）第十六回 JavaFX2.0滚动栏ScrollBar

原文地址http://download.oracle.com/javafx/2.0/ui_controls/scrollbar.htm

ScrollBar 类使你可以创建滚动栏面板和视图。Figure 10-1 展示了滚动栏的三部分：滚动条（thumb），左右按钮（或上下按钮），可滚动区。

Figure 10-1 Elements of the scroll bar

The track, the thumb, and the left/right buttons

Description of "Figure 10-1 Elements of the scroll bar"

创建Scroll Bar

花点时间看下 Example 10-1 中的代码块。

Example 10-1 Simple Scroll Bar

ScrollBar sc = new ScrollBar();
sc.setMin(0);
sc.setMax(100);
sc.setValue(50);

?setMin 和setMax 方法定义了滚动栏呈现的最小值和最大值。当用户移动滚动条时，它的值会改变。在 Example 10-1 中，它的值是50，所以应用启动后滚动条位于滚动栏的中间。默认滚动栏是水平方向的，你要用setOrientation 方法把它设为垂直方向。

用户可以点击左右按钮（垂直滚动栏是上下按钮）按照增长单位来改变值。UNIT_INCREMENT属性指定了当点击按钮时滚动条调整的幅度。也可以点击滚动区来大幅改变。 BLOCK_INCREMENT属性定义了当点击滚动区时改变的幅度。

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

在应用中使用Scroll Bar

实战体验下。? Example 10-2 中创建的应用实现了一个可滚动的视窗来查看图片。这个应用的目的是让用户能够查看垂直盒子（vertical box）中的内容，它们比视窗好高度要长。

Example 10-2 Scrolling Through Multiple Images

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();
 
    @Override
    public 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 属性的变化而变化。 所以每次滚动条移动时（或者按钮、滚动区）被点击时，垂直盒子就跟着动。见Example 10-3 .

Example 10-3 Implementing the Scrolling of the Vertical Box

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

编译并运行应用，效果如Figure 10-2 .

Figure 10-2 Scroll Bar Sample

Description of "Figure 10-2 Scroll Bar Sample "

这个应用是ScrollBar 类的典型应用。你也可以在场景内用定制化的该类创建滚动区域。因为对于每个UI控件和节点（node，有Node这个类的）,滚动栏都可以从默认实现中修改外观。