当前位置：首页 > article >正文

JavaFX FXML模式下的布局

article 2024/12/29 10:18:10

常见布局方式概述
- 在 JavaFX FXML 模式下，有多种布局方式可供选择。这些布局方式可以帮助您有效地组织和排列 UI 组件，以创建出美观且功能良好的用户界面。
常用布局容器及布局方式
- BorderPane 布局
  - 特点：BorderPane 将空间划分为五个区域，分别是顶部（top）、底部（bottom）、左侧（left）、右侧（right）和中心（center）。这种布局方式非常适合创建具有明确区域划分的界面，如主窗口布局，其中中心区域可以放置主要内容，顶部放置菜单或标题栏，底部放置状态栏等。
  - 示例用法：
    - 在 FXML 文件中，可以这样定义一个 BorderPane 布局：
```
<?xml version="1.0" encoding="UTF - 8"?>
<?import javafx.scene.layout.BorderPane?>
<BorderPane xmlns:fx="http://javafx.com/fxml/1">
    <top>
        <Label text="这是顶部区域"/>
    </top>
    <bottom>
        <Label text="这是底部区域"/>
    </bottom>
    <left>
        <Label text="这是左侧区域"/>
    </left>
    <right>
        <Label text="这是右侧区域"/>
    </right>
    <center>
        <Label text="这是中心区域"/>
    </center>
</BorderPane>
```
    - 在这个例子中，我们通过在 BorderPane 的不同区域放置Label组件来展示其布局方式。各个区域的组件会按照 BorderPane 的布局规则自动排列。
- VBox 和 HBox 布局
  - 特点：VBox（垂直盒子）布局是将组件按照垂直方向排列，而 HBox（水平盒子）布局则是将组件按照水平方向排列。它们可以方便地用于创建表单、工具条等需要组件在一个方向上排列的界面部分。这些布局容器可以设置组件之间的间距、对齐方式等属性。
  - 示例用法：
    - 以下是一个 VBox 布局的 FXML 示例：
```
<?xml version="1.0" encoding="UTF - 8"?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.Button?>
<VBox xmlns:fx="http://javafx.com/fxml/1">
    <Button text="按钮1"/>
    <Button text="按钮2"/>
    <Button text="按钮3"/>
</VBox>
```
    - 在这个 VBox 布局中，三个Button组件会按照垂直方向依次排列。如果要使用 HBox 布局，只需将VBox标签替换为HBox标签，组件就会按照水平方向排列。
- GridPane 布局
  - 特点：GridPane 布局允许您将组件放置在一个二维的网格中。通过指定组件在网格中的行和列位置，可以创建出表格形式的布局，非常适合用于布局数据表格、表单等需要行列对齐的界面。它可以灵活地设置每个单元格的大小、组件在单元格中的对齐方式等。
  - 示例用法：
    - 下面是一个简单的 GridPane 布局示例：
```
<?xml version="1.0" encoding="UTF - 8"?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<GridPane xmlns:fx="http://javafx.com/fxml/1">
    <Label text="姓名：" GridPane.rowIndex="0" GridPane.columnIndex="0"/>
    <TextField GridPane.rowIndex="0" GridPane.columnIndex="1"/>
    <Label text="年龄：" GridPane.rowIndex="1" GridPane.columnIndex="0"/>
    <TextField GridPane.rowIndex="1" GridPane.columnIndex="1"/>
</GridPane>
```
    - 在这个例子中，我们使用 GridPane 布局创建了一个简单的表单。Label和TextField组件分别放置在网格的不同行和列位置，通过设置GridPane.rowIndex和GridPane.columnIndex属性来指定组件的位置。
- StackPane 布局
  - 特点：StackPane 布局是将所有组件堆叠在一起，后添加的组件会覆盖前面添加的组件（可以通过设置透明度等方式来调整显示效果）。这种布局方式适用于创建一些具有重叠效果的界面，如提示信息框覆盖在主界面上、图片和文字叠加等场景。
  - 示例用法：
    - 例如，以下是一个 StackPane 布局的 FXML 示例：
```
<?xml version="1.0" encoding="UTF - 8"?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.paint.Color?>
<?import javafx.scene.shape.Rectangle?>
<?import javafx.scene.text.Text?>
<StackPane xmlns:fx="http://javafx.com/fxml/1">
    <Rectangle width="100" height="100" fill="blue"/>
    <Text text="这是叠加的文字" fill="white"/>
</StackPane>
```
    - 在这个 StackPane 布局中，Rectangle组件先被添加，Text组件后被添加，所以文字会叠加在矩形上面，并且可以通过设置文字的填充颜色等属性来使其在蓝色矩形背景上更清晰地显示。