如何在 JavaFX 中缩放窗口时自动将窗格的内容居中？答案

【问题标题】：How can i automatically center the content of a pane while scaling the window in JavaFX?如何在 JavaFX 中缩放窗口时自动将窗格的内容居中？
【发布时间】：2016-08-14 13:38:27
【问题描述】：

我的 JavaFX 项目有点问题。这是 UI 的屏幕截图：

当我缩放窗口时，它看起来像这样：

我现在想使窗口的内容居中，但菜单栏和搜索栏的颜色应该在整个窗口上，就像在第二张图片上一样。

这是 UI 的 FXML 代码：

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

<?import javafx.scene.chart.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.*?>
<?import javafx.scene.web.*?>
<?import java.lang.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.text.Font?>


<StackPane prefHeight="900.0" prefWidth="1280.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ezmovie_prototype.controller_home">
   <children>
      <GridPane alignment="TOP_CENTER">
         <columnConstraints>
            <ColumnConstraints halignment="CENTER" hgrow="ALWAYS" prefWidth="1280.0" />
         </columnConstraints>
         <rowConstraints>
            <RowConstraints maxHeight="165.0" minHeight="165.0" prefHeight="165.0" vgrow="SOMETIMES" />
            <RowConstraints maxHeight="735.0" minHeight="735.0" prefHeight="735.0" vgrow="SOMETIMES" />
         </rowConstraints>
         <children>
            <GridPane alignment="TOP_CENTER" prefHeight="165.0" prefWidth="1280.0" GridPane.halignment="CENTER">
               <columnConstraints>
                  <ColumnConstraints halignment="CENTER" hgrow="ALWAYS" />
               </columnConstraints>
               <rowConstraints>
                  <RowConstraints maxHeight="100.0" minHeight="100.0" prefHeight="100.0" vgrow="SOMETIMES" />
                  <RowConstraints maxHeight="65.0" minHeight="65.0" prefHeight="65.0" vgrow="SOMETIMES" />
               </rowConstraints>
               <children>
                  <GridPane prefHeight="100.0" prefWidth="1080.0" style="-fx-background-color: #C60F25;" GridPane.halignment="CENTER">
                    <columnConstraints>
                        <ColumnConstraints fillWidth="false" hgrow="SOMETIMES" maxWidth="160.0" minWidth="160.0" percentWidth="0.0" prefWidth="160.0" />
                      <ColumnConstraints hgrow="SOMETIMES" maxWidth="920.0" minWidth="920.0" percentWidth="0.0" prefWidth="920.0" />
                      <ColumnConstraints hgrow="SOMETIMES" maxWidth="200.0" minWidth="200.0" prefWidth="200.0" />
                    </columnConstraints>
                    <rowConstraints>
                      <RowConstraints maxHeight="100.0" minHeight="100.0" prefHeight="100.0" vgrow="SOMETIMES" />
                    </rowConstraints>
                     <children>
                        <TextField maxHeight="-Infinity" maxWidth="920.0" minHeight="-Infinity" minWidth="760.0" nodeOrientation="LEFT_TO_RIGHT" prefHeight="40.0" prefWidth="920.0" promptText="Suche nach Film, Serien..." GridPane.columnIndex="1" GridPane.halignment="LEFT" GridPane.valignment="TOP">
                           <font>
                              <Font size="20.0" />
                           </font>
                           <GridPane.margin>
                              <Insets top="30.0" />
                           </GridPane.margin>
                        </TextField>
                        <Button fx:id="btnSuchen" maxHeight="-Infinity" maxWidth="160.0" minHeight="-Infinity" minWidth="160.0" mnemonicParsing="false" onAction="#test" prefHeight="40.0" prefWidth="160.0" style="-fx-background-color: #FFFFFF;" text="Suchen" GridPane.columnIndex="2" GridPane.halignment="LEFT" GridPane.valignment="TOP">
                           <GridPane.margin>
                              <Insets left="20.0" top="30.0" />
                           </GridPane.margin>
                           <font>
                              <Font name="System Bold" size="20.0" />
                           </font>
                        </Button>
                        <Button maxHeight="70.0" maxWidth="130.0" minHeight="70.0" minWidth="130.0" mnemonicParsing="false" prefHeight="70.0" prefWidth="130.0" text="Button" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
                           <effect>
                              <ImageInput>
                                 <source>
                                    <Image url="file:/C:/Users/Administrator/workspace/ezmovie_prototype/data/icons/logo.png" />
                                 </source>
                              </ImageInput>
                           </effect>
                        </Button>
                     </children>
                  </GridPane>
                  <GridPane prefHeight="65.0" prefWidth="1280.0" style="-fx-background-color: #585858;" GridPane.halignment="CENTER" GridPane.rowIndex="1">
                    <columnConstraints>
                      <ColumnConstraints hgrow="SOMETIMES" maxWidth="100.0" minWidth="90.0" prefWidth="90.0" />
                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="100.0" minWidth="100.0" prefWidth="100.0" />
                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="100.0" minWidth="100.0" prefWidth="100.0" />
                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="100.0" minWidth="100.0" prefWidth="100.0" />
                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="100.0" minWidth="100.0" prefWidth="100.0" />
                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="580.0" minWidth="580.0" prefWidth="580.0" />
                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="100.0" minWidth="0.0" prefWidth="0.0" />
                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="100.0" minWidth="100.0" prefWidth="100.0" />
                    </columnConstraints>
                    <rowConstraints>
                      <RowConstraints maxHeight="65.0" minHeight="65.0" prefHeight="65.0" vgrow="SOMETIMES" />
                    </rowConstraints>
                     <children>
                        <Button fx:id="btnHome" alignment="CENTER" contentDisplay="RIGHT" maxHeight="60.0" maxWidth="60.0" minHeight="60.0" minWidth="60.0" mnemonicParsing="false" onAction="#test" prefHeight="60.0" prefWidth="60.0" text="Home" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
                           <effect>
                              <ImageInput>
                                 <source>
                                    <Image url="file:/C:/Users/Administrator/workspace/ezmovie_prototype/data/icons/home.png" />
                                 </source>
                              </ImageInput>
                           </effect>
                           <GridPane.margin>
                              <Insets />
                           </GridPane.margin>
                        </Button>
                        <Button fx:id="btnFavoriten" alignment="CENTER" contentDisplay="RIGHT" maxHeight="60.0" maxWidth="60.0" minHeight="60.0" minWidth="60.0" mnemonicParsing="false" onAction="#test" prefHeight="60.0" prefWidth="60.0" text="Home" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
                           <effect>
                              <ImageInput>
                                 <source>
                                    <Image url="file:/C:/Users/Administrator/workspace/ezmovie_prototype/data/icons/favoriten.png" />
                                 </source>
                              </ImageInput>
                           </effect>
                        </Button>
                        <Button fx:id="btnListen" alignment="CENTER" contentDisplay="RIGHT" maxHeight="0.0" maxWidth="60.0" minHeight="60.0" minWidth="60.0" mnemonicParsing="false" onAction="#test" prefHeight="60.0" prefWidth="60.0" text="Home" GridPane.columnIndex="4" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
                           <effect>
                              <ImageInput>
                                 <source>
                                    <Image url="file:/C:/Users/Administrator/workspace/ezmovie_prototype/data/icons/list.png" />
                                 </source>
                              </ImageInput>
                           </effect>
                        </Button>
                        <Button fx:id="btnSerien" alignment="CENTER" contentDisplay="RIGHT" maxHeight="60.0" maxWidth="60.0" minHeight="60.0" minWidth="60.0" mnemonicParsing="false" onAction="#test" prefHeight="60.0" prefWidth="60.0" text="Home" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
                           <effect>
                              <ImageInput>
                                 <source>
                                    <Image url="file:/C:/Users/Administrator/workspace/ezmovie_prototype/data/icons/series.png" />
                                 </source>
                              </ImageInput>
                           </effect>
                        </Button>
                        <Button fx:id="btnFilme" alignment="CENTER" contentDisplay="RIGHT" maxHeight="60.0" maxWidth="60.0" minHeight="60.0" minWidth="60.0" mnemonicParsing="false" onAction="#test" prefHeight="60.0" prefWidth="60.0" text="Home" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
                           <effect>
                              <ImageInput>
                                 <source>
                                    <Image url="file:/C:/Users/Administrator/workspace/ezmovie_prototype/data/icons/movies.png" />
                                 </source>
                              </ImageInput>
                           </effect>
                        </Button>
                        <Button fx:id="btnLogout" alignment="CENTER" contentDisplay="RIGHT" maxHeight="0.0" maxWidth="60.0" minHeight="60.0" minWidth="60.0" mnemonicParsing="false" onAction="#logout" prefHeight="60.0" prefWidth="60.0" text="Home" GridPane.columnIndex="7" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
                           <effect>
                              <ImageInput>
                                 <source>
                                    <Image url="file:/C:/Users/Administrator/workspace/ezmovie_prototype/data/icons/logout.png" />
                                 </source>
                              </ImageInput>
                           </effect>
                        </Button>
                        <Button fx:id="btnSettings" alignment="CENTER" contentDisplay="RIGHT" maxHeight="0.0" maxWidth="60.0" minHeight="60.0" minWidth="60.0" mnemonicParsing="false" onAction="#test" prefHeight="60.0" prefWidth="60.0" text="Home" GridPane.columnIndex="6" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
                           <effect>
                              <ImageInput>
                                 <source>
                                    <Image url="file:/C:/Users/Administrator/workspace/ezmovie_prototype/data/icons/settings.png" />
                                 </source>
                              </ImageInput>
                           </effect>
                        </Button>
                     </children>
                  </GridPane>
               </children>
            </GridPane>
            <BorderPane prefHeight="715.0" prefWidth="1280.0" style="-fx-background-color: FFFFFF;" GridPane.halignment="CENTER" GridPane.rowIndex="1">
               <center>
                  <GridPane style="-fx-background-color: #FFFFFF;" BorderPane.alignment="CENTER">
                    <columnConstraints>
                      <ColumnConstraints hgrow="SOMETIMES" maxWidth="1280.0" minWidth="1280.0" prefWidth="1280.0" />
                    </columnConstraints>
                    <rowConstraints>
                        <RowConstraints maxHeight="65.0" minHeight="65.0" prefHeight="65.0" vgrow="SOMETIMES" />
                      <RowConstraints maxHeight="280.0" minHeight="280.0" prefHeight="280.0" vgrow="SOMETIMES" />
                      <RowConstraints maxHeight="65.0" minHeight="65.0" prefHeight="65.0" vgrow="SOMETIMES" />
                      <RowConstraints maxHeight="280.0" minHeight="280.0" prefHeight="280.0" vgrow="SOMETIMES" />
                    </rowConstraints>
                     <children>
                        <BorderPane prefHeight="230.0" prefWidth="1130.0" style="-fx-border-color: #000000; -fx-border-radius: 10px;" GridPane.rowIndex="1">
                           <opaqueInsets>
                              <Insets bottom="10.0" top="10.0" />
                           </opaqueInsets>
                           <GridPane.margin>
                              <Insets bottom="10.0" left="20.0" right="20.0" top="10.0" />
                           </GridPane.margin>
                           <center>
                              <GridPane maxHeight="200.0" maxWidth="1200.0" minHeight="200.0" minWidth="1200.0" prefHeight="200.0" prefWidth="1200.0" BorderPane.alignment="CENTER">
                                <columnConstraints>
                                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                </columnConstraints>
                                <rowConstraints>
                                  <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                                </rowConstraints>
                                 <BorderPane.margin>
                                    <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
                                 </BorderPane.margin>
                              </GridPane>
                           </center>
                           <bottom>
                              <ScrollBar BorderPane.alignment="CENTER">
                                 <BorderPane.margin>
                                    <Insets bottom="5.0" left="10.0" right="10.0" />
                                 </BorderPane.margin>
                              </ScrollBar>
                           </bottom>
                        </BorderPane>
                        <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Beliebte Filme" GridPane.halignment="LEFT" GridPane.valignment="TOP">
                           <GridPane.margin>
                              <Insets left="20.0" top="20.0" />
                           </GridPane.margin>
                           <font>
                              <Font name="System Bold" size="36.0" />
                           </font>
                        </Text>
                        <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Beliebte Filme" GridPane.halignment="LEFT" GridPane.rowIndex="2" GridPane.valignment="TOP">
                           <font>
                              <Font name="System Bold" size="36.0" />
                           </font>
                           <GridPane.margin>
                              <Insets left="20.0" top="20.0" />
                           </GridPane.margin>
                        </Text>
                        <BorderPane prefHeight="230.0" prefWidth="1130.0" style="-fx-border-color: #000000; -fx-border-radius: 10px;" GridPane.rowIndex="3">
                           <GridPane.margin>
                              <Insets bottom="10.0" left="20.0" right="20.0" top="10.0" />
                           </GridPane.margin>
                           <center>
                              <GridPane maxHeight="200.0" maxWidth="1200.0" minHeight="200.0" minWidth="1200.0" prefHeight="200.0" prefWidth="1200.0" BorderPane.alignment="CENTER">
                                <columnConstraints>
                                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                </columnConstraints>
                                <rowConstraints>
                                  <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                                </rowConstraints>
                                 <BorderPane.margin>
                                    <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
                                 </BorderPane.margin>
                              </GridPane>
                           </center>
                           <bottom>
                              <ScrollBar BorderPane.alignment="CENTER">
                                 <BorderPane.margin>
                                    <Insets bottom="5.0" left="10.0" right="10.0" />
                                 </BorderPane.margin>
                              </ScrollBar>
                           </bottom>
                        </BorderPane>
                     </children>
                  </GridPane>
               </center>
            </BorderPane>
         </children>
      </GridPane>
   </children>
