JavaFX 2.0布局窗格– HBox和VBox

如果要对JavaFX 2.0中所有不同的布局窗格进行概述，或者想了解有关它们的一些基本知识，请参阅我以前的文章《 JavaFX 2.0中的布局窗格》。

布局窗格HBox和VBox绝对是JavaFX 2.0中最基本的布局容器。如您所知，它们的用途是将所有子级布置在一个水平行（ HBox ）或一个垂直列（ VBox ）中。因为它们非常容易使用，并且对于较小的布局问题非常有用，所以您可能会经常使用它们。我将给出两个有关如何使用它们的示例。与其他示例一样，首先是代码，然后是解释。

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

基本上，我们创建三个不同的VBox，并将它们放入一个HBox中。在这两个类中，您都可以直接在构造函数中或通过setSpacing方法定义间距值。此值将用作窗格中各个子项之间的间隙。行HBox hbox = new HBox(50); 因此创建一个HBox来容纳三个VBox，每个VBox之间的间隔为50像素。

我们使用setAlignment方法来指定各个VBox如何安排和布局所有子级。

使用setStyle可以将自定义CSS样式应用于任何Node 。我不想进一步详细介绍，因为我将在下一篇文章中介绍JavaFX 2.0中CSS样式，但是如果您已经熟悉CSS，那么您可能已经注意到JavaFX 2.0团队幸运的是，我决定非常严格地遵循W3C（ http://www.w3.org ）定义CSS标准。如果您不熟悉CSS，则只需要知道CSS的这些行会在组件周围创建1px宽的黑色边框。我在这里使用它们来显示各个VBox的大小。

现在，接下来的几行对于您来说应该已经很普通了：我们为每个VBox创建五个按钮，将不同的VBox放入我们的HBox中，声明一个Scene对象（以HBox为根）并显示我们的应用程序。

您的应用程序现在应如下所示：

javafx1

您可以看到每个VBox以定义的间距值布置其子按钮， HBox布置三个VBox且间距为50像素。因为我们为每个VBox设置了不同的对齐方式，所以您可以看到它们以特定方式将按钮排列在其边界内。

注意：我们还为HBox指定了路线，否则三个VBox不会布置在中间！

如果您调整应用程序窗口的大小，则应如下所示：

javafx2

您可以看到VBoxes不断增长并填充了其父级提供的空间，并且它们仍根据其设置的对齐方式排列其子级。

HBox和VBox –示例2

下一个示例将显示如何使用静态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);}
}

在此示例中，我们创建了两个VBox，它们是HBox的子级。 VBox内有一个标签，一个文本字段和一个文本区域。

第一行是VBox.setVgrow(textArea, Priority.ALWAYS) 。我们定义的这行代码是，如果TextArea对象包含在VBox则它应始终垂直增长（否则，将不会有任何效果）。接下来，将重点放在HBox.setHgrow(vbox2, Priority.ALWAYS) 。在这里，我们告诉第二个VBox在HBox内水平生长。

最后使用hbox.setPadding(new Insets(20)); 或StackPane.setMargin(hbox, new Insets(20))我们给整个HBox填充一些内容。这两行在这里表现相同，因为一方面我们为窗格本身指定了一个填充，窗格应该在其边界内使用填充来布置其子级，而另一方面，我们告诉父级使用给定的布局对窗格进行布局它周围的边缘。

注意：边距是外部距离/间隙，填充内部距离/间隙。

这是一张为您展示“ CSS Box Model”的图片，它演示了内容，填充，边框和元素边距之间的关系。