JavaFX VBox

灰太狼 2023-10-15 14:37 17阅读 0赞

The JavaFX VBox component is a layout component which positions all its child nodes (components) in a vertical column - on top of each other. The JavaFX VBox component is represented by the class `javafx.scene.layout.VBox` . In this JavaFX VBox tutorial I will take a deeper look at the various options the VBox component has for the layout of controls.

### Create a VBox ###

To use the JavaFX VBox component you must first create an instance of the VBox class. You create a `VBox` instance using its constructor like this:

VBox vbox = new VBox();

`VBox` also has a constructor which takes a variable length list of components it should layout. Here is an example of how to do that:

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

This `VBox` example will layout the two [Button][] instances one on top of the other in a vertical column.

### Adding a VBox to the Scene Graph ###

For a `VBox` instance to be visible it must be added to the scene graph. This means adding it to a `Scene` object, or as child of another layout component which is attached to a `Scene` object.

Here is an example that attaches a JavaFX `VBox` with the two `Button` instances to the scene graph:

package com.jenkov.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("VBox 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);
      }
    }

The result of running the above JavaFX `VBox` example is an application that looks like this:

![2d97ca1fdefa46efb8e18db536e90e56.png][]

### Child Node Spacing ###

In the earlier example the `VBox` positioned the nodes (button controls) right under the other. You can make the `VBox` insert some space between its nested controls by providing the space in the `VBox` constructor. Here is an example of setting the space between nested controls in an `VBox`:

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

This example sets the spacing between the controls in the `VBox` layout component to 20.

You can also set the space between the nested controls using the `setSpacing()` method, like this:

vbox.setSpacing(50);

This example will set the spacing between nested controls to 50.

### Child Node Alignment ###

Since the JavaFX VBox is a container component, meaning it contains other JavaFX components, you can specify how the VBox is to align the components it contains. You do so via the VBox `setAlignment()` method. Here is an example of setting the alignment of child nodes for a JavaFX VBox:

vbox.setAlignment(Pos.BASELINE_CENTER);

This example will make the VBox position its child nodes along the baseline (vertically) of the vertical line, and from the center of the line and out (horizontally).

The JavaFX VBox control supports the following alignment options:

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <th>Parameter</th> 
   <th>Vertically</th> 
   <th>Horizontally</th> 
  </tr> 
  <tr> 
   <td>Pos.BASELINE_LEFT</td> 
   <td>Baseline</td> 
   <td>Left</td> 
  </tr> 
  <tr> 
   <td>Pos.BASELINE_CENTER</td> 
   <td>Baseline</td> 
   <td>Center</td> 
  </tr> 
  <tr> 
   <td>Pos.BASELINE_RIGHT</td> 
   <td>Baseline</td> 
   <td>Right</td> 
  </tr> 
  <tr> 
   <td>Pos.BOTTOM_LEFT</td> 
   <td>Bottom</td> 
   <td>Left</td> 
  </tr> 
  <tr> 
   <td>Pos.BOTTOM_CENTER</td> 
   <td>Bottom</td> 
   <td>Center</td> 
  </tr> 
  <tr> 
   <td>Pos.BOTTOM_RIGHT</td> 
   <td>Bottom</td> 
   <td>Right</td> 
  </tr> 
  <tr> 
   <td>Pos.CENTER_LEFT</td> 
   <td>Center</td> 
   <td>Left</td> 
  </tr> 
  <tr> 
   <td>Pos.CENTER</td> 
   <td>Center</td> 
   <td>Center</td> 
  </tr> 
  <tr> 
   <td>Pos.CENTER_RIGHT</td> 
   <td>Center</td> 
   <td>Right</td> 
  </tr> 
  <tr> 
   <td>Pos.TOP_LEFT</td> 
   <td>Top</td> 
   <td>Left</td> 
  </tr> 
  <tr> 
   <td>Pos.TOP_CENTER</td> 
   <td>Top</td> 
   <td>Center</td> 
  </tr> 
  <tr> 
   <td>Pos.TOP_RIGHT</td> 
   <td>Top</td> 
   <td>Right</td> 
  </tr> 
 </tbody> 
</table>

#### Center Horizontally ####

You can use the child node alignment features to horizontally center the child nodes of a VBox. Here is an example showing how to center the child nodes of a VBox horizontally:

