JavaFX 没有正确重新定位（调整大小）

Question

我对 JavaFX 很陌生。我尝试制作一个简单的 GUI，但结果并不正确。

它在 SceneBuilder 中的外观如下： https://imgur.com/a/3aJefh4
在实际的应用程序中： https://imgur.com/a/JpszR9m

如果我把它缩小，按钮就会消失。如果我把它调整大，那就没问题了。
对不起，如果我解释得不好......

---

Main.java

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("Hello World");
        primaryStage.setScene(new Scene(root, 300, 275));
        primaryStage.show();
    }


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

---

Controller.java

package sample;

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

public class Controller {
    @FXML private Button logoutButton;
    @FXML private AnchorPane scene;
    Stage stage;

    public void logout() {
        stage = (Stage) scene.getScene().getWindow();
        stage.close();
    }
}

---

sample.fxml

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane alignment="center" hgap="10" maxHeight="-Infinity" maxWidth="-Infinity" vgap="10" xmlns="http://javafx.com/javafx/15.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <columnConstraints>
      <ColumnConstraints />
      <ColumnConstraints />
   </columnConstraints>
   <rowConstraints>
      <RowConstraints />
      <RowConstraints />
   </rowConstraints>
   <children>
      <AnchorPane fx:id="scene" prefHeight="300.0" prefWidth="500.0" GridPane.columnIndex="1" GridPane.rowIndex="1">
         <children>
            <Button fx:id="logoutButton" layoutX="224.0" layoutY="138.0" mnemonicParsing="false" onAction="#logout" text="Logout" />
         </children>
      </AnchorPane>
   </children>
</GridPane>

Answer 1

总结许多 cmets 提到的内容，请注意在左下方的 SceneBuilder 图像中您有一个 GridPane，并且在该 GridPane（在其中一个单元格中）中放置了一个 AnchorPane。我假设您的按钮位于 AnchorPane 上。

AnchorPanes 遵循为其子项（按钮）分配精确像素坐标的规则，因此，如果该像素不在视野范围内，（窗格太小）按钮将不可见。这不是你想要的。为了解决这个问题，应该使用一个新容器（正如评论者所建议的那样）。

我建议您删除您的 GridPane（因此所有内容），而是将一个 BorderPane 拖放到您的 GridPane 所在的位置。您会注意到 BorderPane 有一个中心区域（以及顶部、左侧、底部和右侧区域）

将您的按钮放在这个中心区域，然后再次尝试运行。当 BorderPane 调整大小时，按钮应移动以适应相同的相对位置。