原文链接:DOC-03-17 分隔符(Separator) | JavaFX中文资料
在JavaFXAPI中,Separator类表示了一个横向或纵向的分隔线。它用于对应用程序用户界面元素进行分隔,但它并不会产生任何动作。然而你可以给它添加样式或视觉特效,甚至可以为它增加动画效果。默认情况下Separator是横向的。你可以通过setOrientation方法来改变其方向
创建一个Separator
创建了一个横向分隔符和一个纵向分隔符。
纵向和横向Separator
1
2
3
4
5
|
//Horizontal separator
Separator separator1 = new Separator();
//Vertical separator
Separator separator2 = new Separator();
separator2.setOrientation(Orientation.VERTICAL);
|
Separator类是Node类的一个扩展。因此,Separator继承了Node类的所有属性。
一般情况下Separator用于将UI控件进行分组
使用Separator对CheckBox进行分组
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | final String[] names = new String[]{"March", "April", "May", "June", "July", "August"}; final CheckBox[] cbs = new CheckBox[names.length]; final Separator separator = new Separator(); final VBox vbox = new VBox(); for (int i = 0; i < names.length; i++) { cbs[i] = new CheckBox(names[i]); }
separator.setMaxWidth(40); separator.setHalignment(HPos.LEFT); vbox.getChildren().addAll(cbs); vbox.setSpacing(5); vbox.getChildren().add(3, separator); |
CheckBox和Separator
一个Separator会占用分配给它的位置的所有横向或纵向空间。setMaxWidth方法可以用来定义指定的宽度。setValignment方法用于设置Separator在其布局空间内的纵向对齐方式。类似的,你可以通过setHalignment方法来设置Separator的横向对齐方式。
通过使用add(index,node)方法将Separator添加到了VBox中。你可以在程序使用这种方式来在UI界面创建之后或当UI界面动态改变时再添加Separator
将Separator添加到你的程序UI中
Separator可以被用于对UI控件分组。除此之外你也可以使用它们来构建UI界面
在这个程序中同时使用了横向和纵向的Separator,并且设置它们在GridPane容器中跨行和跨列。你也可以在程序中设置Separator的默认长度(对于横向的Separator来说是宽度,而对于纵向的Separator来说是高度),它可以在用户界面改变大小时随之动态改变。另外你还可以使用对Separator对象可用的CSS样式类来改变其外观
import javafx.application.Application; import javafx.geometry.Insets; import javafx.geometry.Orientation; import javafx.geometry.VPos; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.control.*; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.layout.GridPane; import javafx.scene.text.Font; import javafx.stage.Stage; public class SeparatorSample extends Application { Label caption = new Label("实例文字");//Label对象的创建 Label friday = new Label("标题1");//Label对象的创建 Label saturday = new Label("标题2");//Label对象的创建 Label sunday = new Label("标题3");//Label对象的创建 @Override public void start(Stage stage) { Group root = new Group();//节点组容器的创建 Scene scene = new Scene(root, 500, 500);//场景对象的创建 stage.setScene(scene);//舞台设置场景 stage.setTitle("分割线组件示例"); GridPane grid = new GridPane();//表格面板布局控件 grid.setPadding(new Insets(10, 10, 10, 10));//表格内组件内边距的设置 grid.setVgap(2);//垂直布局间隙距离设置 grid.setHgap(5);//水平布局间隙距离设置 scene.setRoot(grid);//场景上添加gridPane面板对象 Image cloudImage = new Image(getClass().getResourceAsStream("folder_16.jpg"));//创建图片视图区 Image sunImage = new Image(getClass().getResourceAsStream("folder_16.jpg"));//创建图片视图区 caption.setFont(Font.font("Verdana", 20));//设置标题字体 GridPane.setConstraints(caption, 0, 0);//第一行第一列位置放置标题 GridPane.setColumnSpan(caption, 8);//标题宽度跨8列 grid.getChildren().add(caption);//表格布局添加标题 final Separator sepHor = new Separator();//分割线对象 sepHor.setValignment(VPos.CENTER); GridPane.setConstraints(sepHor, 0, 1);//第二行第一列设置一个分割线对象 GridPane.setColumnSpan(sepHor, 7);//跨七列 grid.getChildren().add(sepHor);//表格布局中添加分割线对象 friday.setFont(Font.font("Verdana", 18));//标题设置字体 GridPane.setConstraints(friday, 0, 2);//第三行第一列添加文本标题 GridPane.setColumnSpan(friday, 2);//文本对象跨布局对象中的两列 grid.getChildren().add(friday);//布局对象中添加文本标签 final Separator sepVert1 = new Separator(); sepVert1.setOrientation(Orientation.VERTICAL);//设置分割线对象的方向 sepVert1.setValignment(VPos.CENTER);//设置分割线对象的对齐属性 sepVert1.setPrefHeight(80);//设置分割线对象的高度 GridPane.setConstraints(sepVert1, 2, 2);//设置分割线对象所在布局对象中的布局位置:第三行第三列 GridPane.setRowSpan(sepVert1, 2);//分割线对象跨两行 grid.getChildren().add(sepVert1);//布局对象中添加分割线对象 saturday.setFont(Font.font("Verdana", 18));//标签对象中添加文本字体 GridPane.setConstraints(saturday, 3, 2);//第三行第四列中添加文本标签 GridPane.setColumnSpan(saturday, 2);//文本标签跨布局两列 grid.getChildren().add(saturday);//布局对象中添加文本标签 final Separator sepVert2 = new Separator();//创建分割线对象 sepVert2.setOrientation(Orientation.VERTICAL);//设置分割线方向 sepVert2.setValignment(VPos.CENTER);//设置分割线对齐属性 sepVert2.setPrefHeight(80);//设置分割线高度 GridPane.setConstraints(sepVert2, 5, 2);//将分割线对象添加到第三行第六列 GridPane.setRowSpan(sepVert2, 2);//将分割线对象设置跨越两行 grid.getChildren().add(sepVert2);//布局对象中添加分割线 sunday.setFont(Font.font("Verdana", 18));//设置标题的字体 GridPane.setConstraints(sunday, 6, 2);//第三行第七列布局个标题对象 GridPane.setColumnSpan(sunday, 2);//文本在布局上设置两列跨度 grid.getChildren().add(sunday);//布局对象上添加文本标题对象 final ImageView cloud = new ImageView(cloudImage);//创建图形对象 GridPane.setConstraints(cloud, 0, 3);//表格布局对象上四行1列位置添加图形视图对象 grid.getChildren().add(cloud);//布局对象上添加视图图片对象 final Label t1 = new Label("16");//创建标题对象 t1.setFont(Font.font("Verdana", 20));//标签设置文本字体对象 GridPane.setConstraints(t1, 1, 3);//布局对象四行一列位置添加文本对象 grid.getChildren().add(t1);//布局对象上添加文本对象 final ImageView sun1 = new ImageView(sunImage);//创建图片视图区域对象 GridPane.setConstraints(sun1, 3, 3);//四行四列位置添加图形视图区域对象 grid.getChildren().add(sun1);//布局对象上添加视图区域对象 final Label t2 = new Label("18");//创建文本标题 t2.setFont(Font.font("Verdana", 20));//设置标题字体 GridPane.setConstraints(t2, 4, 3);//四行五列位置添加文本标题(位置约束) grid.getChildren().add(t2);//布局对象中通添加文本标签对象 final ImageView sun2 = new ImageView(sunImage);//创建图形对象 GridPane.setConstraints(sun2, 6, 3);//添加布局约束:4行7列位置添加图片对象 grid.getChildren().add(sun2);//在布局对象中添加图片 final Label t3 = new Label("20");//创建文本标题对象 t3.setFont(Font.font("Verdana", 20));//设置文本标签字体 GridPane.setConstraints(t3, 7, 3);//添加布局约束 4行8列位置添加文本标签对t3 grid.getChildren().add(t3);//表格布局对象上添加标签对象 stage.show();//舞台播放显示 } public static void main(String[] args) { launch(args); } }
为Separator添加样式
如果要为所有的Separator添加样式,你需要创建一个CSS文件(例如controlStyle.css),然后将此文件保存到你的应用程序主类所在的包中。例17-4展示了你可以添加到controlStyle.css文件中的样式类。
使用CSS 样式类来为Separator添加样式
1 2 3 4 5 | /*controlStyle.css */ .separator .line { -fx-border-color: #e79423; -fx-border-width: 2; } |
你可以通过Scene类的getStylesheets方法来在程序中启用Separator的样式
在JavaFX 应用程序中启用样式表
scene.getStylesheets().add("/controlStyle.css");
在JavaFX 应用程序中启用样式表