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

【问题标题】：How do I make all the fields in my javafx form clickable using GridPane and HBox?如何使用 GridPane 和 HBox 使我的 javafx 表单中的所有字段都可点击？
【发布时间】：2021-05-26 09:12:23
【问题描述】：

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

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 键循环浏览字段和按钮，但我希望能够单独单击每个字段。有没有更好的方法来创建一个具有多个窗格或 hbox 的场景？我也对只有一个网格窗格持开放态度，但我认为有两个更容易格式化，因为我想分隔不同的字段。谢谢！

【问题讨论】：

标签： java javafx gridpane pane hbox

【解决方案1】：

您面临的问题是由于您使用 StackPane 作为场景的根元素引起的。

顾名思义，StackPane 将其子代一个一个堆叠在另一个之上。任何放在最上面的孩子都将是接收事件的孩子（例如点击anothername 字段）。

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

GridPane #1 fp
GridPane #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 教程中的示例，以更好地掌握如何最好地布局您的场景。

【讨论】：