3 使用CSS样式化布局面板

布局面板的样式属性

您可以使用CSS为所有类型的布局面板设置背景、边框和填充属性。某些类型的布局面板还具有其他可设置的属性。例如，您可以为HBox和VBox面板设置间距和对齐属性，可以为平铺面板设置方向、首选行数、首选列数和其他属性。可以使用图像作为面板的背景和边框。

有关每种类型的布局面板可用属性的列表，请参见JavaFX CSS参考指南。Region类列出的属性可由所有布局面板使用，这些布局面板是Region类的子类。

将样式表分配给场景

准备好样式表后，必须将样式表添加到应用程序的场景中。然后，所有节点都可以访问样式表中定义的样式。示例3-3展示了如何为布局示例添加样式表。在此示例中，样式表与应用程序的类文件位于同一目录中。

Scene scene = new Scene(border);
scene.getStylesheets().add("layoutsamplecss/layoutstyles.css");

定义共享属性的样式

所有布局面板都有一组基本属性，可以通过CSS进行管理。这些属性包括面板的背景、边框、内边距和形状。如果有多个面板共享这些属性的样式，可以定义一个单独的样式类，并将该类分配给每个面板。

在自定义的布局示例中，几个布局面板使用相同的背景颜色。在示例3-4中显示的.pane样式类用于设置这个颜色。

.pane {
    -fx-background-color: #8fbc8f;
}

如果只需要设置面板的背景颜色，那么只需要分配.pane样式即可。如果需要更多的样式，可以将多个样式分配给一个面板。示例3-5展示了将.pane样式添加到锚点面板以及将.pane和.grid样式添加到网格面板的情况。

AnchorPane anchorpane = new AnchorPane();
anchorpane.getStyleClass().add("pane");

GridPane grid = new GridPane();
grid.getStyleClass().addAll("pane","grid");

样式化边界面板

边界面板除了在定义共享属性的样式中提到的基本属性之外，没有任何额外的属性。在布局示例中，边界面板没有样式。然而，要为边界面板设置样式，可以定义一个样式类，并将其分配给面板，方式与其他面板相同。

样式化HBox面板

除了所有布局面板的基本属性之外，HBox面板还具有对齐、间距和填充高度的属性。

在示例中显示的布局样本中，包含了两个HBox面板。第一个HBox面板位于顶部，包含了当前和预测按钮。第二个HBox面板位于底部附近，包含了保存和取消按钮。

对于自定义的布局样本，两个HBox面板具有相同的背景颜色和间距。这些属性在样式定义中设置，如示例3-1所示。

第二个HBox面板，包含了保存和取消按钮，还具有圆角和较少的填充，如图3-2所示。

图3-2 样式化的HBox面板

图3-2 样式化的HBox面板的描述

要使用定义的HBox面板样式，将样式.hbox分配给面板。要覆盖填充并设置圆角的附加属性，使用示例3-6中的样式定义，并为第二个HBox面板设置一个ID。

#hbox-custom {
    -fx-background-radius: 5.0; 
    -fx-padding: 8;
}

示例3-7展示了如何将样式分配给第二个HBox面板。

HBox hb = new HBox();
hb.getStyleClass().add("hbox");
hb.setId("hbox-custom");

样式化VBox面板

除了所有布局面板的基本属性之外，VBox面板还具有对齐、间距和填充宽度的属性。

在图3-1的左侧区域中使用了.pane样式类的背景。边框、内边距和间距在示例3-8中的.vbox样式类中设置。

.vbox {
    -fx-border-color: #2e8b57;
    -fx-border-width: 2px;
    -fx-padding: 10;
    -fx-spacing: 8;
}

示例3-9展示了如何将样式应用到VBox面板。

VBox vbox = new VBox();
vbox.getStyleClass().addAll("pane", "vbox");

样式化Stack面板

除了所有布局面板的基本属性之外，堆叠面板还具有对齐属性。在布局示例中，堆叠面板没有样式。但是，要为堆叠面板设置样式，可以定义一个样式类，并将其分配给面板，方式与其他面板相同。

样式化Grid面板

除了所有布局面板的基本属性之外，网格面板还具有行和列之间的间距、网格的对齐方式以及网格线的可见性属性。

图3-1中心区域的网格具有圆角和白色背景，略小于网格本身。在示例3-10中的.grid样式类提供了这种样式，并设置了内边距、行和列之间的间距。

.grid {
    -fx-background-color: white;
    -fx-background-radius: 5.0;
    -fx-background-insets: 0.0 5.0 0.0 5.0;
    -fx-padding: 10;
    -fx-hgap: 10;
    -fx-vgap: 10;
}

示例3-11展示了如何将样式应用到网格。

GridPane grid = new GridPane();
grid.getStyleClass().add("grid");

请注意，网格没有布局示例中其他布局面板使用的背景颜色。然而，包含网格的锚点使用了背景颜色。为了防止网格具有其父级的背景颜色，您必须将网格的背景设置为所需的颜色。

样式化流式面板或网格面板

除了所有布局面板的基本属性之外，流式面板还具有对齐、方向和行列之间的间距的属性。网格面板还具有对齐、方向、行列之间的间距、首选行列数以及首选宽度和高度的属性。

在布局示例中，可以使用流式面板或网格面板作为图3-1中右侧区域的布局。样式类中设置的属性对于两种类型的面板都是通用的，因此在示例中使用相同的样式类。在示例3-12中显示的.flow-tile样式类设置了填充和行列之间的间距的属性。

.flow-tile {
    -fx-padding: 10.0 3.0 5.0 0.0;
    -fx-hgap: 4;
    -fx-vgap: 4;
}

流式面板和网格面板还使用.pane样式类设置背景颜色。示例3-13展示了如何将样式应用于流式面板和网格面板。

FlowPane flow = new FlowPane();
flow.getStyleClass().addAll("pane", "flow-tile");

TilePane tile = new TilePane();
tile.getStyleClass().addAll("pane", "flow-tile");

样式化锚点面板

锚点面板除了所有布局面板的基本属性之外，没有任何其他属性。

在图3-1中心区域的锚点面板中包含一个网格和一个HBox面板，每个面板都有自己的样式。锚点面板只应用了由示例3-4中显示的.pane样式类设置的背景颜色。

示例3-14展示了如何将样式应用于锚点面板。

AnchorPane anchorpane = new AnchorPane();
anchorpane.getStyleClass().add("pane");