JavaFX GridPane 子节点动态调整大小以填充指定区域

Question

所以我使用 GridPane 的目的是让它的子注释调整大小以填充提供给 GridPane 的可用 space 基于组件添加到网格时分配给组件的比例。我已经花时间在 SO 上研究类似的问题，但是 none 提出的解决方案似乎有效，或者符合我的要求。基本上我想要这样的东西并动态调整大小：

如果我在 CSS 或代码中调整按钮的最小、最大和首选大小，我就可以拥有它。我发现，随着 window 的大小调整，按钮会稍微调整大小，但即使我将宽度和高度的 pref max 设置为非常大的值，它们仍然如上所示，即它们不会占据整个屏幕，如下所示。值得注意的是，洋红色应用于 GridPane 而不是它所在的 AnchorPane，因此它显然占用了所有 space 本身，但没有按比例将其分配给子项。

如果我取出 CSS 指定的 pref、min 和 max 尺寸，只保留 Java 代码中的 setMaxSize 指令，则 windows 都被绘制得很小。如下所示。

下面是一个SCE。（我知道代码可以优化，但这只是一个简单明了的例子）。

JAVA: 打包申请；

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;


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");

        //Apply CSS styles for size
        ba.getStyleClass().add("button1");
        bb.getStyleClass().add("buttonH2");
        bc.getStyleClass().add("buttonV2");
        bd.getStyleClass().add("button2");

        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);//

        GridPane.setFillHeight(ba, true);
        GridPane.setFillHeight(bb, true);
        GridPane.setFillHeight(bc, true);
        GridPane.setFillHeight(bd, true);

        GridPane.setFillWidth(ba, true);
        GridPane.setFillWidth(bb, true);
        GridPane.setFillWidth(bc, true);
        GridPane.setFillWidth(bd, true);


        //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: 200px;
    -fx-max-height:100px;
    -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;
}

Answer 1

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

该解决方案还使用 tip for sizing and aligning nodes:

To enable all of the buttons to be resized to the width of the ... pane, the maximum width of each button is set to the Double.MAX_VALUE constant, which enables a control to grow without limit.

<?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 is for fixed sized layouts. If you want a dynamically sized layout, a different layout pane type is usually preferred, which is why the answer uses only a GridPane 而不是 AnchorPane。

setting the max size to be essentially Double.MAX_VALUE. I get it but that just feels like such a hack.

是的，乍一看似乎是这样，尤其是因为 MAX_VALUE 设置仅对某些控件（如按钮）是必需的，而对其他布局（如 StackPanes）则不需要。但是在你习惯了它之后，它从来没有真正困扰过我。一种经验法则是布局会尝试执行您可能 "normally" 想要的操作。通常您不希望按钮增长到任何大小，而是希望它保持其首选大小。当然，这并不总是您想要的，这就是为什么您可以覆盖默认值以允许不受约束的增长，如此处所示。

Answer 2

好的，所以在 Jewelsea 的一些指示之后，答案在于结合使用 RowConstraints 和 ColumnConstraints 来定义百分比比例给每行和每列，因此将网格的所有子组件的 MaxSize 设置为一个值比您显示的要大得多 (Double.MAX_VALUE)。

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

打包申请；

进口javafx.application.Application；导入 javafx.stage.Stage；导入 javafx.scene.Scene；导入 javafx.scene.control.Button；导入 javafx.scene.layout.AnchorPane；导入 javafx.scene.layout.BorderPane；导入 javafx.scene.layout.ColumnConstraints；导入 javafx.scene.layout.GridPane；导入 javafx.scene.layout.Priority；导入 javafx.scene.layout.RowConstraints;

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

JavaFX GridPane 子节点动态调整大小以填充指定区域

JavaFX GridPane Dynamic Resizng of Child Nodes to Fill Assigned Area

java

layout

javafx

gridpane