使用JavaFX和SceneBuilder 8缩放UI以适合应用程序窗口

Question

我们目前正在学校开发一个社交媒体平台作为一个项目（将在2周内交付），并且在尝试使UI随应用程序窗口扩展时遇到了一些问题。当前，它在SceneBuilder中预览时按预期方式工作（请参阅第一个链接），但是通过IntelliJ IDEA运行实际应用程序时，它似乎卡在了左上角。我还链接了它的实际行为的屏幕截图（第二个链接）。

This is how the scaling should work, and as you can see it does work when i use SceneBuilder's preview function.

This is how the scaling is working when we run the app, which isn't scaling at all.

此刻，我们只是试图了解问题所在，因此，我们唯一的重点是平台的“发现页面”（您可以从事件页面访问该页面）。因此，我将发布发现页面以及事件控制器的fxml代码。切记，这是我在此的第一篇文章，因此，如果有什么可以帮助您告诉我们的内容，我将把它上传！这是我们项目中所有类的屏幕快照，如果还有其他类对我有用，如果我只说一句话:)

All classes in the project.

“发现”页面的FXML：

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ChoiceBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.effect.DropShadow?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>

<BorderPane fx:id="borderPaneDiscover" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="900.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="JavaFX.DiscoverController">
   <center>
      <AnchorPane prefHeight="200.0" prefWidth="900.0" BorderPane.alignment="CENTER">
         <children>
            <TableView fx:id="tableViewDiscover" layoutY="62.0" onMouseClicked="#showDetails" prefHeight="331.0" prefWidth="900.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="65.0">
              <columns>
                <TableColumn fx:id="eventNameColumnDiscover" minWidth="180.0" prefWidth="75.0" text="Event name" />
                <TableColumn fx:id="eventLocationColumnDiscover" minWidth="180.0" prefWidth="75.0" text="Event location" />
                  <TableColumn fx:id="eventDateColumnDiscover" minWidth="180.0" prefWidth="75.0" text="Event date" />
                  <TableColumn fx:id="eventCategoryColumnCategory" minWidth="180.0" prefWidth="75.0" text="Event category" />
                  <TableColumn fx:id="eventCreatorColumnDiscover" minWidth="180.0" prefWidth="75.0" text="Event Creator" />
              </columns>
               <columnResizePolicy>
                  <TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
               </columnResizePolicy>
            </TableView>
            <Label alignment="CENTER" prefHeight="18.0" prefWidth="190.0" text="Choose category of the event:" textAlignment="CENTER" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" />
            <ChoiceBox fx:id="choiceBoxDiscover" layoutX="375.0" layoutY="20.0" prefHeight="30.0" prefWidth="150.0" AnchorPane.leftAnchor="375.0" AnchorPane.rightAnchor="375.0" AnchorPane.topAnchor="20.0" />
            <Button fx:id="buttonGo" layoutX="505.0" mnemonicParsing="false" onAction="#showTableDiscover" prefHeight="30.0" prefWidth="55.0" style="-fx-background-color: #313131; -fx-text-fill: #FFF; -fx-font-weight: BOLD;" text="Go" AnchorPane.rightAnchor="15.0" AnchorPane.topAnchor="20.0">
               <effect>
                  <DropShadow />
               </effect>
            </Button>
         </children>
      </AnchorPane>
   </center>
   <bottom>
      <AnchorPane prefHeight="145.0" prefWidth="900.0" BorderPane.alignment="CENTER">
         <children>
            <TextArea fx:id="textAreaDescription" editable="false" layoutX="60.0" layoutY="20.0" prefHeight="120.0" prefWidth="250.0" wrapText="true" AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="60.0" AnchorPane.rightAnchor="590.0" AnchorPane.topAnchor="20.0" />
            <TextArea fx:id="textAreaParticipants" editable="false" layoutX="360.0" layoutY="20.0" prefHeight="120.0" prefWidth="250.0" wrapText="true" AnchorPane.bottomAnchor="10.0" AnchorPane.rightAnchor="290.0" AnchorPane.topAnchor="20.0" />
            <Button fx:id="attendButton" layoutX="660.0" layoutY="45.0" mnemonicParsing="false" onAction="#attendEvent" prefHeight="50.0" prefWidth="100.0" style="-fx-background-color: #313131; -fx-text-fill: #ffffff; -fx-font-weight: BOLD;" text="Attend" AnchorPane.bottomAnchor="50.0" AnchorPane.rightAnchor="40.0" AnchorPane.topAnchor="45.0">
               <effect>
                  <DropShadow />
               </effect>
            </Button>
            <Text layoutX="65.0" layoutY="15.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 14; -fx-font-weight: BOLD;" text="Description:" AnchorPane.leftAnchor="60.0" AnchorPane.topAnchor="2.0">
               <font>
                  <Font name="Segoe UI Symbol" size="14.0" />
               </font>
            </Text>
            <Text layoutX="365.0" layoutY="15.0" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-size: 14; -fx-font-weight: BOLD;" text="Participants:" AnchorPane.rightAnchor="457.0" AnchorPane.topAnchor="2.0">
               <font>
                  <Font name="Segoe UI Symbol" size="14.0" />
               </font>
            </Text>
         </children>
      </AnchorPane>
   </bottom>
   <top>
      <AnchorPane prefHeight="16.0" prefWidth="900.0" BorderPane.alignment="CENTER">
         <children>
            <Label alignment="CENTER" contentDisplay="CENTER" layoutX="315.0" prefHeight="54.0" prefWidth="289.0" text="Discover events" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
               <font>
                  <Font name="System Bold" size="36.0" />
               </font>
            </Label>
            <Button alignment="CENTER_RIGHT" layoutX="833.0" layoutY="10.0" mnemonicParsing="false" onAction="#BackToEvents" prefHeight="34.0" prefWidth="55.0" style="-fx-background-color: #313131; -fx-text-fill: #FFF; -fx-font-size: 14; -fx-font-weight: BOLD;" text="Back" AnchorPane.rightAnchor="15.0" AnchorPane.topAnchor="10.0">
               <font>
                  <Font name="Segoe UI Symbol" size="20.0" />
               </font>
               <effect>
                  <DropShadow />
               </effect>
            </Button>
         </children>
      </AnchorPane>
   </top>
