如果要對JavaFX 2.0中所有不同的布局窗格進(jìn)行概述，或者想了解有關(guān)它們的一些基本知識，請參閱我以前的文章《 JavaFX 2.0中的布局窗格》 。 布局窗格HBox和VBox絕對是JavaFX 2.0中最基本的布局容器。 如您所知，它們的用途是將所有子級布置在一個水平行（ HBox ）或一個垂直列（ VBox ）中。 因為它們非常容易使用，并且對于較小的布局問題非常有用，所以您可能會經(jīng)常使用它們。 我將給出兩個有關(guān)如何使用它們的示例。 與其他示例一樣，首先是代碼，然后是解釋。

HBox和VBox –示例1
?

import javafx.application.Application; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.HBox; import javafx.scene.layout.VBox; import javafx.stage.Stage;/**** Created on: 20.03.2012* @author Sebastian Damm*/ public class HBoxandVBoxExample extends Application {@Overridepublic void start(Stage primaryStage) throws Exception{ HBox hbox = new HBox(50);hbox.setAlignment(Pos.CENTER); // default TOP_LEFTVBox vbox1 = new VBox();vbox1.setAlignment(Pos.BOTTOM_CENTER);vbox1.setStyle("-fx-border-style: solid;"+ "-fx-border-width: 1;"+ "-fx-border-color: black");VBox vbox2 = new VBox(10);vbox2.setAlignment(Pos.CENTER);vbox2.setStyle("-fx-border-style: solid;"+ "-fx-border-width: 1;"+ "-fx-border-color: black");VBox vbox3 = new VBox(20);vbox3.setAlignment(Pos.TOP_CENTER);vbox3.setStyle("-fx-border-style: solid;"+ "-fx-border-width: 1;"+ "-fx-border-color: black");for (int i = 0; i < 5; i++){Button bt = new Button("Button " + (i+1));Button bt2 = new Button("Button " + (i+1)); // unfortunately there′s no "clone" or "copy" methodButton bt3 = new Button("Button " + (i+1));vbox1.getChildren().add(bt);vbox2.getChildren().add(bt2);vbox3.getChildren().add(bt3);}hbox.getChildren().addAll(vbox1, vbox2, vbox3);Scene scene = new Scene(hbox, 350, 250); // the hbox is the root nodeprimaryStage.setTitle("HBox and VBox Example");primaryStage.setScene(scene);primaryStage.show();}public static void main(String[] args){Application.launch(args);} } 基本上，我們創(chuàng)建三個不同的VBox，并將它們放入一個HBox中。 在這兩個類中，您都可以直接在構(gòu)造函數(shù)中或通過setSpacing方法定義間距值。 此值將用作窗格中各個子項之間的間隙。 行HBox hbox = new HBox(50); 因此創(chuàng)建一個HBox來容納三個VBox，每個VBox之間的間隔為50像素。 我們使用setAlignment方法來指定各個VBox如何安排和布局所有子級。 使用setStyle可以將自定義CSS樣式應(yīng)用于任何Node 。 我不想進(jìn)一步詳細(xì)介紹，因為我將在下一篇文章中介紹JavaFX 2.0中CSS樣式，但是如果您已經(jīng)熟悉CSS，那么您可能已經(jīng)注意到JavaFX 2.0團(tuán)隊幸運(yùn)的是，我決定非常嚴(yán)格地遵循W3C（ http://www.w3.org ）定義CSS標(biāo)準(zhǔn)。 如果您不熟悉CSS，則只需要知道CSS的這些行會在組件周圍創(chuàng)建1px寬的黑色邊框。 我在這里使用它們來顯示各個VBox的大小。 現(xiàn)在，接下來的幾行對于您來說應(yīng)該已經(jīng)很普通了：我們?yōu)槊總€VBox創(chuàng)建五個按鈕，將不同的VBox放入我們的HBox中，聲明一個Scene對象（以HBox為根）并顯示我們的應(yīng)用程序。 您的應(yīng)用程序現(xiàn)在應(yīng)如下所示：

您可以看到每個VBox以定義的間距值布置其子按鈕， HBox布置三個VBox且間距為50像素。 因為我們?yōu)槊總€VBox設(shè)置了不同的對齊方式，所以您可以看到它們以特定方式將按鈕排列在其邊界內(nèi)。 注意：我們還為HBox指定了路線，否則三個VBox不會布置在中間！ 如果您調(diào)整應(yīng)用程序窗口的大小，則應(yīng)如下所示：

您可以看到VBoxes不斷增長并填充了其父級提供的空間，并且它們?nèi)愿鶕?jù)其設(shè)置的對齊方式排列其子級。 HBox和VBox –示例2 下一個示例將顯示如何使用靜態(tài)setMargin和setHgrow （分別為setVgrow ）方法： import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.*; import javafx.scene.layout.*; import javafx.stage.Stage;/**** Created on: 20.03.2012* @author Sebastian Damm*/ public class HBoxandVBoxExample2 extends Application {@Overridepublic void start(Stage primaryStage) throws Exception{ StackPane root = new StackPane();HBox hbox = new HBox(30); // create a HBox to hold 2 vboxes // create a vbox with a textarea that grows verticallyVBox vbox = new VBox(10); Label lbName = new Label("I′m a label!");TextField textField = new TextField();TextArea textArea = new TextArea();textArea.setPrefWidth(100);VBox.setVgrow(textArea, Priority.ALWAYS); vbox.getChildren().addAll(lbName, textField, textArea);// create a vbox that grows horizontally inside the hboxVBox vbox2 = new VBox(10); Label lbName2 = new Label("I′m also a label!");TextField tf2 = new TextField();tf2.setPromptText("type here");TextArea textArea2 = new TextArea();textArea2.setPrefWidth(100);vbox2.getChildren().addAll(lbName2, tf2, textArea2);HBox.setHgrow(vbox2, Priority.ALWAYS);// the next two lines behave equally - try to comment the first line out and use the 2nd linehbox.setPadding(new Insets(20)); // StackPane.setMargin(hbox, new Insets(20));hbox.getChildren().addAll(vbox, vbox2);root.getChildren().add(hbox);Scene scene = new Scene(root, 500, 300); // the stack pane is the root nodeprimaryStage.setTitle("HBox and VBox Example 2");primaryStage.setScene(scene);primaryStage.show(); }public static void main(String[] args){Application.launch(args);} } 在此示例中，我們創(chuàng)建了兩個VBox，它們是HBox的子級。 VBox內(nèi)有一個標(biāo)簽，一個文本字段和一個文本區(qū)域。 第一行是VBox.setVgrow(textArea, Priority.ALWAYS) 。 我們定義的這行代碼是，如果TextArea對象包含在VBox則它應(yīng)始終垂直增長（否則，將不會有任何效果）。 接下來，將重點放在HBox.setHgrow(vbox2, Priority.ALWAYS) 。 在這里，我們告訴第二個VBox在HBox內(nèi)水平生長。 最后使用hbox.setPadding(new Insets(20)); 或StackPane.setMargin(hbox, new Insets(20))我們給整個HBox填充一些內(nèi)容。 這兩行在這里表現(xiàn)相同，因為一方面我們?yōu)榇案癖旧碇付艘粋€填充，窗格應(yīng)該在其邊界內(nèi)使用填充來布置其子級，而另一方面，我們告訴父級使用給定的布局對窗格進(jìn)行布局它周圍的邊緣。 注意：邊距是外部距離/間隙，填充內(nèi)部距離/間隙。

這是一張為您展示“ CSS Box Model”的圖片，它演示了內(nèi)容，填充，邊框和元素邊距之間的關(guān)系。

資料來源：w3Schools.com

因為setPadding方法是在Region類中定義的，所以每個布局窗格都可以使用此方法。 Insets類通常用于這些目的，并提供了兩種不同的構(gòu)造函數(shù)：一種采用一個double值并為每側(cè)定義相同的填充，而一個構(gòu)造函數(shù)采用4個double值并從上至左順時針定義填充。 提示：如果將邊框應(yīng)用于HBox并在兩行之間切換以設(shè)置填充/邊距，您會更清楚地看到差異。 您的應(yīng)用程序應(yīng)如下所示：

注意HBox周圍的10px填充。 如果現(xiàn)在調(diào)整窗口大小，則其外觀應(yīng)類似于以下內(nèi)容： 如您所見，左側(cè)的VBox的TextArea垂直增長，而整個右側(cè)的VBox在HBox水平增長。

參考： JavaFX 2.0布局窗格–來自我們JCG合作伙伴 Sebastian Damm的HBox和VBox在Java博客上的Just my 2 cents 。

翻譯自: https://www.javacodegeeks.com/2012/07/javafx-20-layout-panes-hbox-and-vbox.html

總結(jié)

以上是生活随笔為你收集整理的JavaFX 2.0布局窗格– HBox和VBox的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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