如何使用 GridPane 和 HBox 使我的 javafx 表单中的所有字段都可点击？

Question

我想制作一个包含三个部分的表单，两个部分带有字段，一个部分带有按钮。

public class Form extends Application{
    
    public static void main(String[] args) {
        launch(args);
    }   
    
    @Override
    public void start(Stage stage) throws Exception {           
        StackPane root = new StackPane();
        GridPane fp = new GridPane();
        fp.setAlignment(Pos.TOP_CENTER);
        fp.setHgap(6);
        fp.setVgap(6);
        fp.add(new Label("Name: "), 0, 0);
        
        TextField name = new TextField();
        name.setPrefWidth(450);
        fp.add(name, 1, 0);
        
        GridPane sp = new GridPane();
        sp.setAlignment(Pos.CENTER);
        sp.setHgap(6);
        sp.setVgap(6);
        sp.add(new Label("Another Name: "), 1, 0);
        
        TextField anothername = new TextField();
        anothername.setPrefWidth(120);
        sp.add(anothername, 2, 0);
        HBox hbox = new HBox();
    
        hbox.setAlignment(Pos.BOTTOM_CENTER);
        Button btn1 = new Button("Button 1");
        hbox.getChildren().add(btn1);
    
        Scene scene = new Scene(root, 500, 500);
        root.getChildren().addAll(fp, sp, hbox);
        stage.setScene(scene);
        stage.show();
    }
}

格式化和一些文本可能会关闭，但这是我的一般解决方案。我制作了一个根堆栈窗格来保存表单的所有部分。然后，我制作了两个网格窗格来容纳文本字段，并制作了一个 hbox 来容纳底部的按钮。

example of how it looks

我的问题是只能点击名称字段。如果我尝试单击另一个名称字段，它将不起作用。我可以按 Tab 键循环浏览字段和按钮，但我希望能够单独单击每个字段。有没有更好的方法来创建具有多个窗格或水平盒的场景？我也愿意只使用一个网格窗格，但我认为设置两个网格窗格更容易格式化，因为我想分隔不同的字段。谢谢！

Answer 1

您遇到的问题是由于您使用 StackPane 作为场景的根元素造成的。

A StackPane，顾名思义，将其子级堆叠在另一个之上。任何放在顶部的子项都将是接收事件的子项（例如单击 anothername 字段）。

您已添加 3 个节点作为您的 StackPane 的子节点：

网格窗格 #1 fp
网格窗格 #2 sp
HBox hbox

由于HBox是上次添加的，所以它是唯一可以接收点击事件的节点。

使用您的示例，我为上面的 3 个项目中的每一个都添加了边框，以说明 JavaFX 是如何布置它们的：

如您所见，StackPane 的每个子项都调整了大小以填充整个区域（我为边框使用了不同的宽度，因此您可以看到它们全部）。

您可以在展示舞台之前添加以下代码来自己尝试：

fp.setStyle("-fx-border-color: green; -fx-border-width: 15px");
sp.setStyle("-fx-border-color: blue; -fx-border-width: 10px");
hbox.setStyle("-fx-border-color: red; -fx-border-width: 5px");

要解决这个问题，您需要彻底重新考虑您的布局； StackPane 肯定不是适合您的情况的正确布局窗格。

我强烈建议您阅读 Oracle Working With Layouts in JavaFX 教程中的示例，以更好地掌握如何最好地布局您的场景。

如何使用 GridPane 和 HBox 使我的 javafx 表单中的所有字段都可点击？

How do I make all the fields in my javafx form clickable using GridPane and HBox?

java

javafx

pane

hbox

gridpane