（翻譯）第十七回 JavaFX2.0 滾動窗Scroll Pane

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

 

 

滾動窗為UI元素提供了一個可以滾動查看的視圖。該控制項讓使用者可以通過移動視口或者捲軸來查看。Figure 11-1是一個添加了圖片的預設設定的滾動窗。

Figure 11-1 Scroll Pane

Description of "Figure 11-1 Scroll Pane" 

建立Scroll Pane

Example 11-1 示範了如何在應用中建立滾動窗。

Example 11-1 Using a Scroll Pane to View an Image

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

setNode 方法定義了滾動窗的結點是什麼內容，可以只指定一個結點。要建立具有多個組件的滾動窗，得用版面配置容器或者Group類。可以為 setPannable 方法設定true值，這樣當點擊和移動滑鼠時能預覽映像，捲軸的位置也會相應改變。

為Scroll Pane設定捲軸策略

ScrollPane類提供了一種策略來決定何時顯示捲軸：總是、從不、需要時( always, never,needed）。分別使用setHbarPolicy 和setVbarPolicy 方法為水平捲軸和垂直捲軸指定策略。這樣，Example
11-2 中的垂直捲軸會一直顯示，而水平的不會顯示。

 

Example 11-2 Setting the Horizontal and Vertical Scroll Bar Policies

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

 

結果是只能垂直地滾動圖片，見 Figure 11-2 .

Figure 11-2 Disabling the Horizontal Scroll Bar

Description of "Figure 11-2 Disabling the Horizontal Scroll Bar " 

改變Scroll Pane中組件的大小

設計UI介面時可能需要能夠改變組件的大小已讓它們適合滾動窗的寬和高。為 setFitToWidth 或 setFitToHeight方法設定true 值來匹配特定的方向。

Figure 11-3 中的滾動窗包含選項按鈕、文字框和密碼框。這些內容的大小超過了滾動窗預先定義的尺寸，所以垂直捲軸顯示了出來。然而，由於setFitToWidth 方法被設為true，視窗寬度會伸縮使水平方向無捲軸。

 

Figure 11-3 Fitting the Width of the Scroll Pane

Description of "Figure 11-3 Fitting the Width of the Scroll Pane" 

 

預設FIT_TO_WIDTH 和 FIT_TO_HEIGHT 屬性都是false，可改變大小的內容也保持原始大小。從上面代碼移除setFitToWidth 方法後，顯示如Figure
11-4 .

Figure 11-4 Default Properties for Fitting the Content

Description of "Figure 11-4 Default Properties for Fitting the Content" 

ScrollPane 類可以取回和設定內容在水平和垂直方向的當前、最小、最大值。學習怎麼使用吧

使用Scroll Pane的範例程式

Example 11-3 使用滾動窗顯示一個帶有圖片的垂直盒子。ScrollPane 類的VVALUE屬性協助辨識當然顯示的圖片並顯示它的名稱。

 

Example 11-3 Using a Scroll Pane to View Images

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

 

 Figure 11-5 是編譯並啟動並執行效果。

Figure 11-5 Scrolling Images

Description of "Figure 11-5 Scrolling Images" 

垂直捲軸的最大值等於垂直盒子的高度。 Example 11-4 中的代碼塊顯示了當前顯示圖片的名稱。

Example 11-4 Tracking the Change of the Scroll Pane's Vertical Value

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的結果給出了當前圖片的索引。

可以在應用中改變水平捲軸的最小值和最大值來動態更新使用者介面。