</BorderPane>

事件页面的FXML：

package JavaFX;

import javafx.collections.*;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.ChoiceBox;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import java.io.IOException;

public class EventsController {
    private ObservableList<String> usersChoice = FXCollections.observableArrayList("My events(attended/to attend and created)", "Discover(search by category and attend)", "Create event");

    @FXML
    private BorderPane eventsPane;

    @FXML
    private ChoiceBox <String> choicebox;

    @FXML
    private Label labelOfUserChoice;

    @FXML
    private void initialize(){
        choicebox.setItems(usersChoice);

        //choicebox.getSelectionModel().selectedItemProperty().addListener(changeListener);
    }

    @FXML
    private void changeLabel() throws IOException/*, InterruptedException*/{

        switch (choicebox.getValue()) {

            //ask sokol about it

            case ("My events(attended/to attend and created)"):
                labelOfUserChoice.setText("You have chosen: " + choicebox.getValue());
                choicebox.setDisable(true);
                //TimeUnit.SECONDS.sleep(5);
                loadMyEvents();
                break;
            case ("Discover(search by category and attend)"):
                labelOfUserChoice.setText("You have chosen: " + choicebox.getValue());
                choicebox.setDisable(true);
                //TimeUnit.SECONDS.sleep(1);
                loadDiscover();
                break;
            case ("Create event"):
                labelOfUserChoice.setText("You have chosen: " + choicebox.getValue());
                //TimeUnit.SECONDS.sleep(1);
                loadCreateEvent();
                break;
            default:
                System.out.println("YOU'VE BETTER LEARN HOW TO USE JFX!");
        }
    }

    @FXML
    private void goToMainMenu(ActionEvent event) throws IOException {
        FXMLLoader loader = new FXMLLoader();
        loader.setLocation(getClass().getResource("/resources/mainMenu.fxml"));
        BorderPane pane = loader.load();
        eventsPane.getChildren().setAll(pane);
    }

    @FXML
    private void goToProfile(ActionEvent event) throws IOException {
        FXMLLoader loader = new FXMLLoader();
        loader.setLocation(getClass().getResource("/resources/profile.fxml"));
        BorderPane pane = loader.load();
        eventsPane.getChildren().setAll(pane);
    }

    @FXML
    private void goToFriends(ActionEvent event) throws IOException {
        FXMLLoader loader = new FXMLLoader(getClass().getResource("/resources/friendsPage.fxml"));
        loader.setLocation(getClass().getResource("/resources/friendsPage.fxml"));
        BorderPane pane = loader.load();
        eventsPane.getChildren().setAll(pane);
    }

    @FXML
    private void goToChat(ActionEvent event) throws IOException {
        FXMLLoader loader = new FXMLLoader();
        loader.setLocation(getClass().getResource("/chatclient/FXMLDocument.fxml"));
        BorderPane pane = loader.load();
        eventsPane.getChildren().setAll(pane);
    }

    private void loadMyEvents() throws IOException {
        FXMLLoader loader = new FXMLLoader();
        loader.setLocation(getClass().getResource("/resources/myEvents.fxml"));
        BorderPane pane = loader.load();
        eventsPane.getChildren().setAll(pane);
    }

    private void loadDiscover() throws IOException{
        FXMLLoader loader = new FXMLLoader();
        loader.setLocation(getClass().getResource("/resources/discover.fxml"));
        BorderPane pane = loader.load();
        eventsPane.getChildren().setAll(pane);
    }

    private void loadCreateEvent() throws IOException{
        FXMLLoader loader = new FXMLLoader();
        loader.setLocation(getClass().getResource("/resources/createEvent.fxml"));
        BorderPane pane = loader.load();
        eventsPane.getChildren().setAll(pane);
    }

}

到目前为止，我可能已经阅读了这里所有与我们一样遥遥无期的问题，但似乎都没有起作用。我找不到能够说明与我们完全相同的问题的帖子，其中SceneBuilder中的预览窗口按预期工作，而运行该程序时却没有。希望有人能帮助我们，在此先感谢！ ：）