Question

所以我现在已经在网上搜索了大约2个小时而没有到达任何地方。我已经看过关于这个问题的多个帖子，我尝试了一些提供的解决方案，但似乎都没有用......或者我太无能力正确地实现它们了......

无论如何，如何在用户最大化窗口时调整元素/控件？

这是整个FXML文件：

<GridPane xmlns:fx="http://javafx.com/fxml/1" fx:controller="percolationapplication.controllers.Percolation">
    <!-- CUSTOM WINDOW CONTROLS -->
    <ToolBar fx:id="toolbar" onMousePressed="#moveableWindowOnMousePressed" onMouseDragged="#moveableWindowOnMouseDragged" prefHeight="25" minHeight="25" maxHeight="25"  GridPane.columnIndex="0" GridPane.rowIndex="0">
        <ImageView fitWidth="15" fitHeight="15" smooth="true">
            <image>
                <Image url="/resources/icon.png"/>
            </image>
        </ImageView>
        <Text styleClass="customWindowTitle" text="Percolation Simulation"/>
        <Pane HBox.hgrow="ALWAYS" />
        <Button fx:id="applicationMinimize" onAction="#minimizeWindow" text="_" styleClass="customWindowButtons"/>
        <Button fx:id="applicationMaximize" onAction="#maximizeWindow" text="O" styleClass="customWindowButtons"/>
        <Button fx:id="applicationClose" onAction="#closeWindow" text="X" styleClass="customWindowButtons"/>
    </ToolBar>

    <GridPane hgap="10" GridPane.columnIndex="0" GridPane.rowIndex="1">
        <!-- CANVAS -->
        <Canvas fx:id="canvas" height="700" width="1100" GridPane.columnIndex="0" GridPane.rowIndex="0"/>

        <!-- CONTROLS -->
        <GridPane hgap="10" vgap="10" GridPane.columnIndex="1" GridPane.rowIndex="0">
            <Label text="Number Of Sites:" GridPane.columnIndex="0" GridPane.rowIndex="0"/>
            <TextField fx:id="quantityInput" text="25" GridPane.columnIndex="1" GridPane.rowIndex="0"/>

            <Label text="Probability:" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
            <TextField fx:id="probabilityInput" text="0.6" GridPane.columnIndex="1" GridPane.rowIndex="1"/>

            <Label text="Algorithms:" GridPane.columnIndex="0" GridPane.rowIndex="2"/>
            <HBox spacing="10" GridPane.columnIndex="1" GridPane.rowIndex="2">
                <fx:define>
                    <ToggleGroup fx:id="algs"/>
                </fx:define>
                <RadioButton fx:id="algNormal" text="Normal" selected="true" toggleGroup="$algs"/>
                <RadioButton fx:id="algStack" text="Stack" toggleGroup="$algs"/>
            </HBox>

            <Label text="System Percolates:" GridPane.columnIndex="0" GridPane.rowIndex="3"/>
            <Label fx:id="outputPerc" GridPane.columnIndex="1" GridPane.rowIndex="3"/>

            <Button fx:id="perc" onAction="#handlePerc" text="Go" GridPane.columnIndex="0" GridPane.rowIndex="4"/>
        </GridPane>
        <padding>
            <Insets top="10" right="10" bottom="10" left="10"/>
        </padding>
    </GridPane>
    <stylesheets>
        <URL value="@/resources/style.css"/>
    </stylesheets>
</GridPane>

这是正常大小模式下的窗口：这是最大化模式的窗口。所有元素都应“向右”增长，只有画布应该到达底部：

Answer 1

您可以尝试使用此模板。您可能需要在ToolBar上设置高度。您还可能需要将最小，最大和首选宽度设置为右侧Panel

上的相同数字

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

<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>


<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <AnchorPane style="-fx-background-color: green;">
         <children>
            <Label alignment="CENTER" text="Remove this label and put your toolbar here" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
         </children>
      </AnchorPane>
      <HBox prefHeight="100.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
         <children>
            <AnchorPane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: blue;" HBox.hgrow="ALWAYS">
               <children>
                  <Label alignment="CENTER" layoutX="58.0" layoutY="50.0" text="Remove this label and put your picture here" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
               </children>
            </AnchorPane>
            <AnchorPane maxWidth="200.0" minWidth="200.0" prefWidth="200.0" style="-fx-background-color: yellow;">
               <children>
                  <Label alignment="CENTER" layoutY="40.0" text="Remove this label and put your right panel here" textAlignment="CENTER" wrapText="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
               </children>
            </AnchorPane>
         </children>
      </HBox>
   </children>
</VBox>

调整窗口大小时缩放/对齐场景中的元素

1 个答案: