JavaFX几种典型的布局策略

系统管理员 2024-02-25 05:46 89阅读 0赞

为了构造我们所需要的程序界面，我们会使用JavaFX提供的丰富的控件来实现这一目标。但是如何摆放这些控件的位置是一个重要的问题，JavaFX提供了一种特殊的控件，即面板Pane来解决这个问题，不同类型的面板采取不同的布局策略。我们可以根据实际的需要来选择不同的面板，从而构造出我们所需要的界面。下面就介绍几种常用的面板。

## （一） FlowPane面板 ##

它采用的布局策略是：按照控件的添加次序按个摆放，按照从上到下、从左到右的次序摆放。当舞台的大小发生变化后，场景的大小也自动跟着变化，面板的大小也跟着变化，并且会重新计算各个控件的位置，重新摆放各个控件的位置。

首先创建一个FlowPane对象，代码如下：

FlowPane pane = new FlowPane();
    
    pane.setPadding(new Insets(11, 12, 13, 14));
    
    //设置控件之间的垂直间隔距离
    pane.setHgap(5);
    
    //设置控件之间的水平间隔距离
    pane.setVgap(5);

创建两个标签对象、两个文本输入框和一个按钮对象，代码如下：

Label lbName = new Label("Please input a name:");
    
    TextField tfName = new TextField();
    
    Label lbPassword = new Label("Please input a password:");
    
    TextField tfPassword = new TextField();   
    
    Button okbtn = new Button("OK");

将这几个控件添加到面板中，代码如下：

pane.getChildren().addAll(lbName,tfName,lbPassword,tfPassword,okbtn);

程序运行后界面如下所示：

![480c6294c3b14ac3b596288b25214178.png][]

当改变舞台大小时，界面如下：

![89817d0099984f32ab403169cc32d501.png][]

![f800d0470fb54191912ba967d58f4038.png][]

## （二） GridPane面板 ##

它采用的布局策略是：将整个面板划分为若干个格子，每个格子的大小是一样的，每个格子中可以放置一个控件，类似于表格的方式。

如下代码创建了一个GridPane对象：

GridPane pane = new GridPane();
    
        pane.setAlignment(Pos.CENTER);
    
        pane.setPadding(new Insets(11.5, 12.5, 13.5, 14.5));
    
        pane.setHgap(5.5);
    
        pane.setVgap(5.5);

向面板中添加六个按钮，代码如下：

pane.add(new Button("1"), 0, 0);
    
        pane.add(new Button("2"), 1, 0);
    
        pane.add(new Button("3"), 0, 1);
    
        pane.add(new Button("4"), 1, 1);
    
        pane.add(new Button("5"), 0, 2);
    
        pane.add(new Button("6"), 1, 2);

add方法的第二个和第三个参数是指定控件摆放的位置，分别表示所在的列和行，0是第一行和第一列。布局效果如下图所示：

![ce4b4f3137ff49839b96a1ac0a046562.png][]

## （三） BorderPane面板 ##

它采用的布局策略是：将整个面板划分五个区域，分别是上、下、左、右、中，每个区域可以放置一个控件。

首先创建一个BorderPane对象，代码如下：

BorderPane pane = new BorderPane();

然后在BorderPane对象的五个区域分别放置五个CustomPane对象，CustomPane是自定义面板，是为了方便放置标签。代码如下：

pane.setTop(new CustomPane("Top")); //放置在上面
    
        pane.setRight(new CustomPane("Right"));//放置在右边
    
        pane.setBottom(new CustomPane("Bottom"));//放置在上面
    
        pane.setLeft(new CustomPane("Left"));//放置在左边
    
        pane.setCenter(new CustomPane("Center"));//放置在中间

效果如下图所示：

![d689faa6ad3745edbcd2bcfb73714a65.png][]

## （四） HBox面板 ##

HBox是将所有的控件放在同一行，无论有多少个控件都是放在同一行。

首先创建一个HBox对象，代码如下：

HBox hBox = new HBox(15);
    
        hBox.setPadding(new Insets(15, 15, 15, 15));
    
        hBox.setStyle("-fx-background-color: gold");

然后，在面板上添加六个按钮，代码如下：

hBox.getChildren().add(new Button("one"));
    
        hBox.getChildren().add(new Button("two"));
    
        hBox.getChildren().add(new Button("three"));
    
        hBox.getChildren().add(new Button("four"));
    
        hBox.getChildren().add(new Button("five"));
    
        hBox.getChildren().add(new Button("six"));

布局效果如下图所示：

![f9f58eac323c40c59fd6ce01d29976c1.png][]

当舞台的大小改变时，所有的控件总是放在同一行，如下图所示：

![83d78b83add04f24bf4e311a9d8bd2d5.png][]

![ec71c0c9bb994e158e97ec692ddeb497.png][]

（五） VBox面板

VBox的布局策略与HBox类似，不过VBox是将所有的控件放在同一列。

首先创建一个VBox对象，代码如下：

VBox vBox = new VBox(15);
    
        vBox.setPadding(new Insets(15, 5, 5, 5));

然后，在VBox对象中添加六个按钮，代码如下：

vBox.getChildren().add(new Button("one"));
    
        vBox.getChildren().add(new Button("two"));
    
        vBox.getChildren().add(new Button("three"));
    
        vBox.getChildren().add(new Button("four"));
    
        vBox.getChildren().add(new Button("five"));
    
        vBox.getChildren().add(new Button("six"));

布局效果如下图所示：

![1c7d787772fd4cf28de0663f97e570ec.png][]

以上五种面板的布局策略各有其特点，可以根据实际情况选取合适的面板进行布局。但很多时候如果只使用其中的一种面板，可能难以构造我们所需要的界面，这个时候可以将多种不同类型的面板结合起来使用，就可以达到我们所需要的效果。

当然，JavaFX提供的面板不止上面介绍的五种，其它的面板这里就不介绍了，有兴趣的可以参考JDK文档中的详细介绍。

此外，为了方便我们构造界面，专门有一个配套的用于构造界面的工具软件JavaFX Scene Builder，使用这个工具，我们就可以采用可视化的方式来构造界面，即所见即所得。

[480c6294c3b14ac3b596288b25214178.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/5c78a99299854e48a75067f4925c189a.png
[89817d0099984f32ab403169cc32d501.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/bbf7b476661e4daabffa62be4acf956e.png
[f800d0470fb54191912ba967d58f4038.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/4498435197194d61996cf5feeabc879c.png
[ce4b4f3137ff49839b96a1ac0a046562.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/c52b4b244ac746e980f6d66084502c1d.png
[d689faa6ad3745edbcd2bcfb73714a65.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/1aa2a9de1a2f41c3be93badf2a84de38.png
[f9f58eac323c40c59fd6ce01d29976c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/14ab5507b5b046e98c1da159fa8c4fce.png
[83d78b83add04f24bf4e311a9d8bd2d5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/370e903d640e402894becbfc284678b6.png
[ec71c0c9bb994e158e97ec692ddeb497.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/662cfdfe183e4a69855d6350b59cd37a.png
[1c7d787772fd4cf28de0663f97e570ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/0de298e92e10493bb52caf962d51af30.png