翻譯自? ?Scroll Pane

在本章中，您將學習如何在JavaFX應用程序中構建滾動窗格。

滾動窗格提供UI元素的可滾動視圖。此控件使用戶可以通過平移視口或使用滾動條來滾動內(nèi)容。具有默認設置和添加的圖像的滾動窗格如圖10-1所示。

圖10-1滾動窗格

?

創(chuàng)建滾動窗格

示例10-1顯示了如何在應用程序中創(chuàng)建此滾動窗格。

示例10-1使用滾動窗格查看圖像

Image roses = new Image（getClass（）。getResourceAsStream（“roses.jpg”））; ScrollPane sp = new ScrollPane（）; sp.setContent（new ImageView（roses））;

該setContent方法定義用作此滾動窗格內(nèi)容的節(jié)點。您只能指定一個節(jié)點。要創(chuàng)建具有多個組件的滾動視圖，請使用布局容器或Group類。您還可以通過單擊并移動鼠標光標來指定預覽圖像true的setPannable方法的值。滾動條的位置相應地改變。

?

設置滾動窗格的滾動條策略

本ScrollPane類提供了一個政策來確定何時顯示滾動條：永遠，永遠，或只在需要的時候。使用setHbarPolicy和setVbarPolicy方法分別為水平和垂直滾動條指定滾動條策略。因此，在例10-2中，將出現(xiàn)垂直滾動條，而不是水平滾動條。

示例10-2設置水平和垂直滾動條策略

sp.setHbarPolicy（ScrollBarPolicy.NEVER）; sp.setVbarPolicy（ScrollBarPolicy.ALWAYS）;

因此，您只能垂直滾動圖像，如圖10-2所示。

圖10-2禁用水平滾動條

?

調(diào)整滾動窗格中的組件大小

在設計UI界面時，您可能需要調(diào)整組件的大小，以使它們與滾動窗格的寬度或高度相匹配。設置setFitToWidth或setFitToHeight方法true以匹配特定維度。

圖10-3中顯示的滾動窗格包含單選按鈕，文本框和密碼框。內(nèi)容的大小超出滾動窗格的預定義大小，并顯示垂直滾動條。但是，由于該setFitToWidth方法true為滾動窗格設置，因此內(nèi)容的寬度會縮小，而不會水平滾動。

圖10-3擬合滾動窗格的寬度

默認情況下，兩者FIT_TO_WIDTH和FIT_TO_HEIGHT屬性都是false,，并且可調(diào)整大小的內(nèi)容保持其原始大小。如果setFitToWidth從該應用程序的代碼中刪除方法，您將看到如圖10-4所示的輸出。

圖10-4適合內(nèi)容的默認屬性

本ScrollPane類允許您檢索和設置當前，最小和內(nèi)容最大值在水平和垂直方向。了解如何在您的應用程序中使用它們。

?

使用滾動窗格的示例應用程序

示例10-3使用滾動窗格顯示帶有圖像的垂直框。該類的VVALUE屬性ScrollPane有助于識別當前顯示的圖像并呈現(xiàn)圖像文件的名稱。

示例10-3使用滾動窗格查看圖像

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

編譯并運行此應用程序?qū)⑸扇鐖D10-5所示的窗口。

圖10-5滾動圖像

垂直滾動條的最大值等于垂直框的高度。例10-4中顯示的代碼片段呈現(xiàn)當前顯示的圖像文件的名稱。

示例10-4跟蹤滾動窗格垂直值的更改

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時，結果給出imageNames數(shù)組中當前圖像的索引。

在您的應用程序中，您還可以更改垂直和水平滾動條的最小值和最大值，從而動態(tài)更新用戶界面。

相關的API文檔?

• ScrollPane

• ScrollBar

?

總結

以上是生活随笔為你收集整理的JavaFX UI控件教程（十一）之Scroll Pane的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。