vbox.setAlignment(Pos.BASELINE_CENTER);

### Child Node Margin ###

You can set the margin for child nodes of a JavaFX VBox using the static `setMargin()` method. Here is an example of setting the margin around a [JavaFX Button][Button] using the `setMargin()` method:

Button button = new Button("Button 1");
    VBox vbox = new VBox(button);
    
    VBox.setMargin(button, new Insets(10, 10, 10, 10));

This example sets the margin around the Button inside the VBox to 10 on each side.

### Child Node vgrow ###

You can specify whether a child node of a VBox should grow vertically to fill any available space available inside the VBox. You do so via the VBox `setVgrow()` static method. You have to specify which child node the rule is set for. You do so by passing the child node as parameter to `setVgrow()`. You also have to pass the vertical expansion policy as parameter to `setVgrow()`. Here is an example of telling that a child Button to expand vertically if space is available inside the VBox:

Button button = new Button("Button 1");
    VBox vbox = new VBox(button);
    
    VBox.setVgrow(button, Priority.ALWAYS);

The Priority class contains the following constants you can use to set the expansion policy:

1.  Policy.ALWAYS
2.  Policy.SOMETIMES
3.  Policy.NEVER

Please keep in mind that the VBox will only have extra vertical space available if the child nodes do not have the same preferred height, or if you explicitly set a preferred height on the VBox that is larger than the preferred height of its child nodes.

### fillWidth ###

The JavaFX VBox `fillWidth` property can be used to tell the VBox control whether it should expand the width of its children to fill out the whole width of the VBox, or keep its children at their preferred widths.

The `fillWidth` property only affects child components which widths can actually change. For instance, a Button does not change its width by default. It's max width is set to its preferred width. However, you can override that by setting the max width of the Button, or any other component you want to nest inside the VBox, to a value different than its preferred value.

Here is an example showing how the `fillWidth` property works:

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

### VBox CSS ###

Like many other JavaFX controls the VBox component can be styled via CSS. You set the CSS styles of the JavaFX VBox component via its `setStyle()` method. Styling JavaFX controls via CSS is covered in more detail in the [JavaFX CSS Styling tutorial][], but I will briefly explain how to style a JavaFX VBox here. Here is an example of setting the CSS styles of a JavaFX VBox component:

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

The VBox component supports the following CSS properties:

<table style="width:625px;"> 
 <tbody> 
  <tr> 
   <th style="width:186px;">CSS Property</th> 
   <th style="width:438px;">Description</th> 
  </tr> 
  <tr> 
   <td style="width:186px;">-fx-padding</td> 
   <td style="width:438px;">Sets the padding between the edge of the VBox and the edge of the outermost child nodes.</td> 
  </tr> 
  <tr> 
   <td style="width:186px;">-fx-border-style</td> 
   <td style="width:438px;">Sets the border style of the VBox, in case you want a visible border around it.</td> 
  </tr> 
  <tr> 
   <td style="width:186px;">-fx-border-width</td> 
   <td style="width:438px;">Sets the border width.</td> 
  </tr> 
  <tr> 
   <td style="width:186px;">-fx-border-insets</td> 
   <td style="width:438px;">Sets the border insets.</td> 
  </tr> 
  <tr> 
   <td style="width:186px;">-fx-border-radius</td> 
   <td style="width:438px;">Sets the border radius (of corners).</td> 
  </tr> 
  <tr> 
   <td style="width:186px;">-fx-border-color</td> 
   <td style="width:438px;">Sets the border color.</td> 
  </tr> 
 </tbody> 
</table>

### VBox FXML ###

You can define a JavaFX VBox from inside a [JavaFX FXML][] document. Here is an example of how a VBox FXML definition looks:

<?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>

Here are some of the most commonly used VBox XML element attributes:

*  border
 *  alignment
 *  fillWidth

[Button]: https://jenkov.com/tutorials/javafx/button.html
[2d97ca1fdefa46efb8e18db536e90e56.png]: https://img-blog.csdnimg.cn/2d97ca1fdefa46efb8e18db536e90e56.png
[JavaFX CSS Styling tutorial]: http://tutorials.jenkov.com/javafx/css-styling.html
[JavaFX FXML]: https://jenkov.com/javafx/fxml.html