JavaFX 2.0布局窗格– GridPane

毫无疑问, GridPane是JavaFX 2.0中功能最强大,最灵活的布局窗格。
它在由行和列组成的灵活网格中布置其子项,与Swing的GridBagLayout或HTML的表格模型非常相似。 这种方法使该窗格非常适合于任何形式的表单(例如网站上的联系表单)。

您有能力...

  • 将任何Node应用于GridPane的单元格(由列和行指定)
  • Node跨越多个列/行
  • 使Node在其所应用于的单元格中对齐
  • Node设置水平或垂直增长
  • 并保留要保留在单元中Node周围的边距。

GridPane的灵活性也扩展到了非常灵活的API。 您可以使用诸如setColumnIndex(node, index)setRowSpan(node, value)类的静态类方法,也可以使用诸如gridpane.add(node, column, row, columnSpan, rowSpan)类的便捷实例方法。

注意:

  • GridPane的最大列数或行数,因为它会自动增长。
  • 一列的大小由该列中最宽的Node自动确定,每行的高度由该行中的最高Node确定。

最后一点可能是有关GridPane的最重要的事实,因为必须考虑每个单个Node的列/行和列跨度/行跨度,才能获得所需的布局。
对于更复杂的布局,最好在一张纸上绘制布局,并为列和行绘制所有线条。 这将简化开发,因为您可以直接查看每个Node必须放置在哪个单元格中以及它们必须跨越多少行或列。

让我们看一下第一个简单的例子:

GridPane –示例1

import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;/*** Created on: 23.06.2012* @author Sebastian Damm*/
public class GridPaneExample extends Application
{@Overridepublic void start(Stage primaryStage) throws Exception{GridPane gridPane = new GridPane();gridPane.setPadding(new Insets(40, 0, 0, 50));gridPane.setHgap(5); gridPane.setVgap(5);Scene scene = new Scene(gridPane, 300, 150);Label lbUser = new Label('Username:');GridPane.setHalignment(lbUser, HPos.RIGHT);TextField tfUser = new TextField();Label lbPass = new Label('Password:');GridPane.setHalignment(lbPass, HPos.RIGHT);PasswordField tfPass = new PasswordField();Button btLogin = new Button('Login');GridPane.setMargin(btLogin, new Insets(10, 0, 0, 0));gridPane.add(lbUser, 0, 0);gridPane.add(tfUser, 1, 0);gridPane.add(lbPass, 0, 1);gridPane.add(tfPass, 1, 1);gridPane.add(btLogin, 1, 2);primaryStage.setTitle('GridPaneExample 1');primaryStage.setScene(scene);primaryStage.show();}public static void main(String[] args){   Application.launch(args);   }
}

在这里,您可以看到一个小的登录表单,其中包含两个标签和两个用于用户名和密码的文本字段。 此外,还有一个“登录”按钮。
在第21-23行中,我们创建GridPane并应用一些填充。 此外,您可以指定每个Node之间要保留的水平和垂直间隙。 接下来,看一下第28行:可以使用静态类方法GridPane.setHalignment(Node node, HPos pos)分别设置GridPane.setValignment(Node node, VPos pos) GridPane.setHalignment(Node node, HPos pos)来设置Node在其放入的单元格边界内的对齐方式。 GridPane.setValignment(Node node, VPos pos) 。 在第36行中,您可以看到如何通过使用GridPane.setMargin(Node node, Insets insets)方法在单个Node周围放置单个边距。 最后,在线路38至42,我们每个添加NodeGridPane并指定列和排Node

您的应用程序现在应如下所示:

在下一个示例中,您将看到为什么我们需要在更复杂的布局中设置每个Node的列跨度和行跨度。 看一下这段代码:

GridPane –示例2:用户表单

