Java开发笔记（一百三十六）JavaFX的窗格

傷城~ 2021-11-02 05:44 314阅读 0赞

虽然Java自诞生之初就推出了AWT，紧接着第二版又推出升级后的Swing，打算在桌面开发这块大展拳脚；可是后来Java在服务器开发上大放异彩，在桌面开发上反而停滞不前，可谓失之J2SE收之J2EE。至于手机开发方向的J2ME，也因为安卓的异军突起而逐渐凋零，尽管安卓开发仍以Java语言为主，但谷歌公司却转去拥抱Kotlin，致使手机端的Java天下岌岌可危。为今之计，既然服务器开发的Java霸主地位牢不可撼，只能在桌面开发这边攻城略地了。不过原先的AWT与Swing实在太古老，难堪大用，唯有另搞一套桌面组件才行。JavaFX便是这些桌面组件中最优秀的一个，原本它要作为插件添加到Eclipse中，然后才能在Eclipse里面编写JavaFX程序。现在Java8的开发包集成了JavaFX，只要Eclipse指定采用Java8来编译，那么无需额外添加其它插件，Java代码即可正常调用JavaFX的内部方法，就像访问AWT与Swing那样。  
JavaFX的程序入口与Swing有所不同，它的主程序由Application类派生而来，还要重写派生类的start方法，在该方法中添加具体的界面操作代码。比如下面便是个最简单的JavaFX程序代码：

//演示简单的JavaFX程序
    //JavaFX程序的入口类继承自Application
    public class TestHello extends Application {
    
    	public static void main(String[] args) {
    		launch(args); // 启动JavaFX应用，接下来会跳到start方法
    	}
    
    	@Override
    	public void start(Stage stage) { // 应用程序开始运行
    		stage.setTitle("Hello World"); // 设置舞台的标题
    		Group group = new Group(); // 创建一个小组
    		Scene scene = new Scene(group, 400, 100, Color.WHITE); // 创建一个场景
    		stage.setScene(scene); // 设置舞台的场景
    		stage.setResizable(false); // 设置舞台的尺寸是否允许变化
    		stage.show(); // 显示舞台。相当于JFrame的setVisible(true)
    	}
    }

运行上面的测试代码，弹出如下图所示的程序界面，可见窗口左上角的标题为“Hello World”。  
![在这里插入图片描述][20190810112114186.png]  
看这界面风格，跟AWT和Swing相比没什么区别，还是原来熟悉的味道。只是控件名称都变了，例如：窗口JFrame替换为舞台Stage，面板JPanel替换为场景Scene等等。而窗口大小、窗口背景这些属性也改为由场景指定了，舞台的常用方法只剩下setTitle（设置标题）、setScene（设置场景）、setResizable（是否允许改变舞台尺寸）、show（显示舞台）这些。对于窗口右上角的叉号按钮，JavaFX默认它的单击动作会自动关闭窗口，所以无需单独设置叉号按钮的单击监听器。

除了新来的舞台和场景控件，AWT原先的布局控件也被换成了窗格控件，例如：流式布局FlowLayout替换为流式窗格FlowPane，网格布局GridLayout替换为网格窗格GridPane，边界布局BorderLayout替换为边界窗格BorderPane等等。这三种窗格，除了拥有共同的对齐方式设置方法setAlignment之外，给窗格添加内部控件的方式大相径庭，分别说明如下：  
1、若想给流式窗格FlowPane添加控件，则需先调用getChildren方法获得该窗格的节点清单对象，再调用清单对象的add方法，往节点清单中加入新的控件节点。  
2、若想给网格窗格GridPane添加控件，则直接调用窗格对象的add方法即可。  
3、若想给边界窗格BorderPane添加控件，则要调用不同的方法往五个方位添加控件，这些方法分别是：setTop方法可在窗格的上方添加控件，setBottom方法可在窗格的下方添加控件，setLeft方法可在窗格的左边添加控件，setRight方法可在窗格的右边添加控件，setCenter方法可在窗格的中间位置添加控件。  
具体到编码实现上，首先看下面的流式窗格代码片段：

