JavaFX FXML模式下的布局

  1. 常见布局方式概述
    • 在 JavaFX FXML 模式下,有多种布局方式可供选择。这些布局方式可以帮助您有效地组织和排列 UI 组件,以创建出美观且功能良好的用户界面。
  2. 常用布局容器及布局方式
    • 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 布局创建了一个简单的表单。LabelTextField组件分别放置在网格的不同行和列位置,通过设置GridPane.rowIndexGridPane.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组件后被添加,所以文字会叠加在矩形上面,并且可以通过设置文字的填充颜色等属性来使其在蓝色矩形背景上更清晰地显示。

相关推荐
程序员清风1 小时前
快手二面:乐观锁是怎么用它来处理多线程问题的?
java·后端·面试
一线大码2 小时前
SpringBoot 优雅实现接口的多实现类方式
java·spring boot·后端
花伤情犹在2 小时前
Java Stream 高级应用:优雅地扁平化(FlatMap)递归树形结构数据
java·stream·function·flatmap
yaoxin5211232 小时前
212. Java 函数式编程风格 - Java 编程风格转换:命令式 vs 函数式(以循环为例)
java·开发语言
摇滚侠2 小时前
Spring Boot 3零基础教程,WEB 开发 Thymeleaf 属性优先级 行内写法 变量选择 笔记42
java·spring boot·笔记
滑水滑成滑头2 小时前
**发散创新:多智能体系统的探索与实践**随着人工智能技术的飞速发展,多智能体系统作为当今研究的热点领域,正受到越来越多关注
java·网络·人工智能·python
摇滚侠2 小时前
Spring Boot 3零基础教程,WEB 开发 Thymeleaf 总结 热部署 常用配置 笔记44
java·spring boot·笔记
十年小站2 小时前
一、新建一个SpringBoot3项目
java·spring boot
2401_841495642 小时前
【数据结构】最长的最短路径的求解
java·数据结构·c++·python·算法·最短路径·图搜索
麦麦鸡腿堡2 小时前
Java的代码块介绍与快速入门
java·开发语言