import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TextArea;
import javafx.scene.control.TextField;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.scene.paint.Paint;
import javafx.scene.paint.RadialGradientBuilder;
import javafx.scene.paint.Stop;
import javafx.stage.Stage;/*** Created on: 23.06.2012* @author Sebastian Damm*/
public class GridPaneExample2 extends Application
{private final Paint background = RadialGradientBuilder.create().stops(new Stop(0d, Color.TURQUOISE), new Stop(1, Color.web('3A5998'))).centerX(0.5d).centerY(0.5d).build();private final String LABEL_STYLE = '-fx-text-fill: white; -fx-font-size: 14;'+ '-fx-effect: dropshadow(one-pass-box, black, 5, 0, 1, 1);';@Overridepublic void start(Stage primaryStage) throws Exception{Scene scene = new Scene(createGridPane(), 370, 250, background);primaryStage.setTitle('GridPaneExample 2 - User form');primaryStage.setScene(scene);primaryStage.show();}private GridPane createGridPane(){GridPane gridPane = new GridPane();gridPane.setPadding(new Insets(20, 0, 20, 20));gridPane.setHgap(7); gridPane.setVgap(7);Label lbFirstName = new Label('First Name:');lbFirstName.setStyle(LABEL_STYLE);GridPane.setHalignment(lbFirstName, HPos.RIGHT);TextField tfFirstName = new TextField();Label lbLastName = new Label('Last Name:');lbLastName.setStyle(LABEL_STYLE);GridPane.setHalignment(lbLastName, HPos.RIGHT);TextField tfLastName = new TextField();Label lbCity = new Label('City:');lbCity.setStyle(LABEL_STYLE);GridPane.setHalignment(lbCity, HPos.RIGHT);TextField tfCity = new TextField();Label lbStreetNr = new Label('Street/Nr.:');lbStreetNr.setStyle(LABEL_STYLE);GridPane.setHalignment(lbStreetNr, HPos.RIGHT);TextField tfStreet = new TextField();tfStreet.setPrefColumnCount(14);GridPane.setColumnSpan(tfStreet, 2);TextField tfNumber = new TextField();tfNumber.setPrefColumnCount(3);Label lbNotes = new Label('Notes:');lbNotes.setStyle(LABEL_STYLE);GridPane.setHalignment(lbNotes, HPos.RIGHT);TextArea taNotes = new TextArea();taNotes.setPrefColumnCount(5);taNotes.setPrefRowCount(5);GridPane.setColumnSpan(taNotes, 3);GridPane.setRowSpan(taNotes, 2);    ImageView imageView = new ImageView(new Image(getClass().getResourceAsStream('person.png'), 0, 65, true, true));GridPane.setHalignment(imageView, HPos.LEFT);GridPane.setColumnSpan(imageView, 2);GridPane.setRowSpan(imageView, 3);//        gridPane.setGridLinesVisible(true);gridPane.add(lbFirstName, 0, 0); gridPane.add(tfFirstName, 1, 0);gridPane.add(imageView, 2, 0); gridPane.add(lbLastName, 0, 1);gridPane.add(tfLastName, 1, 1); gridPane.add(lbCity, 0, 2);gridPane.add(tfCity, 1, 2); gridPane.add(lbStreetNr, 0, 3);gridPane.add(tfStreet, 1, 3); gridPane.add(tfNumber, 3, 3);gridPane.add(lbNotes, 0, 4); gridPane.add(taNotes, 1, 4);return gridPane;}public static void main(String[] args){   Application.launch(args);   }
}

在此示例中,我们创建具有不同输入和图像的用户表单。 为了使应用程序看起来更好,我为Scene的背景创建了RadialGradient ,并为每个标签应用了白色字体颜色和一些阴影。

该应用程序应如下所示:

与前面的示例相比,第一个差异发生在第64行。
使用GridPane.setColumnSpan(tfStreet, 2); 我告诉这个TextField占据两列。 这是必需的,因为我希望此文本字段比其他文本字段宽一点(请参见第63行)。 否则,第二列将与该文本字段一样宽,因此将较小的文本字段拉伸。 TextArea (从第71行开始)和ImageView (从77行开始)跨越多个列和行。 接下来,看一下第83行。如果删除注释行并启动应用程序,则它应如下所示:

如您所见,此方法使所有网格线(包括每个Node之间的水平和垂直间隙)可见,如果您的Nodes没有按照您希望的方式对齐,这将是一个很大的帮助。
我不知道在学习Swing和GridBagLayout过程中我希望有多少次这样的方法,我敢打赌我不是唯一的一个;)