</StackPane>

我是 JavaFX 新手，我需要为学校项目编写这个程序。

任何建议表示赞赏，谢谢，蒂莫

编辑：例如，它应该像在 css 中使用这个命令一样工作：

margin: auto;

谢谢你:)

【问题讨论】：

没有测试它，我认为问题是宽度属性。我试了一下，用maxWidth="9999.0" 替换了一些maxWidth="1280.0"（你应该在这里使用Double 常量MAX_VALUE！）。另外请记住，设置 minWidth 属性会导致 UI 无法缩放到小于该值。您应该尽量减少宽度和高度属性的固定设置，尤其是当您组合它们时（并且具有相同的值，例如 min、pref 和 max，总是很可疑）。如果适用，请随时查看hgrow 和vgrow。
您对GridPanes 的不健康痴迷从何而来？说真的，GridPanes 内有 GridPanes，GridPanes 内有 GridPanes，这是你的 ui 设计缺陷的一个很好的指标。你也经常使用BorderPane，一个简单的VBox 就足够了。更喜欢更简单的 UI 结构而不是实现相同效果的复杂 UI 结构。还将重复的部分移动到不同的 fxml 文件以删除所需的代码量。如有必要，您仍然可以使用嵌套控制器访问这些元素。
@fabian，我不知道，在学校我们了解了“GridPane”和“BorderPane”。我真的不知道 FX 中所有窗格的区别。对我来说，这只是使用这些窗格的最简单方法，因为我已经知道它们了。但我明白了，我必须告诉我更多关于这一点的信息！你对我有什么建议吗？亲切的问候，蒂莫

