Javafx 简明教程

JavaFX - FlowPane Layout

FlowPane Layout in JavaFX

flow pane 布局将它的所有节点按顺序排列。在水平 Flow Pane 中，元素根据它们的高度环绕，而在垂直 Flow Pane 中，元素根据它们的宽度环绕。

The flow pane layout arranges all of its nodes in a flow. In a horizontal Flow Pane, elements are wrapped based on their height, while in a vertical Flow Pane, elements are wrapped according to their width.

在 JavaFX 中，包 javafx.scene.layout 中名为 FlowPane 的类表示 Flow Pane。要在我们的 JavaFX 应用程序中创建 Flow Pane 布局，使用以下任一构造函数实例化此类 −

In JavaFX, the class named FlowPane of the package javafx.scene.layout represents the Flow Pane. To create a flow pane layout within our JavaFX application, instantiate this class using any of the below constructor −

  1. FlowPane() − It constructs a new horizontal FlowPane layout.

  2. FlowPane(double hGap, double vGap) − It creates a new horizontal FlowPane layout with the specified hGap and vGap.

  3. FlowPane(double hGap, double vGap, Node childNodes) − Constructs a horizontal FlowPane layout with the specified hGap, vGap and nodes.

  4. FlowPane(Orientation orientation) − It creates a new FlowPane layout with the specified orientation. It can be either HORIZONTAL or VERTICAL.

该类包含以下属性 −

This class contains the following properties −

S.No

properties & Description

1

alignment*This property represents the alignment of the contents of the Flow pane. We can set this property using the setter method *setAllignment().

2

*columnHalignment*This property represents the horizontal alignments of nodes in a vertical flow pane.

3

*rowValignment*This property represents the vertical alignment of nodes in a horizontal flow pane.

4

*Hgap*This property is of double type and it represents the horizontal gap between the rows/columns of a flow pane.

5

*Orientation*This property represents the orientation of a flow pane.

6

*Vgap*This property is of double type and it represents the vertical gap between the rows/columns of a flow pane.

Example

以下是 FlowPane 布局的一个示例程序。在此，我们在水平流窗格中插入了四个按钮。将此代码保存在一个名为 FlowPaneExample.java 的文件中。

The following program is an example of the FlowPane layout. In this, we are inserting four button in the horizontal flow pane. Save this code in a file with the name FlowPaneExample.java.

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.scene.shape.Sphere;
import javafx.stage.Stage;

public class FlowPaneExample extends Application {
   @Override
   public void start(Stage stage) {
      //Creating button1
      Button button1 = new Button("Button1");

      //Creating button2
      Button button2 = new Button("Button2");

      //Creating button3
      Button button3 = new Button("Button3");

      //Creating button4
      Button button4 = new Button("Button4");

      //Creating a Flow Pane
      FlowPane flowPane = new FlowPane();

      //Setting the horizontal gap between the nodes
      flowPane.setHgap(25);

      //Setting the margin of the pane
      flowPane.setMargin(button1, new Insets(20, 0, 20, 20));

      //Adding all the nodes to the flow pane
      flowPane.getChildren().addAll(button1, button2, button3, button4);

      //Creating a scene object
      Scene scene = new Scene(flowPane, 400, 300);

      //Setting title to the Stage
      stage.setTitle("Flow Pane Example in JavaFX");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令，从命令提示符编译并执行已保存的 java 文件。

Compile and execute the saved java file from the command prompt using the following commands.

javac --module-path %PATH_TO_FX% --add-modules javafx.controls FlowPaneExample.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls FlowPaneExample

执行后，上述程序会生成如下所示的 JavaFX 窗口。

On executing, the above program generates a JavaFX window as shown below.

flowpane output

Example

在以下示例中，我们将创建一个具有垂直方向的 FlowPane。要设置方向，我们将通过将 Orientation.VERTICAL 枚举值作为参数传递给 FlowPane 类的参数化构造函数来使用它。将此代码保存在一个名为 JavafxFlowpane.java 的文件中。

In the following example, we are going to create a FlowPane with vertical orientation. To set the orientation, we will use the parameterized constructor of the FlowPane class by passing the Orientation.VERTICAL enum value as an argument. Save this code in a file with the name JavafxFlowpane.java.

import javafx.application.Application;
import javafx.geometry.Orientation;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.scene.shape.Sphere;
import javafx.stage.Stage;

public class JavafxFlowpane extends Application {
   @Override
   public void start(Stage stage) {
      //Creating button1
      Button button1 = new Button("Button1");

      //Creating button2
      Button button2 = new Button("Button2");

      //Creating button3
      Button button3 = new Button("Button3");

      //Creating button4
      Button button4 = new Button("Button4");

      //Creating a Flow Pane
      FlowPane flowPane = new FlowPane(Orientation.VERTICAL);

      //Setting the horizontal gap between the nodes
      flowPane.setVgap(15);

      //Setting the margin of the pane
      flowPane.setAlignment(Pos.CENTER);

      //Adding all the nodes to the flow pane
      flowPane.getChildren().addAll(button1, button2, button3, button4);

      //Creating a scene object
      Scene scene = new Scene(flowPane, 400, 300);

      //Setting title to the Stage
      stage.setTitle("Flow Pane Example in JavaFX");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

要从命令提示符编译并执行已保存的 java 文件，请使用以下命令 −

To compile and execute the saved java file from the command prompt, use the following commands −

javac --module-path %PATH_TO_FX% --add-modules javafx.controls JavafxFlowpane.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls JavafxFlowpane

当我们执行上述 Java 程序时，它将生成一个显示以下输出的 JavaFX 窗口 −

When we execute the above Java program, it will generate a JavaFX window displaying the following output −

flowpane output2