最后,请删除所有指定了列跨度或行跨度的行(第64、74、75、80、81行)。 这将帮助您了解列跨度和行跨度的必要性。

您会看到,每个Node占用一个单元格,并且布局非常混乱,因为每列/行的宽度/高度取决于最宽/最高的子Node

GridPane –示例3:setConstraints方法

实例方法add '提供了两种版本,一种具有Node ,列和行,一种具有附加的列跨度和行跨度。 如前两个示例中一样,必须使用专用的类方法(例如GridPane.setHalignment来设置其他属性(如对齐或增长)。

但是还有另一种不错的方法: GridPane.setConstraints(...)方法。 目前(JavaFX 2.2) setConstraints(Node child, int columnIndex, int rowIndex)有五个此方法的重载版本setConstraints(Node child, int columnIndex, int rowIndex)

设置setConstraints(Node child, int columnIndex, int rowIndex, int columnspan, int rowspan, HPos halignment, VPos valignment, Priority hgrow, Priority vgrow, Insets margin)

这与Swing的GridBagConstraints非常相似,但是在这里您不必创建专用对象并将其重用于多个图形对象。

如果将约束应用于这样的每个Node ,则只需将Nodes添加到GridPane´s的子GridPane´s集合中即可。

使用这种方法,第二个示例的代码如下所示:

private GridPane createGrid(){GridPane gridPane = new GridPane();gridPane.setPadding(new Insets(20, 0, 20, 20));gridPane.setHgap(7); gridPane.setVgap(7);Label lbFirstName = new Label('First Name:');lbFirstName.setStyle(LABEL_STYLE);GridPane.setConstraints(lbFirstName, 0, 0, 1, 1, HPos.RIGHT, VPos.CENTER);TextField tfFirstName = new TextField();GridPane.setConstraints(tfFirstName, 1, 0);Label lbLastName = new Label('Last Name:');lbLastName.setStyle(LABEL_STYLE);GridPane.setConstraints(lbLastName, 0, 1, 1, 1, HPos.RIGHT, VPos.CENTER);TextField tfLastName = new TextField();GridPane.setConstraints(tfLastName, 1, 1);Label lbCity = new Label('City:');lbCity.setStyle(LABEL_STYLE);GridPane.setConstraints(lbCity, 0, 2, 1, 1, HPos.RIGHT, VPos.CENTER);TextField tfCity = new TextField();GridPane.setConstraints(tfCity, 1, 2);Label lbStreetNr = new Label('Street/Nr.:');lbStreetNr.setStyle(LABEL_STYLE);GridPane.setConstraints(lbStreetNr, 0, 3, 1, 1, HPos.RIGHT, VPos.CENTER);TextField tfStreet = new TextField();tfStreet.setPrefColumnCount(14);GridPane.setConstraints(tfStreet, 1, 3, 2, 1);TextField tfNumber = new TextField();tfNumber.setPrefColumnCount(3);GridPane.setConstraints(tfNumber, 3, 3);Label lbNotes = new Label('Notes:');lbNotes.setStyle(LABEL_STYLE);GridPane.setConstraints(lbNotes, 0, 4, 1, 1, HPos.RIGHT, VPos.CENTER);TextArea taNotes = new TextArea();taNotes.setPrefColumnCount(5);taNotes.setPrefRowCount(5);GridPane.setConstraints(taNotes, 1, 4, 3, 2);ImageView imageView = new ImageView(new Image(getClass().getResourceAsStream('person.png'), 0, 65, true, true));GridPane.setConstraints(imageView, 2, 0, 3, 3, HPos.LEFT, VPos.CENTER);gridPane.getChildren().addAll(lbFirstName, tfFirstName, imageView, lbLastName, tfLastName, lbCity, tfCity, lbStreetNr, tfStreet, tfNumber, lbNotes, taNotes);return gridPane;}

