在 GridPane 中分配剩余空间或如何分配

Question

我们需要一个具有以下要求的 3 列布局的解决方案：

• 中间列的大小固定
• 中间列在父级居中
• 其他两列共享剩余空间
• 其他两列的大小相同

假设我们有一个 440 像素的水平空间和一个固定大小为 40 像素的中间列。另外两列应该共享剩余的 400px，这样每列的宽度为 200px。

------------------------------------
|    200px    | 40px |    200px    |
------------------------------------

如果整体尺寸发生变化，比如说500px，中间列的宽度应该不会变化，但其他的应该。

----------------------------------------
|     230px     | 40px |     230px     |
----------------------------------------

如果 GridPane 可以做到这一点，请告诉我怎么做。

如果 GridPane 无法做到这一点，我愿意接受其他建议。

我更喜欢一个简单的解决方案：a）没有 FXML 的 Java 代码和 b）只有 JavaFx，所以需要额外的库。

Answer 1

你只需要三个列约束：

ColumnConstraints leftCol = new ColumnConstraints();
leftCol.setHgrow(Priority.ALWAYS);
ColumnConstraints middleCol = new ColumnConstraints(40);
ColumnConstraints rightCol = new ColumnConstraints();
rightCol.setHgrow(Priority.ALWAYS);

GridPane gridPane = new GridPane();
gridPane.getColumnConstraints().addAll(leftCol, middleCol, rightCol);

如果你愿意，你可以在 FXML 中做同样的事情：

<GridPane>
  <columnConstraints>
    <ColumnConstraints hgrow="ALWAYS"/>
    <ColumnConstraints minWidth="40" prefWidth="40" maxWidth="40"/>
    <ColumnConstraints hgrow="ALWAYS"/>
  </columnConstraints>

  <!-- ... -->
</GridPane>

这是一个 SSCCE：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.Region;
import javafx.stage.Stage;

public class GridPaneTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        ColumnConstraints leftCol = new ColumnConstraints();
        leftCol.setHgrow(Priority.ALWAYS);
        ColumnConstraints middleCol = new ColumnConstraints(40);
        ColumnConstraints rightCol = new ColumnConstraints();
        rightCol.setHgrow(Priority.ALWAYS);


        GridPane gridPane = new GridPane();
        gridPane.getColumnConstraints().addAll(leftCol, middleCol, rightCol);

        Region left = new Region();
        left.setMinHeight(80);
        left.setStyle("-fx-background-color: red;");

        Region middle = new Region();
        middle.setMinHeight(80);
        middle.setStyle("-fx-background-color: green ;");

        Region right = new Region();
        right.setMinHeight(80);
        right.setStyle("-fx-background-color: blue ;");

        gridPane.addRow(0, left, middle, right);

        Scene scene = new Scene(gridPane, 400, 80);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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