Java开发笔记（一百四十五）FXML布局的伸展适配

朱雀 2024-04-17 20:10 54阅读 0赞

前面介绍了FXML的基本格式及其控制器的用法，算是打通了FXML方式的编码流程。程序界面通常保持固定尺寸，不过有时也允许用户拖曳窗口大小，不拖不打紧，一拖就可能坏事。像之前的登录窗口，没拖的时候界面如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpbmxhbnR1_size_16_color_FFFFFF_t_70]  
现在开始慢慢把窗口拖长，拖到一半停下来，此时登录界面如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpbmxhbnR1_size_16_color_FFFFFF_t_70 1]  
乍看过去，界面上的各控件大小保持不变，且始终居中显示，没发现什么问题。可是继续拖长窗口，突然之间这些控件乾坤大挪移，用户名区域顶到了第一行，登录按钮跟着顶到了第二行，变化后的界面效果如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpbmxhbnR1_size_16_color_FFFFFF_t_70 2]  
之所以出现控件排版错乱的问题，是因为该界面的根节点采用了流式窗格FlowPane。所谓流式，指的是从左到右排列，倘若没排满一行，就跟在当前行后面；只有排满了一行，才会另起一行继续排。刚刚拖拉窗口的时候，拖得太长了，导致窗口的宽度能够容纳登录类型与用户名两个区域，结果两块区域便挤到同一行了。显然这不是期望的界面布局，至少控件要老老实实呆在自己的位置，不可越雷池一步。  
若想避免流式窗格排版飘忽的问题，可以使用垂直箱子VBox替换流式窗格，垂直箱子规定它的每个直接下级都占用一行，绝对不会产生两个直接下级挤在同一行的现象。于是修改原来的fxml文件，把根节点FlowPane换成VBox，对应的xml标签变为以下格式：

fxml文件修改完毕，重新运行测试程序，弹出的登录窗口如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpbmxhbnR1_size_16_color_FFFFFF_t_70 3]  
现在不管怎样拉长窗口，各区域都留在当前行，再也不会乱跑了。然而采用VBox的界面很不协调，缘由在于VBox不支持hgap与vgap属性，因此各控件之间没能自动分隔开，几乎都粘在一起了，例如：  
1、登录类型、用户名、密码三块区域的左侧直接顶到了窗口边缘；  
2、用户名输入框、密码输入框、登录按钮三个自上往下紧紧贴着，不留一丝空隙；  
似此过于紧凑的界面，令人感觉颇为拘谨，还是留个适当的间隔比较好。虽然VBox不支持hgap与vgap属性，但它另外提供了padding属性组，允许分别指定上、下、左、右四个方向的间距。padding节点挂在哪个VBox或HBox之下，就表示哪个箱子会在内部自动留白，padding对应的xml标签具体写法如下所示：

上述的padding节点例子，定义了在上、下、左、右四个方向各留出10个像素的空白间距。考虑到VBox和HBox下面可能挂着好几个子控件，为了更好地将这些子控件跟padding区分开，fxml又给VBox和HBox引入了children子节点，凡是下级控件统统放到children节点之下，而padding节点专门放置四个方向的间隔距离。如此一来，形态完整的VBox节点结构变成了以下这般：

由上面的xml样例可以看到，改进之后的VBox标签变得层次分明、结构清晰，大大增强了它的可读性。  
除此之外，fxml还为VBox和HBox提供了自动伸展功能，也就是说，随着窗口尺寸的增大，VBox和HBox的宽高也会随之增大。其中水平方向的宽度自适应，由属性HBox.hgrow控制，其值为ALWAYS时表示当前箱子的宽度跟随上级变化；垂直方向的宽度自适应则由属性VBox.vgrow控制，其值为ALWAYS时表示当前箱子的高度跟随上级变化。尤其需要注意的是，除了VBox和HBox这两个箱子支持自动伸展以外，只有几个输入框控件支持自动伸展，其中TextField与PasswordField只支持水平方向上的自动伸展，而TextArea同时支持水平与垂直两个方向的自动伸展。  
利用fxml的几个新节点和新属性改造原先的登录界面，一方面，整个登录界面在窗口四周边缘均留白，各行之间也留出一条缝隙；另一方面，令用户名输入框和密码输入框支持水平伸展，令用户名区域和密码区域支持垂直伸展。这么改造一番之后的fxml文件示例如下：

再次运行测试程序，弹出的登录窗口如下图所示，果然各级控件与周边都隔了一小段距离。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpbmxhbnR1_size_16_color_FFFFFF_t_70 4]  
接着在水平方向拉长窗口，拉长之后的窗口界面如下面左图所示。回到初始尺寸，在垂直方向拉高窗口，拉高之后的如下面右图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpbmxhbnR1_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpbmxhbnR1_size_16_color_FFFFFF_t_70 6]  
从上面两张效果图可见，几个箱子和输入框的宽高确实跟随窗口尺寸的变化而变化。

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpbmxhbnR1_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c3bb173421144ec986cb1f89a2b068ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpbmxhbnR1_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/13d1195b291a420893897217f1fb6cb8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpbmxhbnR1_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/b49055c6e4604102a2a3a792ac792995.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpbmxhbnR1_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/30c5c6ebf3e9479ba36b86df17e53eab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpbmxhbnR1_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/92c575ab17784219952b75fcbd0b0811.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpbmxhbnR1_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a69c460af9f34fbe8fa83a07f0e6a25f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpbmxhbnR1_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/6d805a867960416ba57bb5e6ab7a52ca.png
[Java]: https://blog.csdn.net/pinlantu/article/details/83957672