java - 带标题边框的 GridPane

Question

我试图在我的 GridPane 周围放置一个带标题的边框，但我遇到了边框位于顶部标题的问题。我还想知道哪个容器最适合我的问题。 GridPane 在这里似乎有问题。有更简单的方法吗？

当前结果:

public void start(Stage primaryStage) {
        try {
               primaryStage.setTitle("GridPane");
                
                BorderPane root = new BorderPane();
                Scene scene = new Scene(root, 300, 210);
                
                GridPane grd =new GridPane();
                ColumnConstraints column1width = new ColumnConstraints(50);
                ColumnConstraints column2width = new ColumnConstraints(70);
                ColumnConstraints column3width = new ColumnConstraints(70);
                RowConstraints row1Height = new RowConstraints(30);
                grd.getColumnConstraints().addAll(column1width, column2width, column3width);
                grd.getRowConstraints().add(row1Height);

                Label source = new Label("Source");
                Label report = new Label("Report");
                TextField text1 = new TextField();
                TextField text2 = new TextField("report.txt");
                Button browse1 = new Button("Browse...");
                Button browse2 = new Button("Browse...");
                grd.setVgap(10);
                grd.setHgap(10);
                grd.setPadding(new Insets(10, 10, 10, 10));
                
                text1.setPrefSize(80, 20);
                text2.setPrefSize(80, 20);
                browse1.setPrefSize(80, 20);
                browse2.setPrefSize(80, 20);
                
                Label textIO = new Label("Text IO zone");
                textIO.getStyleClass().add("title");
                textIO.setPadding(new Insets(-40, -20, 0, 0));
                
                textIO.setPrefWidth(120);      
                grd.add(textIO, 0, 0);
                grd.add(source, 0, 0);
                grd.add(text1, 1, 0);
                grd.add(browse1, 2, 0);
                grd.add(report, 0, 1);
                grd.add(text2, 1, 1);
                grd.add(browse2, 2, 1);

                grd.getStyleClass().add("border");
                
                grd.prefHeightProperty().bind(root.heightProperty());
                
                root.getStyleClass().add("color");
                root.setLeft(grd);
                scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
                primaryStage.setScene(scene);
                primaryStage.setMinHeight(250);
                primaryStage.setMinWidth(410);
                primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

和 css 样式。

/* JavaFX CSS - Leave this comment until you have at least create one rule which uses -fx-Property */

    .title {
       -fx-background-color: aliceblue;
       -fx-translate-y: -5;
       -fx-content-display: bottom; 
    }
    .border {
       -fx-border-insets: 5;
       -fx-border-color: black;
    }
    .color{
        -fx-background-color: aliceblue;
    }

Answer 1

不久前有一个关于这个的问题，但我找不到了。关键是将所有背景设置为相同的颜色。

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" style="-fx-background-color: white;" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <StackPane layoutX="150.0" layoutY="115.0" prefHeight="200.0" prefWidth="300.0" style="-fx-border-color: black; -fx-background-color: white;">
         <children>
            <VBox prefHeight="200.0" prefWidth="100.0" spacing="10.0">
               <children>
                  <HBox spacing="10.0">
                     <children>
                        <Label maxHeight="1.7976931348623157E308" text="Source" />
                        <TextField prefWidth="125.0" />
                        <Button mnemonicParsing="false" text="Browse.." />
                     </children>
                  </HBox>
                  <HBox spacing="10.0">
                     <children>
                        <Label maxHeight="1.7976931348623157E308" text="Report" />
                        <TextField maxWidth="125.0" />
                        <Button mnemonicParsing="false" text="Browse.." />
                     </children>
                  </HBox>
               </children>
               <StackPane.margin>
                  <Insets left="5.0" right="5.0" top="20.0" />
               </StackPane.margin>
            </VBox>
         </children></StackPane>
      <Label layoutX="164.0" layoutY="105.0" style="-fx-background-color: white;" text="Text IO Zone" />
   </children>
</AnchorPane>