javafx label 样式

JavaFX Label样式

在JavaFX中，Label是用于显示文本的基本控件，可以用于显示静态文本或动态文本。Label提供了许多样式选项，可以根据需要自定义其外观。本文将详细介绍如何使用CSS样式表来为Label控件添加样式，并提供一些常用的样式示例。

使用CSS样式表

JavaFX中的样式可以通过CSS样式表来定义。通过将样式应用到Label控件上，可以实现对其文本、背景、边框等外观的自定义。

首先，我们需要创建一个CSS样式表文件。可以通过以下方式将样式应用到Label控件上：

label.getStyleClass().add("my-label");

这里，my-label是我们自定义的样式类，用于定义Label的样式。在CSS样式表中，我们可以使用该样式类来定义Label的外观。

修改文本样式

要修改Label的文本样式，可以使用-fx-text-fill属性来设置文本的颜色。

.my-label {
    -fx-text-fill: red;
}

上述代码将Label的文本颜色设置为红色。

修改背景样式

要修改Label的背景样式，可以使用-fx-background-color属性来设置背景颜色。

.my-label {
    -fx-background-color: yellow;
}

上述代码将Label的背景颜色设置为黄色。

修改边框样式

要修改Label的边框样式，可以使用-fx-border-color属性来设置边框颜色，-fx-border-width属性来设置边框宽度。

.my-label {
    -fx-border-color: black;
    -fx-border-width: 2px;
}

上述代码将Label的边框颜色设置为黑色，边框宽度设置为2像素。

修改字体样式

要修改Label的字体样式，可以使用-fx-font-family属性来设置字体，-fx-font-size属性来设置字体大小。

.my-label {
    -fx-font-family: Arial;
    -fx-font-size: 14px;
}

上述代码将Label的字体设置为Arial，字体大小设置为14像素。

修改对齐方式

要修改Label的对齐方式，可以使用-fx-alignment属性来设置对齐方式。

.my-label {
    -fx-alignment: center-right;
}

上述代码将Label的文本在水平方向上设置为右对齐，垂直方向上设置为居中对齐。

添加效果样式

要为Label添加效果样式，可以使用-fx-effect属性来设置效果。

.my-label {
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.5), 10, 0, 0, 0);
}

上述代码将为Label添加了一个高斯模糊的阴影效果。

示例代码

下面是一个完整的示例代码，展示了如何使用CSS样式表为Label控件添加样式：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class LabelStyleExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        Label label = new Label("Hello, JavaFX!");
        label.getStyleClass().add("my-label");

        VBox root = new VBox(label);
        Scene scene = new Scene(root, 200, 200);
        scene.getStylesheets().add(getClass().getResource("labelStyle.css").toExternalForm());

        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

.my-label {
    -fx-text-fill: red;
    -fx-background-color: yellow;
    -fx-border-color: black;
    -fx-border-width: 2px;
    -fx-font-family: Arial;
    -fx-font-size: 14px;
    -fx-alignment: center-right;
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.5), 10, 0, 0,