JavaFx 8 - 一个具有无法着色的边框并且能够在中间包含文本的类

Question

有谁知道我可以使用的一个类，它本质上是一个矩形，但它在矩形中间有文本，并且矩形有填充颜色和边框颜色(边框可以更改为红色或类似的东西)

基本上现在我有一个 Pane ，我想制作一个 2D 网格(10x10)，其中网格中的每个单独对象都是一个矩形类型的对象，它具有居中对齐的数字文本、填充颜色和边框颜色。

注意:我尝试使用网格 Pane ，但我发现缺乏文档使我相信我只能设置填充颜色，并且网格 Pane 中的每个单元格看起来不像一个单独的对象就像我想要的那样。我也尝试过实现矩形，但矩形没有我可以操作的文本或边框。

感谢您的帮助。

Answer 1

只需使用标签。这是概念证明:

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

public class CustomLabelDemo extends Application {

    @Override
    public void start(Stage primaryStage) {
        Label label = new Label("Hello World");
        label.setStyle(
            "-fx-alignment: center;"
            +"-fx-padding: 6px;"
            +"-fx-background-color: red, -fx-background;"
            +"-fx-background-insets: 0, 4px;"
        );
        StackPane root = new StackPane(label);
        primaryStage.setScene(new Scene(root, 350, 75));
        primaryStage.show();
    }

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

CSS 在这里工作的方式是它定义了两个背景:第一个(以及后面的那个)是红色的；第二个是红色的。前面的设置为 -fx-background，这是大多数控件背景的默认样式表中定义的颜色。与这些相对应的是两个背景的两个插图:第一个设置为零，第二个设置为 4 像素。这意味着红色边框的 4 个像素将可见。设置填充只是为了确保文本不会与外部背景(边框)重叠。

在实际的应用程序中，您应该将样式放在外部文件中。您还可以定义 "looked-up-color"边框颜色；这将使在运行时更改颜色变得更加容易:

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

public class CustomLabelDemo extends Application {

    @Override
    public void start(Stage primaryStage) {
        Label label = new Label("Hello World");
        label.getStyleClass().add("custom-label");

        Button changeColorButton = new Button("Change to green");
        changeColorButton.setOnAction(event -> label.setStyle("custom-label-border-color: green;"));

        VBox root = new VBox(10, label, changeColorButton);
        root.setAlignment(Pos.CENTER);
        Scene scene = new Scene(root, 350, 75);
        scene.getStylesheets().add("custom-label.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

使用自定义标签.css:

.custom-label {
    custom-label-border-color: red ;
    -fx-alignment: center;
    -fx-padding: 6px;
    -fx-background-color: custom-label-border-color, -fx-background;
    -fx-background-insets: 0, 4px;
}

.button {
    -fx-alignment: center ;
}

如果您有一组固定的颜色表示的状态，您可能需要使用伪类来表示状态:

import javafx.application.Application;
import javafx.css.PseudoClass;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class CustomLabelDemo extends Application {

    @Override
    public void start(Stage primaryStage) {
        Label label = new Label("Hello World");
        label.getStyleClass().add("custom-label");

        CheckBox errorCheckBox = new CheckBox("Error");
        PseudoClass errorState = PseudoClass.getPseudoClass("error");
        errorCheckBox.selectedProperty().addListener((obs, wasSelected, isNowSelected) -> 
            label.pseudoClassStateChanged(errorState, isNowSelected));

        VBox root = new VBox(10, label, errorCheckBox);
        root.setAlignment(Pos.CENTER);
        Scene scene = new Scene(root, 350, 75);
        scene.getStylesheets().add("custom-label.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

自定义标签.css:

.custom-label {
    custom-label-border-color: green ;
    -fx-alignment: center;
    -fx-padding: 6px;
    -fx-background-color: custom-label-border-color, -fx-background;
    -fx-background-insets: 0, 4px;
}

.custom-label:error {
    custom-label-border-color: red ;
}

.check-box {
    -fx-alignment: center ;
}