标签： java javafx resize alignment fxml

【解决方案1】：

您的 fxml 中有几处需要更改：

不要使用那么多GridPanes。在将GridPane 放入GridPane 之前请三思。还有其他更适合此目的的布局。
您基本上重复了 Beliebte Filme 部分两次，这不仅会增加 fxml 文件的大小，而且如果您需要同时更改它们，则需要编辑 2 个节点。请改用<fx:include> 和嵌套控制器。
您使用图像的绝对文件路径。这适用于您的 PC，但一旦您提交项目，这很可能会停止工作。将这些图像放入您提交的 jar 并使用相对于 fxml 的 url
如果您使用 css 文件来设置内容样式，则 fxml 文件中需要的重复更少。

关于内容的放置：将其放在Group 中（如果还不是单个Node）并使用alignment="CENTER" 或alignment="TOP_CENTER"。

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

<?import java.net.URL?>
<?import javafx.scene.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.text.Font?>

<BorderPane xmlns:fx="http://javafx.com/fxml/1" id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" fx:controller="ezmovie_prototype.controller_home">
    <stylesheets>
        <URL value="@style.css" />
    </stylesheets>
    <top>
        <VBox fillWidth="true">
            <children>
                <HBox styleClass="search-bar">
                    <ImageView fitWidth="130" fitHeight="70" preserveRatio="true">
                        <Image url="@data/icons/logo.png" />
                    </ImageView>
                    <TextField maxHeight="-Infinity" maxWidth="920.0" minHeight="-Infinity" minWidth="760.0" prefHeight="40.0" prefWidth="920.0" promptText="Suche nach Film, Serien..." VBox.vgrow="SOMETIMES" >
                        <font>
                            <Font size="20.0" />
                        </font>
                        <HBox.margin>
                            <Insets top="30.0" />
                        </HBox.margin>
                    </TextField>
                    <Button fx:id="btnSuchen" maxHeight="-Infinity" maxWidth="160.0" minHeight="-Infinity" minWidth="160.0" mnemonicParsing="false" onAction="#test" prefHeight="40.0" prefWidth="160.0" style="-fx-background-color: #FFFFFF;" text="Suchen">
                        <HBox.margin>
                            <Insets left="20.0" top="30.0" />
                        </HBox.margin>
                        <font>
                            <Font name="System Bold" size="20.0" />
                        </font>
                    </Button>
                </HBox>
                <HBox styleClass="tool-bar" maxHeight="80">
                    <children>
                        <Button fx:id="btnHome" mnemonicParsing="false" onAction="#test" text="Home">
                            <graphic>
                                <ImageView fitHeight="30" preserveRatio="true">
                                    <image>
                                        <Image url="@data/icons/home.png" />
                                    </image>
                                </ImageView>
                            </graphic>
                        </Button>
                        <Button fx:id="btnFavoriten" mnemonicParsing="false" onAction="#test" text="Favoriten">
                            <graphic>
                                <ImageView fitHeight="30" preserveRatio="true">
                                    <image>
                                        <Image url="@data/icons/favoriten.png" />
                                    </image>
                                </ImageView>
                            </graphic>
                        </Button>
                        <Button fx:id="btnFilme" mnemonicParsing="false" onAction="#test" text="Filme">
                            <graphic>
                                <ImageView fitHeight="30" preserveRatio="true">
                                    <image>
                                        <Image url="@data/icons/movies.png" />
                                    </image>
                                </ImageView>
                            </graphic>
                        </Button>
                        <Button fx:id="btnSerien" mnemonicParsing="false" onAction="#test" text="Serien">
                            <graphic>
                                <ImageView fitHeight="30" preserveRatio="true">
                                    <image>
                                        <Image url="@data/icons/series.png" />
                                    </image>
                                </ImageView>
                            </graphic>
                        </Button>
                        <Button fx:id="btnListen" mnemonicParsing="false" onAction="#test" text="Listen">
                            <graphic>
                                <ImageView fitHeight="30" preserveRatio="true">
                                    <image>
                                        <Image url="@data/icons/list.png" />
                                    </image>
                                </ImageView>
                            </graphic>
                        </Button>
                        <Region VBox.vgrow="ALWAYS" prefWidth="9E10" prefHeight="1"></Region><!-- Just a empty placeholder for spacing -->
                        <Button fx:id="btnSettings" mnemonicParsing="false" onAction="#test" text="Settings">
                            <graphic>
                                <ImageView fitHeight="30" preserveRatio="true">
                                    <image>
                                        <Image url="@data/icons/settings.png" />
                                    </image>
                                </ImageView>
                            </graphic>
                        </Button>
                        <Button fx:id="btnLogout" mnemonicParsing="false" onAction="#logout" text="Logout">
                            <graphic>
                                <ImageView fitHeight="30" preserveRatio="true">
                                    <image>
                                        <Image url="@data/icons/logout.png" />
                                    </image>
                                </ImageView>
                            </graphic>
                        </Button>
                    </children>
                </HBox>
            </children>
        </VBox>
    </top>
    <center>
        <VBox alignment="TOP_CENTER" fillWidth="false" >
            <children>
                <fx:include fx:id="film1" source="film.fxml" />
                <fx:include fx:id="film2" source="film.fxml" />
            </children>
        </VBox>
    </center>
