JavaFX | 带有示例的框

JavaFX是Oracle公司出品的一款用于构建富客户端应用程序的GUI工具包。它使用Java编程语言，并结合了最新的硬件加速技术和设计工具，使开发者能够轻松地为桌面、移动和互联网应用程序创建漂亮的用户界面（UI）。其中，JavaFX中的框(Box)控件是非常常用且重要的UI组件之一。本文将介绍JavaFX中的框控件，并提供示例代码以供程序员参考。

框控件基础

在JavaFX中，框控件(Box)是一种用于容纳其他UI元素的布局组件。它允许将一个或多个UI元素按照水平或垂直方向排列，并可控制它们之间的间距和对齐方式。

水平框

水平框(HBox)是一种按水平方向排列其他UI元素的框控件。下面是一个简单的水平框示例：

HBox hbox = new HBox();
hbox.getChildren().addAll(new Button("Button 1"), new Button("Button 2"), new Button("Button 3"));

在上述示例中，我们首先创建了一个HBox对象，并使用getChildren()方法获取其子元素列表。接着，使用addAll()方法向其中添加3个按钮(Button)控件，它们将按水平方向排列。

垂直框

垂直框(VBox)是一种按垂直方向排列其他UI元素的框控件。下面是一个简单的垂直框示例：

VBox vbox = new VBox();
vbox.getChildren().addAll(new Label("Label 1"), new Label("Label 2"), new Label("Label 3"));

与水平框类似，我们首先创建了一个VBox对象，并使用getChildren()方法获取其子元素列表。接着，使用addAll()方法向其中添加3个标签(Label)控件，它们将按垂直方向排列。

属性设置

框控件(Box)提供了一些属性用于控制它们的行为和外观。下表列出了一些常用的属性及其含义：

| 属性名 | 类型 | 含义 | | -------------- | -------------- | ------------------------------------------------------------ | | spacing | double | 相邻子元素之间的距离，以像素为单位。默认值为0。 | | alignment | Pos | 控制子元素的对齐方式。默认为Pos.CENTER_LEFT。 | | padding | Insets | 控制框内部各边缘的内边距大小。默认值为Insets.EMPTY。 | | fillHeight | boolean | 当框控件被包含在另一个布局容器中时，该属性控制它是否应占用额外的垂直空间。默认值为false。 | | fillWidth | boolean | 当框控件被包含在另一个布局容器中时，该属性控制它是否应占用额外的水平空间。默认值为false。 |

以下是一个示例代码，演示如何设置框控件的属性：

HBox hbox = new HBox();
hbox.setSpacing(10); // 设置间距为10像素
hbox.setAlignment(Pos.CENTER); // 设置对齐方式为中央对齐
hbox.setPadding(new Insets(10, 20, 30, 40)); // 设置内边距为10(top),20(right),30(bottom),40(left)
hbox.setFillHeight(true); // 填充额外垂直空间
hbox.setFillWidth(false); // 不填充额外水平空间

示例代码

下面是一个完整的JavaFX应用程序，演示如何使用框控件(Box)创建一个简单的UI界面。其中，我们使用了水平框(HBox)和垂直框(VBox)控件，并设置了它们的属性:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class BoxExample extends Application {

    @Override
    public void start(Stage stage) {
        stage.setTitle("JavaFX Box Example");

        // 创建水平框
        HBox hbox = new HBox(20); // 间距为20像素
        hbox.setAlignment(Pos.CENTER); // 中央对齐
        hbox.setPadding(new Insets(20)); // 内边距为20像素
        hbox.setStyle("-fx-background-color: #FFFFFF;"); // 背景颜色为白色

        // 向水平框中添加子元素
        hbox.getChildren().add(new Button("Button 1"));
        hbox.getChildren().add(new Button("Button 2"));

        // 创建垂直框
        VBox vbox = new VBox(10); // 间距为10像素
        vbox.setAlignment(Pos.CENTER); // 中央对齐
        vbox.setPadding(new Insets(20)); // 内边距为20像素
        vbox.setStyle("-fx-background-color: #EFEFEF;"); // 背景颜色为灰色

        // 向垂直框中添加子元素
        vbox.getChildren().add(new Label("Label 1"));
        vbox.getChildren().add(new Label("Label 2"));

        // 将水平框和垂直框组合在一起
        VBox root = new VBox(20); // 间距为20像素
        root.setAlignment(Pos.CENTER); // 中央对齐
        root.setPadding(new Insets(20)); // 内边距为20像素
        root.getChildren().add(hbox);
        root.getChildren().add(vbox);

        // 创建场景和窗口
        Scene scene = new Scene(root, 400, 300);
        stage.setScene(scene);
        stage.show();
    }

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

上述代码创建了一个简单的JavaFX应用程序，它包含了一个窗口，其中嵌套了一个水平框和一个垂直框。通过设置框控件的属性，我们可以调整它们的外观和行为。最终的效果如下所示：

总结

JavaFX中的框控件(Box)是一种方便的UI组件，可用于将其他UI元素按照水平或垂直方向排列。框控件提供了丰富的属性，可以微调它们的行为和外观。通过掌握框控件的使用方法，我们可以轻松地构建具有美观和功能性的UI界面。