// 获取采用流式窗格的场景
    private static Scene getFlowPane() {
    	FlowPane pane = new FlowPane(); // 创建一个流式窗格
    	pane.setAlignment(Pos.CENTER_LEFT); // 设置对齐方式为靠左对齐
    	// pane.setHgap(20); // 设置水平方向上的空白距离
    	// pane.setVgap(50); // 设置垂直方向上的空白距离
    	pane.getChildren().add(new Button("第一个按钮")); // 在窗格上添加一个按钮
    	pane.getChildren().add(new Button("第二个按钮")); // 在窗格上添加一个按钮
    	pane.getChildren().add(new Button("第三个按钮")); // 在窗格上添加一个按钮
    	pane.getChildren().add(new Button("第四个按钮")); // 在窗格上添加一个按钮
    	pane.getChildren().add(new Button("第五个按钮")); // 在窗格上添加一个按钮
    	Scene scene = new Scene(pane, 400, 150); // 创建一个采用流式窗格的场景
    	return scene;
    }

运行包含以上代码的JavaFX应用程序，弹出如下图所示的窗口界面，可见五个按钮仍然从左往右排列，一列塞不下了就另起一列。  
![在这里插入图片描述][20190810112132784.png]  
接着看下面的网格窗格代码片段，准备往五行单列的网格中添加五个按钮：

// 获取采用网格窗格的场景
    private static Scene getGridPane() {
    	GridPane pane = new GridPane(); // 创建一个网格窗格
    	pane.setAlignment(Pos.CENTER); // 设置对齐方式为居中对齐
    	pane.add(new Button("第一个按钮"), 1, 0); // 在窗格的第0行第1列添加一个按钮
    	pane.add(new Button("第二个按钮"), 1, 1); // 在窗格的第1行第1列添加一个按钮
    	pane.add(new Button("第三个按钮"), 1, 2); // 在窗格的第2行第1列添加一个按钮
    	pane.add(new Button("第四个按钮"), 1, 3); // 在窗格的第3行第1列添加一个按钮
    	pane.add(new Button("第五个按钮"), 1, 4); // 在窗格的第4行第1列添加一个按钮
    	Scene scene = new Scene(pane, 400, 150); // 创建一个采用网格窗格的场景
    	return scene;
    }

运行包含以上代码的JavaFX应用程序，弹出如下图所示的窗口界面，可见五个按钮从上往下排列，组成一个五行单列的网格布局。  
![在这里插入图片描述][20190810112144790.png]  
再来看下面的边界窗格代码片段，分别在上、下、左、右、中间五个位置添加按钮：

// 获取采用边界窗格的场景
    private static Scene getBorderPane() {
    	// 放在各方向上的节点，它们的默认对齐方式分别如下：
    	// 上边: Pos.TOP_LEFT，下边: Pos.BOTTOM_LEFT，左边: Pos.TOP_LEFT，右边: Pos.TOP_RIGHT，中央: Pos.CENTER
    	BorderPane pane = new BorderPane(); // 创建一个边界窗格
    	pane.setTop(new Button("上方的按钮")); // 在窗格的上方添加按钮
    	pane.setBottom(new Button("下方的按钮")); // 在窗格的下方添加按钮
    	pane.setLeft(new Button("左边的按钮")); // 在窗格的左边添加按钮
    	pane.setRight(new Button("右边的按钮")); // 在窗格的右边添加按钮
    	pane.setCenter(new Button("中间的按钮")); // 在窗格的中间位置添加按钮
    	Scene scene = new Scene(pane, 400, 150); // 创建一个采用边界窗格的场景
    	return scene;
    }

运行包含以上代码的JavaFX应用程序，弹出如下图所示的窗口界面，可见五个按钮果然散落到了指定的方位。  
![在这里插入图片描述][20190810112154460.png]

更多Java技术文章参见《[Java开发笔记（序）章节目录][Java]》

[20190810112114186.png]: /images/20211102/9e680b224e0145978176c74e9660bf68.png
[20190810112132784.png]: /images/20211102/e4cc4b8270b343f8b7896fd3283817e3.png
[20190810112144790.png]: /images/20211102/2004865b9a80416880ca52bcc7af1289.png
[20190810112154460.png]: /images/20211102/2d2425ffb41648058c2860567ead52ad.png
[Java]: https://blog.csdn.net/pinlantu/article/details/83957672