</BorderPane>

style.css

.tool-bar {
    -fx-background-color: #585858;
}

.tool-bar > .button {
    -fx-text-fill: white;
    -fx-background-color: transparent;
    -fx-content-display: top;
    -fx-max-width: 60;
    -fx-min-width: 60;
    -fx-max-height: 60;
    -fx-min-height: 60;
    -fx-shape: "M0,0H1V1H0Z";
}

.tool-bar > .button:hover {
    -fx-background-color: #777;
}

.search-bar {
    -fx-alignment: center-left;
    -fx-background-color: #C60F25;
    -fx-max-height: 100;
    -fx-min-height: 100;
}

.search-bar > * {
    -fx-margin: 100;
}

.films > .content {
    -fx-border-color: black;
    -fx-border-radius: 10px;
}

电影.fxml

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

<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.text.*?>

<VBox styleClass="films" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ezmovie_prototype.FilmController">
    <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Beliebte Filme">
        <VBox.margin>
            <Insets left="20.0" top="20.0" />
        </VBox.margin>
        <font>
            <Font name="System Bold" size="36.0" />
        </font>
    </Text>
    <BorderPane styleClass="content" prefHeight="230.0" prefWidth="1130.0">
        <VBox.margin>
            <Insets bottom="10.0" left="20.0" right="20.0" top="10.0" />
        </VBox.margin>
        <center>
            <GridPane maxHeight="200.0" maxWidth="1200.0" minHeight="200.0" minWidth="1200.0" prefHeight="200.0" prefWidth="1200.0" BorderPane.alignment="CENTER">
                <columnConstraints>
                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                </columnConstraints>
                <rowConstraints>
                    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                </rowConstraints>
                <BorderPane.margin>
                    <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
                </BorderPane.margin>
            </GridPane>
        </center>
        <bottom>
            <ScrollBar BorderPane.alignment="CENTER">
                <BorderPane.margin>
                    <Insets bottom="5.0" left="10.0" right="10.0" />
                </BorderPane.margin>
            </ScrollBar>
        </bottom>
    </BorderPane>
