JavaFX入门(四):JavaFX布局(一)

JavaFX 专栏收录该内容
6 篇文章 6 订阅

说道GUI编程一定要谈到布局,JavaFX内置了大量的布局控件提供给我们使用。其实,JavaFX的布局控件和界面元素控件都是继承自javafx.scene.layout.Region类。我们这里只看布局控件类。布局控件我们在界面上一般是看不到的,它一个容器用于放置其它可视的界面元素控件。(JavaFX在线API文档:JavaFX8 API Online
JavaFX布局控件的类图如下:
布局类

下面简单说说一些常用控件类的用法。这里我们使用SceneBuilder进行界面的设计,SceneBuilder可以在Gluon下载。SceneBuilder的界面如下,我们可以简单使用拖拽的方法进行界面设计。
SceneBuilder

1. Pane

Pane是其它布局控件类的父类,我们可以将Pane看成一个绝对布局控件,当我们将某个控件放置在Pane当中的时候,我们需要指定它的位置坐标(layoutX和layoutY)。当我们将一个控件拖拽到Pane中的时候,会自动生成layoutX和layoutY坐标。如图是使用Pane为父容器设计的一个简单界面:
Pane类
FXML代码如下:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>


<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="350.0" prefWidth="500.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button layoutX="318.0" layoutY="210.0" mnemonicParsing="false" text="登录" />
      <Label layoutX="136.0" layoutY="104.0" text="用户名:" />
      <Label layoutX="136.0" layoutY="162.0" text="密 码:" />
      <TextField layoutX="212.0" layoutY="100.0" />
      <PasswordField layoutX="212.0" layoutY="158.0" />
   </children>
</Pane>

2. BorderPane

BorderPane将界面分割上上下左右中5部分,我们可以将控件放置在其中。常见的一个用例场景就是,软件主界面的上面是菜单栏和工具条,左边和右边可能是文档或者内容列表或者常用的工具集合,然后中间是主要内容显示区,下面是状态栏。
在SceneBuilder中我们将一个控件拖拽到BorderPane的时候,会有上下左右中的区域显示。
BorderPane
我们在这5个区域放置5个标签,如下图:
BorderPane
FXML代码如下:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>


<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <top>
      <Label style="-fx-font-family: Arial; -fx-font-size: 20px;" text="上" BorderPane.alignment="CENTER" />
   </top>
   <left>
      <Label style="-fx-font-family: Arial; -fx-font-size: 20px;" text="左" BorderPane.alignment="CENTER" />
   </left>
   <right>
      <Label style="-fx-font-family: Arial; -fx-font-size: 20px;" text="右" BorderPane.alignment="CENTER" />
   </right>
   <center>
      <Label style="-fx-font-family: Arial; -fx-font-size: 20px;" text="中" BorderPane.alignment="CENTER" />
   </center>
   <bottom>
      <Label style="-fx-font-family: Arial; -fx-font-size: 20px;" text="下" BorderPane.alignment="CENTER" />
   </bottom>
</BorderPane>

该FXML代码中我们设置了字体,让显示更大一些。在后面我们将使用CSS样式进行字体颜色等样式的设置。

3. HBox

HBox可以水平排列控件,不换行。如图:
HBox
FXML代码如下:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>


<HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="50.0" prefWidth="500.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Button1" />
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Button2" />
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Button3" />
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Button4" />
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Button5" />
   </children>
</HBox>

4. VBox

VBox类似的,垂直排列控件,不换列。如图:
VBox
FXML代码如下:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>


<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="300.0" prefWidth="200.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Button1" />
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Button2" />
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Button3" />
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Button4" />
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Button5" />
   </children>
</VBox>

5. FlowPane

FlowPane感觉像HBox和VBox的综合体,FlowPane可以设置一个方向水平或者垂直。默认方向为水平,那么放入FlowPane中的控件会先水平排列,如果第一行满了以后进入下一行继续水平排列。垂直方向类似的,先垂直排列,如果第一列满了以后进入第二列继续垂直排列。如图:
FlowPane
可以看到水平方向上满了以后,进入到下一行排列。
FXML代码如下:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>


<FlowPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="400.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button mnemonicParsing="false" prefHeight="149.0" prefWidth="55.0" text="Button" />
      <Button mnemonicParsing="false" text="Button" />
      <Button mnemonicParsing="false" prefHeight="125.0" prefWidth="100.0" text="Button" />
      <Button mnemonicParsing="false" prefHeight="71.0" prefWidth="55.0" text="Button" />
      <Button mnemonicParsing="false" prefHeight="97.0" prefWidth="102.0" text="Button" />
      <Button mnemonicParsing="false" prefHeight="112.0" prefWidth="213.0" text="Button" />
      <Button mnemonicParsing="false" prefHeight="52.0" prefWidth="104.0" text="Button" />
   </children>
</FlowPane>

6. GridPane

GridPane有点像HTML中的Table布局,属于比较灵活的布局方式。默认情况下,控件均匀分布在Grid或者说Table中。但是我们可以指定一个控件所占的行列,让其跨行和列分布。当我们将一个元素拖拽到GridPane中的时候可以看到SceneBuilder为我们虚拟除了行和列的分割线:
GridPane
最后设计的界面如图所示:
GridPane
FXML代码如下:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>

<GridPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
  <columnConstraints>
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
  </columnConstraints>
  <rowConstraints>
    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
  </rowConstraints>
   <children>
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="80.0" text="Button" />
      <Button mnemonicParsing="false" prefHeight="180.0" prefWidth="55.0" text="Button" GridPane.columnIndex="1" GridPane.rowSpan="2" />
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="80.0" text="Button" GridPane.rowIndex="1" />
      <Button mnemonicParsing="false" prefHeight="50.0" prefWidth="521.0" text="Button" GridPane.columnSpan="2" GridPane.rowIndex="2" />
   </children>
</GridPane>

7. AnchorPane

AnchorPane可以设置一个控件的Anchor位置,感觉NET的GUI控件中最早提供这种控件的。比如说我们要将一个Button放置在左下角,离右边100px,离下边100px的位置,我们便可以使用AnchorPane控件。当窗口放大缩小的时候,该Button始终在左下角离右边100px,离下边100px的位置。通俗地说,AnchorPane可以将控件锚定到布局面板的某个位置。
在SceneBuilder中我们可以很容易在右边的属性面板中设置锚定的方位和距离:
SceneBuilder
比如我们在左上角和右下角放置两个Button,如图:
AnchorPane
当我们调整窗体的大小的时候,锚定位置是不会变的。
AnchorPane
生成的FXML代码如下:

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>


<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button layoutX="174.0" layoutY="177.0" mnemonicParsing="false" text="右下" AnchorPane.bottomAnchor="100.0" AnchorPane.rightAnchor="100.0" />
      <Button layoutX="106.0" layoutY="63.0" mnemonicParsing="false" text="左上" AnchorPane.leftAnchor="100.0" AnchorPane.topAnchor="100.0" />
   </children>
</AnchorPane>

8. ScrollPane

ScrollPane顾名思义就是可以显示滚动条的容器控件了。
我们在ScrollPane中放置一个TextArea文本域控件,并且设置TextArea的大小大于ScrollPane的大小,这样就可以显示出水平和垂直滚动条了。如下图:
ScrollPane
FXML代码如下:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.web.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>


<ScrollPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="400.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <content>
      <TextArea prefHeight="600.0" prefWidth="500.0" />
   </content>
</ScrollPane>

这一节我们说了一些常见的JavaFX布局容器或者叫布局控件,当然JavaFX还提供了很多其它的布局控件。不过使用这一节常用的布局就可以设计出常见的GUI界面了。
在我们用SceneBuilder设计界面的时候,自动生成的FXML文件中的实体元素和属性是和JavaFX中的类和属性是对应的,我们可以通过FXML了解对应类的一些属性和方法。

  • 35
    点赞
  • 4
    评论
  • 78
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
<p> <span>一、课程简介</span> </p> <p> <span>这是</span><span><span style="color:#E56600;font-size:14px;">『</span><span style="color:#E56600;font-size:14px;">Java学习指南系列</span><span style="color:#E56600;font-size:14px;"></span><span style="color:#E56600;font-size:14px;">』</span></span><span>的第19篇教程 ,是Java开发的高级课程,介绍JavaFX入门技术。</span> </p> <p> <span style="font-size:14px;">JavaFX教程分为2篇:JavaFX入门篇 , JavaFX高级篇。</span> </p> <p> <span style="font-size:14px;"></span> </p> <p> <span>二、主要内容 </span> </p> <p> <span><span style="font-size:14px;">本篇介绍JavaFX的基本技术,至少包括以下方法:</span><br /><span style="font-size:14px;">* 基本控件的使用 Label Button ImageView等</span><br /><span style="font-size:14px;">* 基本布局的使用 BorderPane, HBox, VBox等</span><br /><span>* </span><span style="font-size:14px;">常用形状的使用 Shape</span><br /><span>* </span><span style="font-size:14px;">事件处理的基本方法</span><br /><span>* </span><span style="font-size:14px;">ListView,  TreeView,  TableView, TreeTableView的基本用法</span><br /><span>* </span><span style="font-size:14px;">JavaFX CSS样式的用法</span><br /><span>* </span><span style="font-size:14px;">FXML界面和业务分离的用法等。</span><br /></span> </p> <p> <span></span> </p> <span>* 以全局实例管理为例,演示一般性的框架设计方法</span><br /><span style="font-size:14px;"></span><br /><p> <span>三、课程体系</span> </p> <p> <span>〖Java学习指南<span>系列</span>〗</span><span>:包含入门与进阶语法,Swing桌面开发,安卓开发,JavaFX开发,网络通信Socket,数据结构与算法等课程。</span> </p> <p> <span>〖网站开发<span style="color:#E56600;">系列</span>〗</span><span><span style="color:#E56600;font-size:14px;">:</span><span style="font-size:14px;">包含网页基础、网站入门、数据库、网站中级、FreeMarker、网站高级、项目应用、MyBatis、Redis等课程。</span></span> </p>
<p> <span style="font-size:14px;">一、课程简介</span><br /><span style="font-size:14px;">这是<span style="color:#E56600;">『Java学习指南系列』</span>的第20篇教程 ,是Java开发的高级课程,介绍JavaFX的高级技术。</span><br /><span style="font-size:14px;">JavaFX教程分为两篇:JavaFX入门篇,JavaFX高级篇。</span><br /><br /><span style="font-size:14px;">本篇课程的主要以实例为主,穿插必要的理论章节。以实际工程运用为背景,演示各种应用级技术的实现方式。</span> </p> <p> <span style="font-size:14px;"><br /></span><span style="font-size:14px;">二、主要内容 </span><br /><span style="font-size:14px;">本篇配备充分的实例,包含以下内容:</span><br /><span style="font-size:14px;">* 界面线程与工作线程的基本原理</span><br /><span style="font-size:14px;">* 定时任务</span><br /><span style="font-size:14px;">* 小任务,即一次性的短任务</span><br /><span style="font-size:14px;">* 进度条定制</span><br /><span style="font-size:14px;">* 对话框定制</span><br /><span style="font-size:14px;">* 滚动窗口ScrollPane的使用</span><br /><span style="font-size:14px;">* 弹出式窗口 Popup的使用方法</span><br /><span style="font-size:14px;">* 拖放技术 Drag And Drop的使用方法</span><br /><span style="font-size:14px;">* 本地程序调用</span><br /><span style="font-size:14px;">* 与网站后台的交互方法</span><br /><br /><span style="font-size:14px;">三、课程体系</span><br /><span style="font-size:14px;"><span style="color:#E56600;">〖Java学习指南系列〗</span>:包含入门与进阶语法,Swing桌面开发,安卓开发,JavaFX开发,网络通信Socket,数据结构与算法等课程。</span><br /><span style="font-size:14px;"><span style="color:#E56600;">〖网站开发系列〗</span>:包含网页基础、网站入门、数据库、网站中级、FreeMarker、网站高级、项目应用、MyBatis、Redis等课程。</span><br /><span style="font-size:14px;"></span> </p>
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页

打赏

卡尔曼和玻尔兹曼谁曼

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值