JavaFX GridPane单元格按钮间距过大问题求助

Let's break down the issues you're facing and fix them step by step:

Key Problems Identified #

1. Extra Spacing Between Buttons: Your GridPane is mixing FXML-defined column/row constraints with code-added ones, plus using 85% instead of 100% for column/row widths/heights—this leaves unused space between buttons. The button's Vgrow/Hgrow set to ALWAYS also forces extra empty space around your fixed-size buttons.
2. Buttons Not Centered in Grid: The GridPane itself is set to TOP_CENTER alignment, pushing the entire grid to the top instead of centering it within the available parent space.
3. Button Overlap on Window Shrink: Without a minimum size or scrollable container, the GridPane shrinks beyond the total button dimensions when the window gets too small, causing button overlap.

Step-by-Step Fixes #

1. Clean Up GridPane Constraints

First, clear the default column/row constraints from your FXML to avoid conflicts with code-generated ones:

// Add this before adding new constraints
bCont.TheBoard.getColumnConstraints().clear();
bCont.TheBoard.getRowConstraints().clear();

2. Correct Column/Row Percentage Sizing

Use 100% divided by the number of columns/rows to ensure the GridPane's space is fully utilized, no gaps included:

ColumnConstraints constraints = new ColumnConstraints();
constraints.setPercentWidth(100.0 / columns);
constraints.setHgrow(Priority.ALWAYS); // Let columns fill available width

RowConstraints rowconst = new RowConstraints();
rowconst.setPercentHeight(100.0 / rows);
rowconst.setVgrow(Priority.ALWAYS); // Let rows fill available height

3. Adjust Button Layout Properties

Since your buttons have a fixed size (30x30), remove the Vgrow/Hgrow settings that force extra space around them:

// Remove these lines entirely:
// GridPane.setVgrow(b, Priority.ALWAYS); 
// GridPane.setHgrow(b, Priority.ALWAYS);

4. Center the GridPane

Update the GridPane's alignment to center it within its parent (you can do this in FXML or code):

• FXML Change:

  <GridPane fx:id="TheBoard" alignment="CENTER" ...>
  

• Code Change:

  bCont.TheBoard.setAlignment(Pos.CENTER);
  

5. Remove Unnecessary Padding

Ensure the GridPane has no padding around its edges to eliminate extra space at the grid's borders:

bCont.TheBoard.setPadding(new Insets(0));

6. Fix Window Shrink Overlap

Wrap your GridPane in a ScrollPane to prevent button overlap when the window is too small. Modify your FXML like this:

<ScrollPane layoutX="200.0" layoutY="118.0" AnchorPane.bottomAnchor="90.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
    <GridPane fx:id="TheBoard" alignment="CENTER">
        <!-- Column/row constraints will be added via code, so leave this section empty -->
    </GridPane>
</ScrollPane>

Full Modified Java Code Snippet #

// Clear existing constraints first to avoid conflicts
bCont.TheBoard.getColumnConstraints().clear();
bCont.TheBoard.getRowConstraints().clear();

for (int i = 0; i < columns; i++) { 
    for (int j = 0; j < rows; j++) { 
        Button b = new Button(" "); 
        b.setMinSize(30, 30); 
        b.setMaxSize(30, 30); 
        b.setStyle("-fx-font-size:11"); 
        bCont.TheBoard.add(b, i, j); 
        GridPane.setHalignment(b, HPos.CENTER); 
        GridPane.setValignment(b, VPos.CENTER); 
        // Removed Vgrow/Hgrow since buttons are fixed size
    } 
} 

ColumnConstraints constraints = new ColumnConstraints(); 
constraints.setPercentWidth(100.0 / columns); 
constraints.setHgrow(Priority.ALWAYS);

RowConstraints rowconst = new RowConstraints(); 
rowconst.setPercentHeight(100.0 / rows); 
rowconst.setVgrow(Priority.ALWAYS);

for (int t = 0; t < columns; t++) { 
    bCont.TheBoard.getColumnConstraints().add(constraints); 
} 
for (int t = 0; t < rows; t++) {
    bCont.TheBoard.getRowConstraints().add(rowconst);
}

// Final GridPane adjustments
bCont.TheBoard.setAlignment(Pos.CENTER);
bCont.TheBoard.setPadding(new Insets(0));

Why This Works #

• Clean Constraints: Ensures no conflicting layout rules from FXML and code.
• 100% Sizing: Uses all available GridPane space, eliminating gaps between buttons.
• Fixed Button Size: Removing grow properties keeps buttons from being stretched or surrounded by unnecessary empty space.
• Centered Grid: The GridPane now sits in the middle of its parent area, aligning buttons properly.
• ScrollPane: Adds scrollability when the window is too small, preventing button overlap while maintaining your fixed button size.

内容的提问来源于stack exchange，提问作者SA.93