</VBox>

控制器

@FXML
private FilmController film1Controller;
@FXML
private FilmController film2Controller;

【讨论】：

很好，@fabian - 我还没有时间进一步研究它，所以很高兴你能站出来！

【解决方案2】：

我在代码中的每个位置都将maxWidth="1280.0" 替换为maxWidth="9999.0"：

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

<?import javafx.scene.chart.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.*?>
<?import javafx.scene.web.*?>
<?import java.lang.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.text.Font?>


<StackPane prefHeight="900.0" prefWidth="1280.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ezmovie_prototype.controller_home">
   <children>
      <GridPane alignment="TOP_CENTER">
         <columnConstraints>
            <ColumnConstraints halignment="CENTER" hgrow="ALWAYS" prefWidth="1280.0" />
         </columnConstraints>
         <rowConstraints>
            <RowConstraints maxHeight="165.0" minHeight="165.0" prefHeight="165.0" vgrow="SOMETIMES" />
            <RowConstraints maxHeight="735.0" minHeight="735.0" prefHeight="735.0" vgrow="SOMETIMES" />
         </rowConstraints>
         <children>
            <GridPane alignment="TOP_CENTER" prefHeight="165.0" prefWidth="1280.0" GridPane.halignment="CENTER">
               <columnConstraints>
                  <ColumnConstraints halignment="CENTER" hgrow="ALWAYS" />
               </columnConstraints>
               <rowConstraints>
                  <RowConstraints maxHeight="100.0" minHeight="100.0" prefHeight="100.0" vgrow="SOMETIMES" />
                  <RowConstraints maxHeight="65.0" minHeight="65.0" prefHeight="65.0" vgrow="SOMETIMES" />
               </rowConstraints>
               <children>
                  <GridPane prefHeight="100.0" prefWidth="1080.0" style="-fx-background-color: #C60F25;" GridPane.halignment="CENTER">
                    <columnConstraints>
                        <ColumnConstraints fillWidth="false" hgrow="SOMETIMES" maxWidth="160.0" minWidth="160.0" percentWidth="0.0" prefWidth="160.0" />
                      <ColumnConstraints hgrow="SOMETIMES" maxWidth="920.0" minWidth="920.0" percentWidth="0.0" prefWidth="920.0" />
                      <ColumnConstraints hgrow="SOMETIMES" maxWidth="200.0" minWidth="200.0" prefWidth="200.0" />
                    </columnConstraints>
                    <rowConstraints>
                      <RowConstraints maxHeight="100.0" minHeight="100.0" prefHeight="100.0" vgrow="SOMETIMES" />
                    </rowConstraints>
                     <children>
                        <TextField maxHeight="-Infinity" maxWidth="920.0" minHeight="-Infinity" minWidth="760.0" nodeOrientation="LEFT_TO_RIGHT" prefHeight="40.0" prefWidth="920.0" promptText="Suche nach Film, Serien..." GridPane.columnIndex="1" GridPane.halignment="LEFT" GridPane.valignment="TOP">
                           <font>
                              <Font size="20.0" />
                           </font>
                           <GridPane.margin>
                              <Insets top="30.0" />
                           </GridPane.margin>
                        </TextField>
                        <Button fx:id="btnSuchen" maxHeight="-Infinity" maxWidth="160.0" minHeight="-Infinity" minWidth="160.0" mnemonicParsing="false" onAction="#test" prefHeight="40.0" prefWidth="160.0" style="-fx-background-color: #FFFFFF;" text="Suchen" GridPane.columnIndex="2" GridPane.halignment="LEFT" GridPane.valignment="TOP">
                           <GridPane.margin>
                              <Insets left="20.0" top="30.0" />
                           </GridPane.margin>
                           <font>
                              <Font name="System Bold" size="20.0" />
                           </font>
                        </Button>
                        <Button maxHeight="70.0" maxWidth="130.0" minHeight="70.0" minWidth="130.0" mnemonicParsing="false" prefHeight="70.0" prefWidth="130.0" text="Button" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
                           <effect>
                              <ImageInput>
                                 <source>
                                    <Image url="file:/C:/Users/Administrator/workspace/ezmovie_prototype/data/icons/logo.png" />
                                 </source>
                              </ImageInput>
                           </effect>
                        </Button>
                     </children>
                  </GridPane>
                  <GridPane prefHeight="65.0" prefWidth="1280.0" style="-fx-background-color: #585858;" GridPane.halignment="CENTER" GridPane.rowIndex="1">
                    <columnConstraints>
                      <ColumnConstraints hgrow="SOMETIMES" maxWidth="100.0" minWidth="90.0" prefWidth="90.0" />
                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="100.0" minWidth="100.0" prefWidth="100.0" />
                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="100.0" minWidth="100.0" prefWidth="100.0" />
                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="100.0" minWidth="100.0" prefWidth="100.0" />
                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="100.0" minWidth="100.0" prefWidth="100.0" />
                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="580.0" minWidth="580.0" prefWidth="580.0" />
                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="100.0" minWidth="0.0" prefWidth="0.0" />
                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="100.0" minWidth="100.0" prefWidth="100.0" />
                    </columnConstraints>
                    <rowConstraints>
                      <RowConstraints maxHeight="65.0" minHeight="65.0" prefHeight="65.0" vgrow="SOMETIMES" />
                    </rowConstraints>
                     <children>
                        <Button fx:id="btnHome" alignment="CENTER" contentDisplay="RIGHT" maxHeight="60.0" maxWidth="60.0" minHeight="60.0" minWidth="60.0" mnemonicParsing="false" onAction="#test" prefHeight="60.0" prefWidth="60.0" text="Home" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
                           <effect>
                              <ImageInput>
                                 <source>
                                    <Image url="file:/C:/Users/Administrator/workspace/ezmovie_prototype/data/icons/home.png" />
                                 </source>
                              </ImageInput>
                           </effect>
                           <GridPane.margin>
                              <Insets />
                           </GridPane.margin>
                        </Button>
                        <Button fx:id="btnFavoriten" alignment="CENTER" contentDisplay="RIGHT" maxHeight="60.0" maxWidth="60.0" minHeight="60.0" minWidth="60.0" mnemonicParsing="false" onAction="#test" prefHeight="60.0" prefWidth="60.0" text="Home" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
                           <effect>
                              <ImageInput>
                                 <source>
                                    <Image url="file:/C:/Users/Administrator/workspace/ezmovie_prototype/data/icons/favoriten.png" />
                                 </source>
                              </ImageInput>
                           </effect>
                        </Button>
                        <Button fx:id="btnListen" alignment="CENTER" contentDisplay="RIGHT" maxHeight="0.0" maxWidth="60.0" minHeight="60.0" minWidth="60.0" mnemonicParsing="false" onAction="#test" prefHeight="60.0" prefWidth="60.0" text="Home" GridPane.columnIndex="4" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
                           <effect>
                              <ImageInput>
                                 <source>
                                    <Image url="file:/C:/Users/Administrator/workspace/ezmovie_prototype/data/icons/list.png" />
                                 </source>
                              </ImageInput>
                           </effect>
                        </Button>
                        <Button fx:id="btnSerien" alignment="CENTER" contentDisplay="RIGHT" maxHeight="60.0" maxWidth="60.0" minHeight="60.0" minWidth="60.0" mnemonicParsing="false" onAction="#test" prefHeight="60.0" prefWidth="60.0" text="Home" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
                           <effect>
                              <ImageInput>
                                 <source>
                                    <Image url="file:/C:/Users/Administrator/workspace/ezmovie_prototype/data/icons/series.png" />
                                 </source>
                              </ImageInput>
                           </effect>
                        </Button>
                        <Button fx:id="btnFilme" alignment="CENTER" contentDisplay="RIGHT" maxHeight="60.0" maxWidth="60.0" minHeight="60.0" minWidth="60.0" mnemonicParsing="false" onAction="#test" prefHeight="60.0" prefWidth="60.0" text="Home" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
                           <effect>
                              <ImageInput>
                                 <source>
                                    <Image url="file:/C:/Users/Administrator/workspace/ezmovie_prototype/data/icons/movies.png" />
                                 </source>
                              </ImageInput>
                           </effect>
                        </Button>
                        <Button fx:id="btnLogout" alignment="CENTER" contentDisplay="RIGHT" maxHeight="0.0" maxWidth="60.0" minHeight="60.0" minWidth="60.0" mnemonicParsing="false" onAction="#logout" prefHeight="60.0" prefWidth="60.0" text="Home" GridPane.columnIndex="7" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
                           <effect>
                              <ImageInput>
                                 <source>
                                    <Image url="file:/C:/Users/Administrator/workspace/ezmovie_prototype/data/icons/logout.png" />
                                 </source>
                              </ImageInput>
                           </effect>
                        </Button>
                        <Button fx:id="btnSettings" alignment="CENTER" contentDisplay="RIGHT" maxHeight="0.0" maxWidth="60.0" minHeight="60.0" minWidth="60.0" mnemonicParsing="false" onAction="#test" prefHeight="60.0" prefWidth="60.0" text="Home" GridPane.columnIndex="6" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
                           <effect>
                              <ImageInput>
                                 <source>
                                    <Image url="file:/C:/Users/Administrator/workspace/ezmovie_prototype/data/icons/settings.png" />
                                 </source>
                              </ImageInput>
                           </effect>
                        </Button>
                     </children>
                  </GridPane>
               </children>
            </GridPane>
            <BorderPane prefHeight="715.0" prefWidth="1280.0" style="-fx-background-color: FFFFFF;" GridPane.halignment="CENTER" GridPane.rowIndex="1">
               <center>
                  <GridPane style="-fx-background-color: #FFFFFF;" BorderPane.alignment="CENTER">
                    <columnConstraints>
                      <ColumnConstraints hgrow="SOMETIMES" maxWidth="9999.0" minWidth="1280.0" prefWidth="1280.0" />
                    </columnConstraints>
                    <rowConstraints>
                        <RowConstraints maxHeight="65.0" minHeight="65.0" prefHeight="65.0" vgrow="SOMETIMES" />
                      <RowConstraints maxHeight="280.0" minHeight="280.0" prefHeight="280.0" vgrow="SOMETIMES" />
                      <RowConstraints maxHeight="65.0" minHeight="65.0" prefHeight="65.0" vgrow="SOMETIMES" />
                      <RowConstraints maxHeight="280.0" minHeight="280.0" prefHeight="280.0" vgrow="SOMETIMES" />
                    </rowConstraints>
                     <children>
                        <BorderPane prefHeight="230.0" prefWidth="1130.0" style="-fx-border-color: #000000; -fx-border-radius: 10px;" GridPane.rowIndex="1">
                           <opaqueInsets>
                              <Insets bottom="10.0" top="10.0" />
                           </opaqueInsets>
                           <GridPane.margin>
                              <Insets bottom="10.0" left="20.0" right="20.0" top="10.0" />
                           </GridPane.margin>
                           <center>
                              <GridPane maxHeight="200.0" maxWidth="1200.0" minHeight="200.0" minWidth="1200.0" prefHeight="200.0" prefWidth="1200.0" BorderPane.alignment="CENTER">
                                <columnConstraints>
                                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                </columnConstraints>
                                <rowConstraints>
                                  <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                                </rowConstraints>
                                 <BorderPane.margin>
                                    <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
                                 </BorderPane.margin>
                              </GridPane>
                           </center>
                           <bottom>
                              <ScrollBar BorderPane.alignment="CENTER">
                                 <BorderPane.margin>
                                    <Insets bottom="5.0" left="10.0" right="10.0" />
                                 </BorderPane.margin>
                              </ScrollBar>
                           </bottom>
                        </BorderPane>
                        <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Beliebte Filme" GridPane.halignment="LEFT" GridPane.valignment="TOP">
                           <GridPane.margin>
                              <Insets left="20.0" top="20.0" />
                           </GridPane.margin>
                           <font>
                              <Font name="System Bold" size="36.0" />
                           </font>
                        </Text>
                        <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Beliebte Filme" GridPane.halignment="LEFT" GridPane.rowIndex="2" GridPane.valignment="TOP">
                           <font>
                              <Font name="System Bold" size="36.0" />
                           </font>
                           <GridPane.margin>
                              <Insets left="20.0" top="20.0" />
                           </GridPane.margin>
                        </Text>
                        <BorderPane prefHeight="230.0" prefWidth="1130.0" style="-fx-border-color: #000000; -fx-border-radius: 10px;" GridPane.rowIndex="3">
                           <GridPane.margin>
                              <Insets bottom="10.0" left="20.0" right="20.0" top="10.0" />
                           </GridPane.margin>
                           <center>
                              <GridPane maxHeight="200.0" maxWidth="1200.0" minHeight="200.0" minWidth="1200.0" prefHeight="200.0" prefWidth="1200.0" BorderPane.alignment="CENTER">
                                <columnConstraints>
                                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                </columnConstraints>
                                <rowConstraints>
                                  <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                                </rowConstraints>
                                 <BorderPane.margin>
                                    <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
                                 </BorderPane.margin>
                              </GridPane>
                           </center>
                           <bottom>
                              <ScrollBar BorderPane.alignment="CENTER">
                                 <BorderPane.margin>
                                    <Insets bottom="5.0" left="10.0" right="10.0" />
                                 </BorderPane.margin>
                              </ScrollBar>
                           </bottom>
                        </BorderPane>
                     </children>
                  </GridPane>
               </center>
            </BorderPane>
         </children>
      </GridPane>
   </children>
</StackPane>

这对我有用。

请记住我对您的问题的评论。

编辑：我需要删除控制器的链接，否则我将无法对其进行测试，所以不要只是将其复制并粘贴回您的应用程序，好吗？

【讨论】：

啊，我猜，这不是你想要的。我重读了它，您想将内容居中。恕我直言，您的 UI 过于复杂，应该简化（或至少解耦为几个 FXML 文件（然后可以通过 fx:includes 将其放在一个文件中。我可能会尝试至少简化它。
感谢您的帮助！如果您能告诉我如何实现这个 fx:includes，我将不胜感激。我听了更紧张！关于，蒂莫