窗口Resize时JavaFX场景元素的缩放与对齐方案问询

Hey there! I see you've been grinding away for 2 hours trying to get your UI to adapt when the window is maximized—let's fix that. The core issue with your current FXML is that most elements don't have proper growth constraints set, so they stay stuck at their fixed sizes even when the window expands. Here's the adjusted FXML and controller tweaks to make everything work as you want:

Updated FXML Code #

<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>

    <!-- Main Content GridPane - Fills all space below the toolbar -->
    <GridPane hgap="10" GridPane.columnIndex="0" GridPane.rowIndex="1" 
              GridPane.hgrow="ALWAYS" GridPane.vgrow="ALWAYS">
        <!-- CANVAS - Stretches both horizontally and vertically -->
        <Canvas fx:id="canvas" prefHeight="700" prefWidth="1100" 
                GridPane.columnIndex="0" GridPane.rowIndex="0"
                GridPane.hgrow="ALWAYS" GridPane.vgrow="ALWAYS"/>

        <!-- CONTROLS - Expands horizontally with the window -->
        <GridPane hgap="10" vgap="10" GridPane.columnIndex="1" GridPane.rowIndex="0"
                  GridPane.hgrow="ALWAYS">
            <Label text="Number Of Sites:" GridPane.columnIndex="0" GridPane.rowIndex="0"/>
            <!-- TextField stretches to fill column width -->
            <TextField fx:id="quantityInput" text="25" GridPane.columnIndex="1" GridPane.rowIndex="0"
                       GridPane.hgrow="ALWAYS"/>
            
            <Label text="Probability:" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
            <!-- Probability TextField also stretches -->
            <TextField fx:id="probabilityInput" text="0.6" GridPane.columnIndex="1" GridPane.rowIndex="1"
                       GridPane.hgrow="ALWAYS"/>
            
            <Label text="Algorithms:" GridPane.columnIndex="0" GridPane.rowIndex="2"/>
            <HBox spacing="10" GridPane.columnIndex="1" GridPane.rowIndex="2"
                  GridPane.hgrow="ALWAYS">
                <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"/>
            
            <!-- Go button spans both columns and fills the full width -->
            <Button fx:id="perc" onAction="#handlePerc" text="Go" GridPane.columnIndex="0" GridPane.rowIndex="4"
                    GridPane.columnSpan="2" GridPane.hgrow="ALWAYS"/>
        </GridPane>

        <padding>
            <Insets top="10" right="10" bottom="10" left="10"/>
        </padding>
    </GridPane>

    <stylesheets>
        <URL value="@/resources/style.css"/>
    </stylesheets>
</GridPane>

Key Changes Explained #

• Main Content GridPane: Added GridPane.hgrow="ALWAYS" and GridPane.vgrow="ALWAYS" to ensure it fills all available space below the toolbar when the window is maximized.
• Canvas: Removed fixed height/width (replaced with prefHeight/prefWidth for default sizing) and added growth constraints to make it stretch both horizontally and vertically.
• Control Elements: Applied GridPane.hgrow="ALWAYS" to the right-side control panel, TextFields, and radio button container so they expand horizontally. The "Go" button now spans both columns to fill the full width of the control area.

Controller Tweak for Canvas Redrawing #

When the Canvas resizes, you need to redraw your simulation content to fit the new dimensions. Add this to your controller:

@FXML
private Canvas canvas;
private GraphicsContext gc;

public void initialize() {
    gc = canvas.getGraphicsContext2D();
    // Listen for size changes to trigger a redraw
    canvas.widthProperty().addListener((obs, oldVal, newVal) -> redrawSimulation());
    canvas.heightProperty().addListener((obs, oldVal, newVal) -> redrawSimulation());
}

private void redrawSimulation() {
    // Clear the canvas first
    gc.clearRect(0, 0, canvas.getWidth(), canvas.getHeight());
    // Call your existing drawing logic here, using the new canvas dimensions
    // Example: drawPercolationGrid(canvas.getWidth(), canvas.getHeight());
}

This ensures your percolation simulation updates to fit the new Canvas size whenever the window is resized or maximized.

内容的提问来源于stack exchange，提问作者Equiphract