DOC-03-17 分隔符(Separator)

本章介绍了如何使用分隔符(Separator)来组织你的JavaFX应用程序UI组件。

在JavaFXAPI中,Separator类表示了一个横向或纵向的分隔线。它用于对应用程序用户界面元素进行分隔,但它并不会产生任何动作。然而你可以给它添加样式或视觉特效,甚至可以为它增加动画效果。默认情况下Separator是横向的。你可以通过setOrientation方法来改变其方向。

创建一个Separator

例17-1中的代码片段创建了一个横向分隔符和一个纵向分隔符。

17–1纵向和横向Separator

Separator类是Node类的一个扩展。因此,Separator继承了Node类的所有属性。

一般情况下Separator用于将UI控件进行分组。参考例17-2中的代码片段,它将表示春天月份的CheckBox和表示夏天月份的CheckBox分开了。

17–2使用SeparatorCheckBox进行分组

将此代码片段添加到应用程序之中后,它将会产生如图17-1所示的效果。

17–1 CheckBoxSeparator

3-17-1 separator-checkboxes

一个Separator会占用分配给它的位置的所有横向或纵向空间。setMaxWidth方法可以用来定义指定的宽度。setValignment方法用于设置Separator在其布局空间内的纵向对齐方式。类似的,你可以通过setHalignment方法来设置Separator的横向对齐方式。

在例17-2中,通过使用add(index,node)方法将Separator添加到了VBox中。你可以在程序使用这种方式来在UI界面创建之后或当UI界面动态改变时再添加Separator。

Separator添加到你的程序UI

如前说述,Separator可以被用于对UI控件分组。除此之外你也可以使用它们来构建UI界面。例如在图17-2中所示的天气预报界面。

17–2 使用Separator来构建天气预报数据界面

3-17-2 separator-weather

在图17-2中展示的程序中,Separator被用于分隔Label和ImageView对象。参考代码见例17-3。

17–3 在天气预报程序中使用Separator

在这个程序中同时使用了横向和纵向的Separator,并且设置它们在GridPane容器中跨行和跨列。你也可以在程序中设置Separator的默认长度(对于横向的Separator来说是宽度,而对于纵向的Separator来说是高度),它可以在用户界面改变大小时随之动态改变。另外你还可以使用对Separator对象可用的CSS样式类来改变其外观。

Separator添加样式

如果要为例17-3中为所有的Separator添加样式,你需要创建一个CSS文件(例如controlStyle.css),然后将此文件保存到你的应用程序主类所在的包中。例17-4展示了你可以添加到controlStyle.css文件中的样式类。

17–4 使用CSS 样式类来为Separator添加样式

你可以通过Scene类的getStylesheets方法来在程序中启用Separator的样式,如例17-5所示。

17–5 JavaFX 应用程序中启用样式表

图17-3展示了修改了的程序编译和运行后,在天气预报样例程序中Separator的外观。

17–3添加了样式的Separator

3-17-3 separator-weather-style

相关的API文档

    · Separator

    · JavaFX CSS 规范

 

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/04/doc03_separator/
百度已收录