这是使用SceneBuilder创建的示例布局，其中包含几个大小不同的预览场景。您可以看到，随着大小的变化，每个按钮的比例大小保持不变。这是通过在GridPane的行和列上设置60:40约束来实现的。

该解决方案还使用提示来调整节点大小和对齐节点：

若要将所有按钮的大小调整为…窗格的宽度，每个按钮的最大宽度设置为Double。MAX_VALUE常量，这使控件可以无限制地增长。

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

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

<GridPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.40">
  <columnConstraints>
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="40.0" prefWidth="100.0" />
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
  </columnConstraints>
  <rowConstraints>
    <RowConstraints minHeight="10.0" percentHeight="40.0" prefHeight="30.0" vgrow="SOMETIMES" />
    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
  </rowConstraints>
   <children>
      <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" />
      <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.columnIndex="1" />
      <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.rowIndex="1" />
      <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.columnIndex="1" GridPane.rowIndex="1" />
   </children>
</GridPane>

上面的布局是使用Gluon的SceneBuilder在大约3分钟内制作的。我发现它是一个很好的工具，可以用来理解各种布局类型和约束。

通常AnchorPane用于固定大小的布局。如果您想要动态大小的布局，通常首选不同的布局窗格类型，这就是为什么答案只使用GridPane而不是AnchorPane。

将最大尺寸设置为双倍。MAX_VALUE。我明白了，但这感觉就像是一种黑客行为。

是的，一开始看起来可能是这样的，尤其是因为MAX_VALUE设置只对某些控件（如按钮）是必需的，而对StackPanes等其他布局则不需要。但是在你习惯了之后，它从来没有真正困扰过我。经验法则是布局试图做你“正常”想要的事情。通常你不希望按钮增长到任何大小，而是希望它保持在它的首选大小。当然，这并不总是你想要的，这就是为什么你可以覆盖默认值以允许不受约束的增长，如这里所示。

好的，所以在珠宝海的一些指针之后，答案在于使用行约束和列约束来定义百分比比例，以给出每一行和每一列，因此将网格的所有子组件的MaxSize设置为比您显示的值大得多的值（Double.MAX_VALUE）。

这使得布局及其组件随着舞台的调整而成比例地增长和缩小。代码如下：

套餐申请；

导入javafx. application.Application；导入javafx.阶段；导入javafx.场景。场景；导入javafx.场景.控制按钮；导入javafx.场景.布局.AnchorPane；导入javafx.场景.布局.BorderPane；导入javafx.场景.布局.列约束；导入javafx.场景.布局.GridPane；导入javafx.场景.布局.优先级；导入javafx.场景.布局.行约束；

JAVA代码：

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            BorderPane root = new BorderPane();
            Scene scene = new Scene(root,400,400);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());

            ButtonPanel2 bp = new ButtonPanel2();
            root.setCenter(bp);

            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }//end start

    public static void main(String[] args) {
        launch(args);
    }//end main
}//end class main


class ButtonPanel2 extends AnchorPane {

    GridPane grid;

    Button ba, bb, bc, bd;


    /**Construct a new button panel object.**/
    public ButtonPanel2(){
        //Create Grid and gaps
        grid = new GridPane();
        grid.setHgap(10);
        grid.setVgap(10);

        grid.prefWidthProperty().bind(this.widthProperty());
        grid.getStyleClass().add("test");

        //Init buttons
        ba = new Button("A");
        bb = new Button("B");
        bc = new Button("C");
        bd = new Button("D");


        ba.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        bb.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        bc.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        bd.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

        //Add items to grid.
        //Node, colIndex, rowIndex, colSpan, rowSpan
        grid.add(ba,0,0,1,1);//
        grid.add(bb,1,0,2,1);//
        grid.add(bc,0,1,1,2);//
        grid.add(bd,1,1,2,2);//


        //Grid contstraints.
        RowConstraints row1 = new RowConstraints();
        row1.setPercentHeight(25);
        RowConstraints row2 = new RowConstraints();
        row2.setPercentHeight(75);

        ColumnConstraints col1 = new ColumnConstraints();
        col1.setPercentWidth(25);
        ColumnConstraints col2 = new ColumnConstraints();
        col2.setPercentWidth(75);

        grid.getRowConstraints().addAll(row1,row2);
        grid.getColumnConstraints().addAll(col1,col2);


        //anchor grid to parent container (anchor)
        AnchorPane.setTopAnchor(grid, 0.0);
        AnchorPane.setBottomAnchor(grid, 0.0);
        AnchorPane.setLeftAnchor(grid, 0.0);
        AnchorPane.setRightAnchor(grid, 0.0);

        this.getChildren().add(grid);

        this.getStyleClass().add("test");
    }//end buttonPanel2

}//end buttonPanel2

CSS：

.buttonV2{
    -fx-min-width: 50px;
    -fx-min-height:100px;
    -fx-max-width: 9999px;
    -fx-max-height:9999px;
    -fx-pref-width: 75px;
    -fx-pref-height:150px; 
}

.buttonH2{
    -fx-min-width: 100px;
    -fx-min-height:50px;
    -fx-max-width: 200px;
    -fx-max-height:100px;
    -fx-pref-width: 150px;
    -fx-pref-height:75px; 
}

.button1 {
    -fx-min-width: 50px;
    -fx-min-height:50px;
    -fx-max-width: 100px;
    -fx-max-height:100px;
    -fx-pref-width: 75px;
    -fx-pref-height:75px; 
}

.button2 {
    -fx-min-width: 100px;
    -fx-min-height:100px;
    -fx-max-width: 200px;
    -fx-max-height:200px;
    -fx-pref-width: 150px;
    -fx-pref-height:150px; 
}

.test{
    -fx-background-color: #ff00ff;
}

.test2{
        -fx-background-color: #00ffff;
}