javaFX学习之分隔符(Separator)

原文链接：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 应用程序中启用样式表