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

Question

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

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

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

下面是一个 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 创建的示例布局，其中包含几个不同大小的预览场景。您可以看到，随着大小的变化，每个按钮的比例大小保持不变。这是通过设置 60:40 constraints 实现的。在 GridPane 的行和列上。

该解决方案还使用 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>

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

通常是 AnchorPane适用于固定大小的布局。如果您想要动态调整大小的布局，通常首选不同的布局 Pane 类型，这就是答案仅使用 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)则不需要。但是在你习惯了它之后，它从来没有真正困扰过我。经验法则是布局会尝试执行您可能“通常”想要的操作。通常您不希望按钮增长到任何大小，而是希望它保持其首选大小。当然，这并不总是您想要的，这就是为什么您可以覆盖默认值以允许不受限制的增长，如此处所示。