2 标签

创建标签

JavaFX API提供了Label类的三个构造函数，用于在应用程序中创建标签，如示例2-1所示。

//一个空标签
Label label1 = new Label();
//一个带有文本元素的标签
Label label2 = new Label("搜索");
//一个带有文本元素和图标的标签
Image image = new Image(getClass().getResourceAsStream("labels.jpg"));
Label label3 = new Label("搜索", new ImageView(image));

在代码中创建了一个标签后，可以使用Labeled类的以下方法向其添加文本和图形内容。

• setText(String text)方法 - 指定标签的文本标题

• setGraphic(Node graphic)方法 - 指定图形图标

setTextFill方法指定标签的文本元素的颜色。请参考示例2-2。它创建了一个文本标签，添加了一个图标，并为文本指定了填充颜色。

Label label1 = new Label("搜索");
Image image = new Image(getClass().getResourceAsStream("labels.jpg"));
label1.setGraphic(new ImageView(image));
label1.setTextFill(Color.web("#0076a3"));

将此代码片段添加到应用程序中后，将生成如图2-2所示的标签。

图2-2 带有图标的标签

"图2-2 带有图标的标签"的描述

当为按钮定义文本和图形内容时，可以使用setGraphicTextGap方法设置它们之间的间隔。

此外，还可以使用setTextAlignment方法在布局区域内变化标签内容的位置。还可以通过应用setContentDisplay方法并指定以下ContentDisplay常量之一来定义图形相对于文本的位置：LFFT、RIGHT、CENTER、TOP、BOTTOM。

设置字体

比较图2-1和图2-2中的搜索标签。注意，图2-1中的标签字体大小较大。这是因为示例2-2中的代码片段没有为标签指定任何字体设置。它使用默认字体大小进行渲染。

要为标签提供除默认字体以外的字体大小，请使用Labeled类的setFont方法。在示例2-3中，代码片段将label1的文本大小设置为30点，字体名称设置为Arial。对于label2，将文本大小设置为32点，字体名称设置为Cambria。

//使用Font类的构造函数
label1.setFont(new Font("Arial", 30));
//使用Font类的font方法
label2.setFont(Font.font("Cambria", 32));

文本换行

当创建标签时，有时必须将其适应比需要渲染的空间小的空间。为了将文本分割（换行），以便它可以适应布局区域，请为setWrapText方法设置true值，如示例2-4所示。

Label label3 = new Label("需要换行的标签");
label3.setWrapText(true);

将label3添加到应用程序的内容中时，渲染结果如图2-3所示。

图2-3 带有换行文本的标签

"图2-3 带有换行文本的标签"的描述

假设标签的布局区域不仅受其宽度的限制，还受其高度的限制。您可以使用Labeled类的setTextOverrun方法和可用的OverrunStyle类型之一来指定标签在无法正确渲染整个所需文本字符串时的行为。有关OverrunStyle类型的更多信息，请参阅API文档。

应用效果

尽管标签是静态内容且无法编辑，但您可以对其应用视觉效果或变换。在示例2-5中的代码片段中，将label2旋转270度并在垂直方向上平移其位置。

Label label2 = new Label ("Values");
label2.setFont(new Font("Cambria", 32));
label2.setRotate(270);
label2.setTranslateY(50);

旋转和平移是JavaFX API中常见的变换。此外，您还可以设置一个效果，当用户将鼠标悬停在标签上时，标签会进行缩放（放大）。

在示例2-6中显示的代码片段将缩放效果应用于label3。当标签上触发MOUSE_ENTERED事件时，将为setScaleX和setScaleY方法设置缩放因子1.5。当用户将鼠标移出标签并触发MOUSE_EXITED事件时，缩放因子将设置为1.0，并且标签将以其原始大小呈现。

label3.setOnMouseEntered((MouseEvent e) -> {
    label3.setScaleX(1.5);
    label3.setScaleY(1.5);
});

label3.setOnMouseExited((MouseEvent e) -> {
    label3.setScaleX(1);
    label3.setScaleY(1);
});

图2-4显示了label3的两种状态。

图2-4 缩放标签

"图2-4 缩放标签"的描述

相关API文档  

• Label

• Labeled