css - JavaFX 边框标题

Question

上面的图片是我的代码的结果。但是我想要如下的。

我该如何解决？以下是我的代码。我阅读了太多资料，但它们太复杂了。例如，a source that I read ，我认为这种方式很复杂。也许有一种简单的方法可以解决这个问题。

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class Test extends Application {

    public BorderPane border = new BorderPane();

    public Label name = new Label("Name");
    public Label surname = new Label("Surname");

    public TextField name1 = new TextField();
    public TextField surname1 = new TextField();

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

    }

    @Override
    public void start(Stage arg0) throws Exception {
        Scene scene = new Scene(new VBox(), 300, 200);
        arg0.setTitle("Header");
        arg0.setResizable(false);
        scene.setFill(Color.OLDLACE);

        StackPane grid = addStackPane();
        border.setMargin(grid, new Insets(12,12,12,12));
        border.setCenter(grid);

        ((VBox) scene.getRoot()).getChildren().add(border);
        arg0.setScene(scene);
        arg0.show();

    }

    @SuppressWarnings("static-access")
    public StackPane addStackPane() {
        StackPane pane = new StackPane();
        GridPane grid = new GridPane();
        Label title = new Label("Border Title");
        title.setStyle("-fx-translate-y: -7");
        pane.setAlignment(title, Pos.TOP_LEFT);
        grid.setStyle("-fx-content-display: top");
        grid.setStyle("-fx-border-insets: 20 15 15 15");
        grid.setStyle("-fx-background-color: white");
        grid.setStyle("-fx-border-color: black");
        grid.setHgap(10);
        grid.setVgap(10);
        grid.setPadding(new Insets(25, 10, 25, 10));
        grid.add(name, 1, 0);
        grid.add(name1, 2, 0);

        grid.add(surname, 1, 1);
        grid.add(surname1, 2, 1);
        pane.getChildren().addAll(grid, title);

        return pane;
    }

}

感谢所有阅读本主题的人。

Answer 1

尝试将标题标签的 -fx-background-color 设置为与 borderPane 的背景颜色相同。并确保您在 css 文件中进行设置，因为除非您将它们连接起来，否则无法通过 setStyle() 设置多个样式:

myComponent.setStyle("-fx-text-fill: white;"+
    "-fx-background-color: black;");

此外，使用 InlineStyleSheets 是不好的做法，因为它总是比 CSS StyleSheet 中指定的规则具有更高的优先级。

(如果您将 pane.setAlignment(title, Pos.TOP_LEFT) 更改为 StackPane.setAlignment(title, Pos.TOP_LEFT) 您可以删除“static-acces “警告。)