JavaFX VBox组件是一个布局组件，将其所有子节点(组件)放置在彼此垂直的垂直列中。 JavaFX VBox组件由类javafx.scene.layout.VBox表示。在此JavaFX VBox教程中，我将更深入地研究VBox组件用于控件布局的各种选项。

创建一个VBox

要使用JavaFX VBox组件，必须首先创建VBox类的实例。我们可以使用其构造函数创建VBox实例，如下所示：

VBox vbox = new VBox();

VBox还具有一个构造函数，该构造函数采用了可变长度的应布局组件列表。这是如何执行此操作的示例：

Button button1 = new Button("Button Number 1");
Button button2 = new Button("Button Number 2");

VBox vbox = new VBox(button1, button2);

这个" VBox"示例将在垂直列中将两个Button实例一个接一个地布局。

将VBox添加到场景图

为了使" VBox"实例可见，必须将其添加到场景图中。这意味着将其添加到"场景"对象，或者作为添加到"场景"对象的另一个布局组件的子代。

这是一个将JavaFXVBox和两个Button实例添加到场景图的示例：

package com.Hyman.javafx.layouts;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class VBoxExperiments extends Application{

  @Override
  public void start(Stage primaryStage) 
    throws Exception { 
    primaryStage.setTitle("HBox Experiment 1");

    Button button1 = new Button("Button Number 1");
    Button button2 = new Button("Button Number 2");

    VBox vbox = new VBox(button1, button2);

    Scene scene = new Scene(vbox, 200, 100);
    primaryStage.setScene(scene);
    primaryStage.show();
  }

  public static void main(String[] args) {
    Application.launch(args);
  }
}

运行上面的JavaFXVBox示例的结果是一个看起来像这样的应用程序：

子节点间距

在较早的示例中，" VBox"将节点(按钮控件)放置在另一个节点的正下方。我们可以通过在VBox构造函数中提供空格，使VBox在其嵌套控件之间插入一些空间。这是在VBox中设置嵌套控件之间的空间的示例：

VBox vbox = new VBox(20, button1, button2);

本示例将VBox布局组件中控件之间的间距设置为20。

我们还可以使用setSpacing()方法设置嵌套控件之间的空间，如下所示：

vbox.setSpacing(50);

本示例将嵌套控件之间的间距设置为50。

子节点对齐

由于JavaFX VBox是容器组件，意味着它包含其他JavaFX组件，因此我们可以指定VBox如何对齐其包含的组件。我们可以通过VBox的setAlignment()方法来实现。这是为JavaFX VBox设置子节点的对齐方式的示例：

vbox.setAlignment(Pos.BASELINE_CENTER);

此示例将使VBox沿垂直线的基线(垂直)并从该线的中心开始(水平)向外放置其子节点。

JavaFX VBox控件支持以下对齐选项：

水平居中

我们可以使用子节点对齐函数将VBox的子节点水平居中。这是一个示例，显示了如何水平对齐VBox的子节点：

vbox.setAlignment(Pos.BASELINE_CENTER);

子节点保证金

我们可以使用静态setMargin()方法为JavaFX VBox的子节点设置边距。这是一个使用setMargin()方法在JavaFX Button周围设置边距的示例：

Button button = new Button("Button 1");

VBox vbox = new VBox(button);

VBox.setMargin(button, new Insets(10, 10, 10, 10));

本示例将VBox内Button周围的边距设置为每边10.

子节点vgrow

我们可以指定VBox的子节点是否应垂直增长以填充VBox内部可用的任何可用空间。我们可以通过VBox的setVgrow()静态方法来实现。我们必须指定为其设置规则的子节点。我们可以通过将子节点作为参数传递给setVgrow()来实现。我们还必须将垂直扩展策略作为参数传递给setVgrow()。这是一个告诉子按钮在VBox内部有可用空间时垂直扩展的示例：

Button button = new Button("Button 1");

VBox vbox = new VBox(button);

VBox.setVgrow(button, Priority.ALWAYS);

Priority类包含以下可用于设置扩展策略的常量：

• 政策始终
• 政策有时
• 永不政策

请记住，如果子节点的首选高度不同，或者在VBox上显式设置的首选高度大于其子节点的首选高度，则VBox只会具有额外的垂直空间。

fillWidth

JavaFX VBox的fillWidth属性可用于告诉VBox控件是否应扩展其子级的宽度以填充VBox的整个宽度，还是将其子级保持在其首选宽度。

" fillWidth"属性仅影响宽度实际上可以改变的子组件。例如，默认情况下，按钮不更改其宽度。它的最大宽度设置为其首选宽度。但是，可以通过将Button或者要嵌套在VBox中的任何其他组件的最大宽度设置为与其首选值不同的值来覆盖该值。

这是一个显示fillWidth属性如何工作的示例：

Button button = new Button("Button 1");
button.setMaxWidth(99999D); //or Double.MAX_VALUE;

VBox vbox = new VBox(button);

vbox.setFillWidth(true);

VBox CSS

像许多其他JavaFX控件一样，可以通过CSS设置VBox组件的样式。我们可以通过JavaFX VBox组件的setStyle()方法设置CSS样式。 JavaFX CSS样式教程中将详细介绍如何通过CSS样式化JavaFX控件，但是我将在此处简要说明如何设置JavaFX VBox的样式。这是设置JavaFX VBox组件的CSS样式的示例：

vbox.setStyle("-fx-padding: 16;");

VBox组件支持以下CSS属性：

VBox FXML

我们可以从JavaFX FXML文档中定义JavaFX VBox。这是VBox FXML定义的外观示例：

<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>
<GridPane xmlns:fx="http://javafx.com/fxml"
          fx:controller="sample.Controller"
          alignment="center" hgap="10" vgap="10">

    <VBox>
        <Label>Text inside VBox</Label>
    </VBox>

</GridPane>

以下是一些最常用的VBox XML元素属性：

• border
• alignment
• fillWidth