VBox与HBox在JavaFX中的布局应用
JavaFX 提供了 VBox 和 HBox 两种基础布局容器,分别用于垂直和水平方向的组件排列。它们均继承自 Pane,支持动态添加子节点,并可灵活配置间距与对齐方式。
垂直布局:VBox
VBox 将其子元素按上下顺序堆叠。通过构造函数传入间距值,可统一控制子项间的距离。使用 setAlignment() 方法可设定整体对齐策略,如顶部对齐、居中或底部对齐。
示例代码:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class VerticalLayoutExample extends Application {
@Override
public void start(Stage window) {
VBox container = new VBox(15); // 设置子元素间15像素间距
container.setAlignment(javafx.geometry.Pos.CENTER); // 居中对齐
Button firstBtn = new Button("首项");
Button secondBtn = new Button("第二项");
Button thirdBtn = new Button("第三项");
container.getChildren().addAll(firstBtn, secondBtn, thirdBtn);
Scene layoutScene = new Scene(container, 250, 350);
window.setTitle("垂直布局演示");
window.setScene(layoutScene);
window.show();
}
public static void main(String[] args) {
launch(args);
}
}
水平布局:HBox
HBox 实现横向排列,子元素从左至右依次排布。同样支持设置间距和对齐方式,例如左对齐、居中或右对齐,适用于工具栏、表单控件等水平分布场景。
示例代码:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class HorizontalLayoutExample extends Application {
@Override
public void start(Stage window) {
HBox container = new HBox(20); // 子元素间距为20像素
container.setAlignment(javafx.geometry.Pos.CENTER); // 中心对齐
Button leftBtn = new Button("左按钮");
Button midBtn = new Button("中按钮");
Button rightBtn = new Button("右按钮");
container.getChildren().addAll(leftBtn, midBtn, rightBtn);
Scene scene = new Scene(container, 400, 100);
window.setTitle("水平布局示例");
window.setScene(scene);
window.show();
}
public static void main(String[] args) {
launch(args);
}
}
这两种布局组件不仅独立使用效果良好,还可嵌套组合,构建复杂界面结构。例如,在一个 VBox 内部放置多个 HBox 来组织不同功能区域,实现灵活且可维护的 UI 设计。