使用布局窗格排列场景

# 使用布局窗格排列场景 ## 1. 布局窗格简介 在 JavaFX 中，控制场景中组件的布局往往是最具挑战性的工作之一。组件有时仿佛有自己的“想法”，固执地拒绝移动，或者在你期望它们并排排列时却堆叠在一起。其实，问题不在于组件本身，而在于布局窗格。布局窗格是特殊的类，其主要作用是控制场景中节点的排列方式。JavaFX 提供了多种不同类型的布局窗格，每种类型都采用不同的方法来控制节点的排列。成功布局场景的关键在于正确组合使用布局窗格，以实现所需的排列效果。 ### 1.1 五种常用的 JavaFX 布局窗格 JavaFX 提供了许多不同的布局窗格，下面介绍五种常用的布局窗格： |布局窗格|描述| | ---- | ---- | |HBox|水平排列节点，一个接一个，常用于创建整齐排列的行控件。| |VBox|垂直排列节点，一个在另一个之上，常用于创建整齐排列的列控件。| |FlowPane|将节点彼此相邻排列，直到空间不足，然后换行继续排列。可以配置为水平行或垂直列排列节点。| |Border|将窗格划分为五个区域：顶部、左侧、中心、右侧和底部。添加节点时，可以指定将节点放置在哪个区域。| |GridPane|将窗格划分为网格，可完全控制元素在行和列中的排列。| ## 2. 创建布局窗格 创建布局节点的一般步骤如下： 1. **创建要添加到窗格的控件或其他节点**： ```java Button btnOK = new Button(); btnOK.setText("OK"); btnOK.setOnAction( e -> btnOK_Click() ); Button btnCancel = new Button(); btnCancel.setText("Cancel"); btnCancel.setOnAction( e -> btnCancel_Click() ); ``` 2. **通过调用构造函数创建布局窗格**： ```java HBox pane = new HBox(); ``` 3. **微调布局窗格使用的可选设置**： ```java HBox.setSpacing(10); ``` 4. **添加将出现在布局窗格中的每个节点**： ```java pane.getChildren().addAll(btnOK, btnCancel); ``` 5. **创建场景并指定布局窗格作为场景的根节点**： ```java Scene scene = new Scene(pane, 300, 400); ``` ```mermaid graph LR A[创建节点] --> B[创建布局窗格] B --> C[微调设置] C --> D[添加节点] D --> E[创建场景] ``` ## 3. 组合布局窗格 可以组合多个布局窗格来创建比单个布局窗格更复杂的布局。例如，要创建一个底部有水平按钮行且右侧有垂直按钮列的布局，可以按以下步骤操作： 1. 创建底部按钮的 HBox 和右侧按钮的 VBox。 2. 创建一个 BorderPane，并将 HBox 添加到底部区域，将 VBox 添加到右侧区域。 由于所有布局窗格都继承自 `javafx.scene.layout.Pane` 类，而该类又继承自 `javafx.scene.node` 类，因此所有窗格也是节点。可以根据需要将布局窗格嵌套在布局窗格中，以实现应用程序所需的精确布局。 ## 4. 使用 HBox 布局 HBox 类是 JavaFX 中最简单的布局管理器之一，它将一个或多个节点排列成水平行。以下是 HBox 类常用的构造函数和方法： |构造函数|描述| | ---- | ---- | |HBox()|创建一个空的 HBox。| |HBox(double spacing)|创建一个具有指定间距的空 HBox。| |HBox(Node... children)|创建一个包含指定子节点的 HBox。此构造函数可同时创建 HBox 并添加子节点。| |HBox(double spacing, Node... children)|创建一个具有指定间距和子节点的 HBox。| |方法|描述| | ---- | ---- | |ObservableList<Node> getChildren()|返回添加到 HBox 的所有子节点的集合。集合以 ObservableList 类型返回，包含 addAll 方法，可用于向列表中添加一个或多个节点。| |static void setAlignment(Pos alignment)|设置 HBox 内子节点的对齐方式。| |static void setHgrow(Node child, Priority priority)|设置给定子节点的增长行为。| |static void setMargin(Node child, Insets value)|设置给定子节点的边距。| |void setPadding(Insets value)|设置 HBox 内边缘周围的填充。| |void setSpacing(double value)|设置 HBox 内显示的节点之间的间距。| 创建 HBox 的简单示例： ```java Button btn1 = new Button("Button One"); Button btn2 = new Button("Button Two"); Button btn3 = new Button("Button Three"); HBox hbox = new HBox(btn1, btn2, btn3); ``` 如果想先创建一个空的 HBox 并稍后添加控件，可以这样做： ```java HBox hbox = new HBox(); hbox.getChildren().addAll(btn1, btn2, btn3); ``` ## 5. 节点间距设置 默认情况下，布局窗格中的子节点会紧密排列，没有空隙。如果想在窗格中的节点之间提供间距，可以通过以下四种方式实现： - **在窗格内元素之间添加间距** - **在窗格内边缘周围添加填充** - **为窗格中的各个节点添加边距** - **创建可增长的间隔节点以填充可用空间** ### 5.1 添加元素间距 可以使用 HBox 构造函数的间距参数或调用 `setSpacing` 方法来设置 HBox 窗格的间距。例如： ```java H ```