JavaFX布局(一) - 日理万妓 2022-05-10 08:38 358阅读 0赞 说道GUI编程一定要谈到布局,JavaFX内置了大量的布局控件提供给我们使用。其实,JavaFX的布局控件和界面元素控件都是继承自javafx.scene.layout.Region类。我们这里只看布局控件类。布局控件我们在界面上一般是看不到的,它一个容器用于放置其它可视的界面元素控件。(JavaFX在线API文档:[JavaFX8 API Online][]) JavaFX布局控件的类图如下: ![布局类][20151205105322170] 下面简单说说一些常用控件类的用法。这里我们使用SceneBuilder进行界面的设计,SceneBuilder可以在[Gluon][]下载。SceneBuilder的界面如下,我们可以简单使用拖拽的方法进行界面设计。 ![SceneBuilder][] ## 1. Pane ## Pane是其它布局控件类的父类,我们可以将Pane看成一个绝对布局控件,当我们将某个控件放置在Pane当中的时候,我们需要指定它的位置坐标(layoutX和layoutY)。当我们将一个控件拖拽到Pane中的时候,会自动生成layoutX和layoutY坐标。如图是使用Pane为父容器设计的一个简单界面: ![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][BorderPane 1] 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][GridPane 1] 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][SceneBuilder 1] 比如我们在左上角和右下角放置两个Button,如图: ![AnchorPane][] 当我们调整窗体的大小的时候,锚定位置是不会变的。 ![AnchorPane][AnchorPane 1] 生成的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了解对应类的一些属性和方法。 \--------------------- 本文来自 TheOneGIS 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/theonegis/article/details/50184811?utm\_source=copy ## 欢迎关注公众号: ## # ![70][] # [JavaFX8 API Online]: http://docs.oracle.com/javase/8/javafx/api/toc.htm [20151205105322170]: /images/20220510/9f821eb40b8348fba68da0b31cd46c8f.png [Gluon]: http://gluonhq.com/open-source/scene-builder/ [SceneBuilder]: /images/20220510/c7c1c3a4c1364b0f9f1df072bb32733e.png [Pane]: /images/20220510/ed188e69d0814b4992bc9a29cb304d5f.png [BorderPane]: /images/20220510/abdeb919a4564988acbd6f5adff6a4f0.png [BorderPane 1]: /images/20220510/9234b1147d8047ea888821019e068c49.png [HBox]: /images/20220510/0ae25b3b7be946698ac6c468984fb616.png [VBox]: /images/20220510/2cb6eb567580463fac45053d336ca5c3.png [FlowPane]: /images/20220510/10dfd64dbfd34097abef8444889a2a51.png [GridPane]: /images/20220510/f5cbfa44bb264dde9a92ca3e4078353b.png [GridPane 1]: /images/20220510/027a2e5465bd413f8b4de8803f412b7e.png [SceneBuilder 1]: /images/20220510/44722b1d5f91466aa200ef1876bb59fc.png [AnchorPane]: /images/20220510/a8ef7d92a32946088da9a07dd30815a6.png [AnchorPane 1]: /images/20220510/c01f7abc5bdd4545ac4583a9ab52331b.png [ScrollPane]: /images/20220510/651d9ceb793d41cea38bb5798c8a3a11.png [70]: /images/20220510/f191677f0c9a4c84ba18b68972daa73a.png
相关 使用javafx创建UI时的布局管理问题 在JavaFX中,创建UI并管理布局主要涉及到以下几个方面的问题: 1. **容器和布局**:JavaFX提供了多种容器(如AnchorPane、StackPane等)以及对 今天药忘吃喽~/ 2024年09月11日 01:27/ 0 赞/ 19 阅读
相关 JavaFX组件布局问题:经典案例解析 JavaFX,作为Java平台的一部分,提供了丰富的图形用户界面组件。在组件布局方面,我们常常遇到各种问题。下面,我将通过一个经典案例来解析这些常见问题及解决方案。 案例描述 客官°小女子只卖身不卖艺/ 2024年09月06日 04:42/ 0 赞/ 14 阅读
相关 JavaFX几种典型的布局策略 为了构造我们所需要的程序界面,我们会使用JavaFX提供的丰富的控件来实现这一目标。但是如何摆放这些控件的位置是一个重要的问题,JavaFX提供了一种特殊的控件,即面板Pane 系统管理员/ 2024年02月25日 05:46/ 0 赞/ 11 阅读
相关 使用JavaFX新布局组件实现复杂用户界面 JavaFX是Java平台上用于构建富客户端应用程序的图形界面工具包。它提供了一套丰富的布局组件,用于创建用户界面的各种元素和控件。在本文中,我们将介绍如何使用JavaFX的新 痛定思痛。/ 2024年02月21日 09:16/ 0 赞/ 12 阅读
相关 JavaFx基础学习【五】:FXML布局文件使用 目录 前言 一、介绍 二、简单体验 三、FXML标签元素 四、fx属性介绍 五、重写initialize(名字需要保持一致)方法 六、Scene Builder快 £神魔★判官ぃ/ 2023年10月14日 18:55/ 0 赞/ 16 阅读
相关 JavaFX入门(四):JavaFX布局(一) 说道GUI编程一定要谈到布局,JavaFX内置了大量的布局控件提供给我们使用。其实,JavaFX的布局控件和界面元素控件都是继承自javafx.scene.layout.Reg 淩亂°似流年/ 2022年08月18日 02:17/ 0 赞/ 341 阅读
相关 JavaFX入门(一):我的第一个JavaFX程序 JavaFX简介 JavaFX是一个强大的图形和多媒体处理工具包集合,它允许开发者来设计、创建、测试、调试和部署富客户端程序,并且和Java一样跨平台。 JavaFX Dear 丶/ 2022年08月17日 15:17/ 0 赞/ 153 阅读
相关 JavaFX布局(一) 说道GUI编程一定要谈到布局,JavaFX内置了大量的布局控件提供给我们使用。其实,JavaFX的布局控件和界面元素控件都是继承自javafx.scene.layout.Reg - 日理万妓/ 2022年05月10日 08:38/ 0 赞/ 359 阅读
相关 JavaFX学习之道:布局面板之 HBox HBox 布局面板可以很方便的让所有控件都排列成一行。 可以通过设置 padding 属性来设置控件与 HBox 边缘之间的距离。可以通过设置 spacing 属性 偏执的太偏执、/ 2021年09月10日 09:10/ 0 赞/ 1511 阅读
还没有评论,来说两句吧...