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

2019-09-04 07:15:08来源:博客园 阅读 ()

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

前面介绍了FXML的基本格式及其控制器的用法,算是打通了FXML方式的编码流程。程序界面通常保持固定尺寸,不过有时也允许用户拖曳窗口大小,不拖不打紧,一拖就可能坏事。像之前的登录窗口,没拖的时候界面如下图所示。


现在开始慢慢把窗口拖长,拖到一半停下来,此时登录界面如下图所示。


乍看过去,界面上的各控件大小保持不变,且始终居中显示,没发现什么问题。可是继续拖长窗口,突然之间这些控件乾坤大挪移,用户名区域顶到了第一行,登录按钮跟着顶到了第二行,变化后的界面效果如下图所示。


之所以出现控件排版错乱的问题,是因为该界面的根节点采用了流式窗格FlowPane。所谓流式,指的是从左到右排列,倘若没排满一行,就跟在当前行后面;只有排满了一行,才会另起一行继续排。刚刚拖拉窗口的时候,拖得太长了,导致窗口的宽度能够容纳登录类型与用户名两个区域,结果两块区域便挤到同一行了。显然这不是期望的界面布局,至少控件要老老实实呆在自己的位置,不可越雷池一步。
若想避免流式窗格排版飘忽的问题,可以使用垂直箱子VBox替换流式窗格,垂直箱子规定它的每个直接下级都占用一行,绝对不会产生两个直接下级挤在同一行的现象。于是修改原来的fxml文件,把根节点FlowPane换成VBox,对应的xml标签变为以下格式:

<VBox fx:controller="com.javafx.fxml.LoginController" xmlns:fx="http://javafx.com/fxml" alignment="center">
  <!-- 这是xml注释标记。中间省略登录窗口的各控件标签 -->
</VBox>

 

fxml文件修改完毕,重新运行测试程序,弹出的登录窗口如下图所示。


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

  <padding>
    <Insets top="10.0" bottom="10.0" left="10.0" right="10.0"/>
  </padding>

 

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

<VBox fx:controller="com.javafx.fxml.LoginController" xmlns:fx="http://javafx.com/fxml" alignment="center">
  <children>
    <!-- 这是xml注释标记。中间省略VBox的下级控件列表 -->
  </children>
  <padding>
    <Insets top="10.0" bottom="10.0" left="10.0" right="10.0"/>
  </padding>
</VBox>

 

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

<VBox fx:controller="com.javafx.fxml.LoginController" xmlns:fx="http://javafx.com/fxml" alignment="center">
  <children>
    <HBox fx:id="hbType" prefWidth="400" prefHeight="40">
      <children>
        <Label fx:id="labelType" prefWidth="120" prefHeight="40" text="登录类型:" />
        <fx:define>
            <ToggleGroup fx:id="tgType" />
        </fx:define>
        <RadioButton fx:id="rbPassword" prefWidth="140" prefHeight="40" toggleGroup="$tgType"
            text="密码登录" selected="true" />
        <RadioButton fx:id="rbVerifycode" prefWidth="140" prefHeight="40" toggleGroup="$tgType"
            text="验证码登录" />
      </children>
      <padding>
        <Insets top="0.0" bottom="10.0" left="0.0" right="0.0"/>
      </padding>
    </HBox>
    <HBox fx:id="hbUser" prefWidth="400" prefHeight="40" VBox.vgrow="ALWAYS">
      <children>
        <Label fx:id="labelUser" prefWidth="120" prefHeight="40" text="用户名:" />
        <TextField fx:id="fieldUser" prefWidth="280" prefHeight="40" HBox.hgrow="ALWAYS" />
      </children>
      <padding>
        <Insets top="0.0" bottom="10.0" left="0.0" right="0.0"/>
      </padding>
    </HBox>
    <HBox fx:id="hbPassword" prefWidth="400" prefHeight="40" VBox.vgrow="ALWAYS">
      <children>
        <Label fx:id="labelPassword" prefWidth="120" prefHeight="40" text="密 码:" />
        <PasswordField fx:id="fieldPassword" prefWidth="280" prefHeight="40" HBox.hgrow="ALWAYS" />
      </children>
      <padding>
        <Insets top="0.0" bottom="10.0" left="0.0" right="0.0"/>
      </padding>
    </HBox>
    <Button fx:id="btnLogin" prefWidth="400" prefHeight="40" text="登  录" />
    <Label fx:id="labelLoginResult" prefWidth="400" prefHeight="40" text="这里显示登录结果" />
  </children>
  <padding>
    <Insets top="10.0" bottom="10.0" left="10.0" right="10.0"/>
  </padding>
</VBox>

 

再次运行测试程序,弹出的登录窗口如下图所示,果然各级控件与周边都隔了一小段距离。


接着在水平方向拉长窗口,拉长之后的窗口界面如下面左图所示。回到初始尺寸,在垂直方向拉高窗口,拉高之后的如下面右图所示。


从上面两张效果图可见,几个箱子和输入框的宽高确实跟随窗口尺寸的变化而变化。



更多Java技术文章参见《Java开发笔记(序)章节目录》


原文链接:https://www.cnblogs.com/pinlantu/p/11448309.html
如有疑问请与原作者联系

标签:IEAV用户Qword流程

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:java 线程之线程状态

下一篇:effective java 3th item1:考虑静态工厂方法代替构造器