翻譯自? ?Scroll Pane

在本章中，您將學(xué)習(xí)如何在JavaFX應(yīng)用程序中構(gòu)建滾動(dòng)窗格。

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

圖10-1滾動(dòng)窗格

?

創(chuàng)建滾動(dòng)窗格

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

示例10-1使用滾動(dòng)窗格查看圖像

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

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

?

設(shè)置滾動(dòng)窗格的滾動(dòng)條策略

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

示例10-2設(shè)置水平和垂直滾動(dòng)條策略

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

因此，您只能垂直滾動(dòng)圖像，如圖10-2所示。

圖10-2禁用水平滾動(dòng)條

?

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

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

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

圖10-3擬合滾動(dòng)窗格的寬度

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

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

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

?

使用滾動(dòng)窗格的示例應(yīng)用程序

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

示例10-3使用滾動(dòng)窗格查看圖像

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

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

圖10-5滾動(dòng)圖像

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

示例10-4跟蹤滾動(dòng)窗格垂直值的更改

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像素。因此，當(dāng)new_val.intValue() - 1除以100時(shí)，結(jié)果給出imageNames數(shù)組中當(dāng)前圖像的索引。

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

相關(guān)的API文檔?

• ScrollPane

• ScrollBar

?

總結(jié)

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

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