JavaFX窗格没有相应地缩放

Question

FXML代码：

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

<?import java.net.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="600" minWidth="800" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="nl.hsleiden.keesjes.controllers.GameController">
    <stylesheets>
        <URL value="@../../../game.css" />
    </stylesheets>
    <top>
        <BorderPane styleClass="header-section">
            <left>
                <Button onAction="#showHowToPlay" prefHeight="75.0" prefWidth="175.0" text="HOWTOPLAY" textAlignment="CENTER" />
            </left>
            <center><Label text="Keezen" /></center>
            <right>
                <HBox spacing="5">
                    <Button onAction="#pauseGame" prefHeight="75.0" prefWidth="175.0" text="PAUSE GAME" textAlignment="CENTER" />
                    <Button onAction="#switchToMenu" prefHeight="75.0" prefWidth="175.0" text="LEAVE GAME" textAlignment="CENTER" />
                </HBox>
            </right>
        </BorderPane>
    </top>
   <left>
      <BorderPane minHeight="505.0" minWidth="600.0" BorderPane.alignment="CENTER">
         <bottom>
            <FlowPane minHeight="105.0" minWidth="600.0" styleClass="cards" BorderPane.alignment="CENTER" />
         </bottom>
         <center>
            <Pane minHeight="400.0" minWidth="600.0" styleClass="game" BorderPane.alignment="CENTER" />
         </center>
      </BorderPane>
   </left>
   <right>
       <VBox minHeight="505.0" minWidth="200.0" BorderPane.alignment="CENTER">
           <Pane minHeight="200.0" minWidth="200.0" styleClass="players"/>
           <Pane minHeight="200.0" minWidth="200.0" styleClass="event"/>
           <Pane minHeight="105.0" minWidth="200.0" styleClass="chat"/>
       </VBox>
   </right>
</BorderPane>

和相关的CSS代码：

.root {
    -fx-font-size: 14px;
    -fx-background-color: #FFFFFF;
    -fx-font-family: "Roboto Light";
}
.header-section {
    -fx-padding: 10px;
    -fx-font-size: 20px;
    -fx-background-color: teal;
}
.header-section Label{
    -fx-text-fill: #FFFFFF;
    -fx-font-size: 200%;
    -fx-padding: 10px;
}
.game {
    -fx-background-color: lightgray;
}
.cards{
    -fx-background-color: lightgreen
}
.players{
    -fx-background-color: lightblue;
}
.event {
    -fx-background-color: yellow;
}
.chat{
    -fx-background-color: lime;
}

我如何保持宽高比并根据分辨率拉伸窗格？例如。在1920x1080分辨率下，浅灰色应为1280x720。在800x600分辨率下，它是600x400。以及介于两者之间的一切。

Answer 1

所以经过大量的搜索，我终于找到了一个答案。

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

<?import java.net.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.stage.Screen?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="600" minWidth="800" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="nl.hsleiden.keesjes.controllers.GameController">
    <fx:define>
        <Screen fx:factory="getPrimary" fx:id="screen" />
    </fx:define>
    <stylesheets>
        <URL value="@../../../game.css" />
    </stylesheets>
    <top>
        <BorderPane styleClass="header-section">
            <left>
                <Button onAction="#showHowToPlay" prefHeight="75.0" prefWidth="175.0" text="HOWTOPLAY" textAlignment="CENTER" />
            </left>
            <center><Label text="Keezen" /></center>
            <right>
                <HBox spacing="5">
                    <Button onAction="#pauseGame" prefHeight="75.0" prefWidth="175.0" text="PAUSE GAME" textAlignment="CENTER" />
                    <Button onAction="#switchToMenu" prefHeight="75.0" prefWidth="175.0" text="LEAVE GAME" textAlignment="CENTER" />
                </HBox>
            </right>
        </BorderPane>
    </top>
    <center>
       <BorderPane fx:id="game" prefHeight="${screen.visualBounds.height}" prefWidth="${screen.visualBounds.width}" BorderPane.alignment="CENTER">
           <center>
               <BorderPane>
                   <center>
                       <Pane prefHeight="${game.height*0.8}" prefWidth="${game.width*0.8}" styleClass="game"/>
                   </center>
                   <bottom>
                       <Pane prefHeight="${game.height*0.2}" prefWidth="${game.width*0.8}" styleClass="cards" />
                   </bottom>
               </BorderPane>
           </center>
           <right>
               <VBox>
                   <Pane prefHeight="${game.height*0.4}" prefWidth="${game.width*0.2}" styleClass="players" />
                   <Pane prefHeight="${game.height*0.4}" prefWidth="${game.width*0.2}" styleClass="event" />
                   <Pane prefHeight="${game.height*0.2}" prefWidth="${game.width*0.2}" styleClass="chat" />
               </VBox>
           </right>
       </BorderPane>
   </center>
</BorderPane>

我最后做的是定义“游戏”部分的屏幕大小。这样，我就可以使用百分比（浮动）计算不同的部分，并使用边框窗格对齐项目。我得到了我要找的东西。