JavaFX的几个常用布局

不论我们构建何种应用,都需要按照一定顺序将各个元素排列起来。一个或多个元素通常组合放置在相应的容器中,遵循一定的布局方案。不同的布局方案对应不同的功能,在JavaFX中提供了以下几种预定的布局,每个布局系统都对应一个属于javafx.layout包中的类(Class),以下列举几种布局供阁下参考。

值得注意的是,在创建布局之前,你需要遵循以下几点:

  1. 创建所需元素(元素一词也理解为节点,或者是类似于Button的控件,全文同解)
  2. 实例化所需布局的相应(Class)类
  3. 设置布局属性
  4. 将所创建的元素添加至布局中

如阁下不能理解,请结合下文中例句的代码块。

创建布局之前的准备工作

创建所需元素

前文提到元素为类似于Button的控件,为方便理解,下文均采用Button作演示。

首先,阁下需要实例化将要添加的元素。

// 创建第一个Button元素
Button btnClick = new Button("Click here!");

// 创建第二个Button元素
Button btnDont = new Button("Don't click!");

实例化所需布局相应的类

在设置好各个元素之后,我们便可以开始选择所需布局,并对其进行实例化。

例如,阁下需要使用VBox布局使布局中的元素垂直放置。

// 实例化VBox布局
VBox vbox = new VBox();

至此,对布局的实例化已经完成。这时你需要使用各自的setter方法设置所选布局的属性。

设置布局属性

例如,阁下需要将VBox布局中的各个元素之间设置一定的空间,则需要将spacing属性设置,通过setter方法setSpacing()来完成操作。

// 将Vbox的Spacing属性设置为25
vbox.setSpacing(25);

将所创建的元素添加至布局中

万事俱备,只欠东风。现在阁下只需要将已经创建完成的元素添加至布局中。

// 将已经创建完成的元素添加到Vbox布局中
vbox.getChildren().addAll(btnClick, btnDont);

// 阁下也可以在实例化VBox时将控件添加至其中
VBox vbox = new VBox(btnClick, btnDont);

当然,阁下如果只是在项目中编写了如上的代码段,Java编译器会毫不犹豫的给出失败。要运行一个完成的JavaFX程序,请参考以下代码。

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

public class Sample extends Application {

private Parent createContent() {
Button btnClick = new Button("Click Here!");
Button btnDont = new Button("Don't Click!");

VBox vbox = new VBox(btnClick, btnDont);

return new Group(vbox);
}

@Override
public void start(Stage stage) {
stage.setHeight(200);
stage.setWidth(300);
stage.setScene(new Scene(createContent()));
stage.show();
}

}

至此,所有的准备工作已经完成,下面开始着重介绍JavaFX中几种常用的布局方案。

JavaFX中的常用布局

VBox(垂直布局)

VBox会将在布局中的所有元素都放置在一个垂直的列中。

VBox布局

HBox(水平布局)

HBox会将在布局中的所有元素都放置在一个水平的列中。

HBox布局

BorderPane(边框布局)

BorderPane会将在布局中的元素排列至上、下、左、右和中心位置。

BorderPane布局

StackPane(堆栈布局)

StackPane会将在布局中的元素排列在另一个元素的上面,类似于物品的堆叠。优先添加的元素位于布局的底部,往后添加的元素都会依次类推向上堆叠。

StackPane布局

GridPane(网格布局)

GirdPane会将在布局中的元素排列为行和列的网格,此布局常用于创建表单。

GridPane布局

TextFlow(文本流布局)

TextFlow能够将布局中的文本元素从左到右依次连接,之所以使用TextFlow布局,是因为默认在多文本元素的情况下,各文本元素无法依次排列对齐,在TextFlow的布局策略中能够最完美的解决文本元素的各种问题。

TextFlow布局