您可以在第51-53行看到重载的setConstraints(...)方法的用法,以及如何将Nodes简单地添加到GridPane

我希望我能对JavaFX 2.0中的GridPane进行很好的介绍。 随时添加评论和发表问题。

参考: JavaFX 2.0布局窗格–来自我们JCG合作伙伴 Sebastian Damm的GridPane ,在Java博客上的Just my 2 cents上。


翻译自: https://www.javacodegeeks.com/2012/07/javafx-20-layout-panes-gridpane.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/372172.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leecode 题解 || Merge k Sorted Lists 问题

problem: Merge k sorted linked lists and return it as one sorted list.Analyze and describe its complexity.Tags Divide and Conquer Linked List Heap合并K个已序单链表 thinking: (1)题目没有要求不能够新开ListNode,所以…

PHP在浏览器中被拒绝请求,php控制请求页面浏览器缓

缓存的主要作用是防止用户频繁刷新网站页面,导致服务器数据库负担,既要保证信息更新的及时性,也要保证缓存能被充分利用。http协议里控制浏览器缓存的头有三个Cache-Control,Expires,Last-Modified,在PHP下…

js -03课 -03 js中的真假判断

真假的问题:数据类型-数字(NaN)、字符串、布尔、函数、对象(elem、[]、{}、null)、未定义真:非0的数字、非空字符串、true、函数、能找到的元素、[]、{}假:0、NaN、空字符串、false、不能找到的…

HBASE启动失败,Failed construction of Master: class org.apache.hadoop.hbase.master.HMaster

Master日志错误:2015-12-02 06:34:32,394 ERROR [main] master.HMasterCommandLine: Master exitingjava.lang.RuntimeException: Failed construction of Master: class org.apache.hadoop.hbase.master.HMasterat org.apache.hadoop.hbase.master.HMaster.constru…

Java线程:我应该创建几个

介绍 “我应该创建多少个线程?”。 许多年前,我的一个朋友问我这个问题,然后我按照“ CPU核心数 1”的指示给了他答案。 当您在这里阅读时,大多数人都在点头。 不幸的是,我们所有人当时都错了。 现在,如果您…

java ui自动化测试脚本,如何用Airtest编写UI自动化脚本(示例代码)

前言游戏并不像app一样直接把渲染树节点暴露出来,这就造成游戏UI自动化在元素定位上的不方便性,不过依赖airtest的图片识别,我们可以直接跳过元素检查,以图片对比的形式进行自动化,虽然效率可能会低一些,但…

Spring JDBC数据库连接池设置

对于任何Java应用程序而言, 在Spring框架中设置JDBC数据库连接池都是很容易的,仅需更改spring配置文件中的一些配置即可。使用Apache Commons DBCP和Commons Pool以及Spring框架的连接池是不错的选择,但是如果您拥有Web服务器和托管的J2EE容器…

BZOJ 3505 [Cqoi2014]数三角形(组合数学)

【题目链接】 http://www.lydsy.com/JudgeOnline/problem.php?id3505 【题目大意】 给定一个nxm的网格,请计算三点都在格点上的三角形共有多少个。   注意三角形的三点不能共线。 【题解】 我们计算三个点组合的情况,去除横竖三共线,以及斜…

matlab多项式加法运算,matlab多项式运算与代数方程求解解析.ppt

