17 分隔线
本章介绍如何使用分隔线来组织JavaFX应用程序的UI组件。
JavaFX API中提供的Separator类表示水平或垂直的分隔线。它用于分隔应用程序用户界面的元素，并且不会产生任何动作。但是，您可以对其进行样式设置、应用视觉效果，甚至进行动画处理。默认情况下，分隔线是水平的。您可以使用setOrientation方法来更改其方向。
创建分隔符
在示例17-1中的代码片段创建了一个水平分隔符和一个垂直分隔符。
示例17-1 垂直和水平分隔符
//水平分隔符 Separator separator1 = new Separator(); //垂直分隔符 Separator separator2 = new Separator(); separator2.setOrientation(Orientation.VERTICAL);
Separator类是Node类的扩展。因此，分隔符继承了Node类的所有实例变量。
通常，分隔符用于分隔UI控件的组。请查看示例17-2中的代码片段。它将春季月份的复选框与夏季月份的复选框分隔开。
示例17-2 在复选框类别之间使用分隔符
final String[] names = new String[]{"三月", "四月", "五月",
"六月", "七月", "八月"};
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);
将这段代码添加到应用程序中后，会产生如图17-1所示的控件。
分隔符占据了分配给它的全部水平或垂直空间。使用setMaxWidth方法定义特定的宽度。使用setValignment方法指定分隔符在分配的布局空间中的垂直位置。类似地，您可以通过应用setHalignment方法来设置分隔符线的水平位置。
在示例17-2中，分隔符通过使用专用方法add(index, node)添加到垂直盒子中。您可以在应用程序中使用这种方法，在UI创建后或UI动态更改时包含分隔符。
向应用程序的用户界面添加分隔符
如前所述，分隔符可用于分隔UI控件的组。您还可以使用它们来构建用户界面。考虑渲染天气预报数据的任务，如图17-2所示。
对于图17-2中显示的应用程序，分隔符用于分隔Label和ImageView对象。请查看示例17-3中显示的应用程序的源代码。
示例17-3 在天气预报应用中使用分隔符
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 friday = new Label("星期五");
Label saturday = new Label("星期六");
Label sunday = new Label("星期日");
@Override
public void start(Stage stage) {
Group root = new Group();
Scene scene = new Scene(root, 350, 150);
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);
Image cloudImage = new Image(getClass().getResourceAsStream("cloud.jpg"));
Image sunImage = new Image(getClass().getResourceAsStream("sun.jpg"));
caption.setFont(Font.font("Verdana", 20));
GridPane.setConstraints(caption, 0, 0);
GridPane.setColumnSpan(caption, 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);
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);
grid.getChildren().add(sun2);
final Label t3 = new Label("20");
t3.setFont(Font.font("Verdana", 20));
GridPane.setConstraints(t3, 7, 3);
grid.getChildren().add(t3);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
这个应用程序同时使用水平和垂直分隔符，并使分隔符跨越GridPane容器的行和列。在你的应用程序中，你还可以设置分隔符的首选长度（水平分隔符的宽度和垂直分隔符的高度），以便在用户界面调整大小时动态改变。你还可以通过应用Separator对象可用的CSS类来改变分隔符的视觉外观。
样式化分隔符
要将相同的样式应用于示例17-3中的所有分隔符，您需要创建一个CSS文件（例如controlStyle.css），并将该文件保存在应用程序的主类所在的相同包中。 示例17-4演示了您可以添加到controlStyle文件中的CSS类。
示例17-4 使用CSS类样式化分隔符
/*controlStyle.css */
.separator .line {
-fx-border-color: #e79423;
-fx-border-width: 2;
}
您可以通过Scene类的getStylesheets方法在应用程序中启用分隔符样式，如示例17-5所示。
图17-3显示了修改后的应用程序编译和运行时天气预报中的分隔符的外观。
相关API文档
