为什么此JavaFX应用程序看上去与SceneBuilder中的外观有所不同？

Question

我试图在JavaFX上制作我的第一个应用程序，但这让我非常沮丧！该应用程序的这些元素在SceneBuilder中是完美的，但现在只是未对齐！In SceneBuilder:In reality:

我认为是因为运行该应用程序时出现此错误：

WARNING: Loading FXML document with JavaFX API of version 11.0.1 by JavaFX runtime of version 8.0.231

我尝试将AnchorPane属性更改为：

<AnchorPane prefHeight="129.0" prefWidth="205.0" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml"">
   ...
</AnchorPane>

但是它只是修正了警告，而不是未对准。

这是我的完整代码：

Main.java

package application;

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


public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            //BorderPane root = new BorderPane();
            Parent root = FXMLLoader.load(getClass().getResource("Root.fxml"));
            Scene scene = new Scene(root,400,400);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

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

Root.fxml

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>


<AnchorPane prefHeight="129.0" prefWidth="205.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <TextField layoutX="28.0" layoutY="23.0" />
      <Button layoutX="77.0" layoutY="65.0" mnemonicParsing="false" text="Button" />
   </children>
</AnchorPane>

Answer 1

正如@Slaw提到的AnchorPane不是响应式布局。您可以考虑使用VBox，因为您有两个垂直放置的节点。

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

<?import javafx.geometry.Pos?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.VBox?>


<VBox prefHeight="129.0"  alignment="CENTER" prefWidth="205.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <TextField fx:id="INPUT_FIELD" />
      <Button fx:id="SUBMIT" mnemonicParsing="false" text="Button" />
   </children>
</VBox>

[通常，可以将AnchorPane设置为页面布局，您可以将VBox放在其上，并且可以在VBox上添加控件（按钮，TextField等）。

警告：通过版本8.0.231的JavaFX运行时使用版本11.0.1的JavaFX API加载FXML文档

不，这只是警告！您可以在here上找到大量讨论。