* 多项式运算与代数方程求解 数学软件 Matlab Matlab基础及应用 * 多项式转化为符号表达式:poly2sym 四则运算:conv、deconv 导数与积分:ployder、polyint 求值与零点:polyval、polyvalm、roots、poly 多项式运算 主要内容 代数方…

java.lang.NoClassDefFoundError:如何解决–第3部分

本文是我们的NoClassDefFoundError故障排除系列的第3部分。 正如我在第一篇文章中提到的那样,有许多可能导致NoClassDefFoundError的问题。 本文将重点介绍该问题的最常见原因之一:Java类静态初始化程序块或变量的失败。 将提供一个示例Java程序&#xf…

django实现瀑布流、组合搜索、阶梯评论、验证码

django实现图片瀑布流布局 我们在一些图片网站上经常会看到,满屏都是图片,而且图片都大小不一,却可以按空间排列。默认一个div是占用一行,当想把div里的图片并排显示的时候,只能使用float属性,但是&#xf…

通过ifrmae异步下载文档

//通过ifrmae异步下载文档 function iframeGetFile(opts) {var defaultOpts {filePath: ,onload: function (e) { }}, iframeFile;$.extend(defaultOpts, opts);iframeFile document.createElement("iframe");iframeFile.onload function (e) {defaultOpts.onload…

IO与NIO –中断,超时和缓冲区

假设有一个系统有时需要将文件复制到几个位置,但是这种方式在响应速度至关重要的情况下。 换句话说,如果由于某种原因文件系统过载,并且我们无法在不到一秒钟的时间内写入文件,则应该放弃。 ExecutorService是一项非常方便的工作工…

实验5 matlab程序设计2,实验5 Matlab程序设计2

实验5 Matlab程序设计21. 实验目的:2. 掌握建立和执行M文件的方法; 3. 掌握实现选择结构的方法; 4. 掌握实现循环结构的方法。5. 熟悉利用向量运算来代替循环操作的方法。 6. 实验内容:27. 根据61111 122232n2,求π的近…

【poj1041】 John's trip

http://poj.org/problem?id1041 (题目链接) 题意 给出一张无向图,求字典序最小欧拉回路。 Solution 这鬼畜的输入是什么心态啊mdzz,这里用vector储存边,便于边的排序。瞬间变成STL常数boy →_→。 细节 数组大小把握好。 代码 // poj1041 #i…

记一次ora-1652错误的解决过程

报错现象: 通过v$RMAN_BACKUP_JOB_DETAILS查看备份状态,一直卡着不出结果,很长一段时间之后抛出ORA-1652: unable to extend temp segment by 128 in tablespace ,此时查看临时表空间使用情况,发现占用很少&#xff0c…

带有docx4j的Java Word(.docx)文档

几个月前,我需要创建一个包含许多表和段落的动态Word文档。 过去,我曾使用POI来实现此目的,但是我发现它很难使用,并且在创建更复杂的文档时对我来说效果不佳。 因此,对于这个项目,经过一番搜索&#xff0c…

mysql中distinct关键字,MySQL关键字Distinct的详细介绍

DDLPrepare SQL:?Prepare Data:?查询数据如下图所示:第一种情况,使用Distinct关键字,查询单列数据,如下图所示:结果:对 name 字段进行去重处理,符合预期期望&#xff0…

#pragma 预处理指令

Linux C 编程一站式学习 #pragma 预处理指示供编译器实现一些非标准的特性,C 标准没有规定 #pragma 后面应该写什么以及起什么作用,由编译器自己规定。有的编译器用 #pragma 定义一些特殊功能寄存器名,有的编译器用 #pragma 定位链接地址&…

px ,em ,rem

做移动端或者响应式的页面必然需要字体的变化的。这次我就自己的经验来说说他们之间的关系,以及怎么用。 px (绝对单位)是我们常用的就不说了。 em(相对单位,相对父级) em 指字体高,任意浏览器的默认字体高都是16px。所…