Layout JavaFX中具有自动拉伸瓷砖的TilePane

JavaFX中是否有任何方法可以从TilePane或FlowPane和GridPane中获得最佳效果？
以下是我想要实现的目标：

首先，我喜欢GridPane的想法，在这里我可以设置一个M×N的网格，该网格在其父容器内自动调整大小，将空间平均划分为M列和N行。然后我可以放置一些子元素，这些子元素完全填充每个单元格，它们将沿着网格拉伸。这很酷。
但有一个缺点：我需要通过设置每个控件的行和列编号来明确指定每个控件应该去哪里

然后，有一些布局容器，如FlowPane或TilePane，当父容器更改其大小时，它们会自动回流其子元素。当我添加另一个子元素时，它会自动附加到列表的末尾，当空间太小而无法容纳另一个元素时，元素列表会在到达容器边缘后自动换行。
但也有一个缺点：子元素只能具有刚性的预定义大小。它们不会与其父元素一起拉伸

我需要的是：
我需要从这两个容器中得到最好的结果，也就是说，我需要一个M×N的网格（比如说4×4），其中每个单元格都是ParentWidth/M×ParentHeight/N，并随窗口拉伸，因此它总是4×4个单元格，但它们的大小（以及它们的内容大小）也相应地拉伸。 但是，我不想明确地告诉容器将我添加到其中的每个新子级放在哪个行和列中。相反，我只想添加它，让容器计算出要放入的第一个空单元格，从左到右填充单元格，如果当前行中没有空单元格，则从上到下填充

---

这些预定义容器的属性是否有一些神奇的设置可以让我实现这一点？或者我需要自己编写这样一个容器吗？

正是出于您所描述的目的，我创建了

按钮ridpane

。这是初稿，还有改进的余地，但也许它能给你一个基本的想法

public class ButtonGrid extends Pane {

    private static final double DEFAULT_RATIO = 0.618033987;

    private int                 columnCount;
    private double              ratio;

    public ButtonGrid(int columnCount) {
        this(columnCount, DEFAULT_RATIO);
    }

    public ButtonGrid(int columnCount, double heightToWidthRatio) {
        getStyleClass().add("button-grid");
        this.columnCount = columnCount;
        ratio = heightToWidthRatio;
    }

    public void setColumnCount(int columnCount) {
        this.columnCount = columnCount;
    }

    public void setHeightToWidthRatio(double ratio) {
        this.ratio = ratio;
    }

    @Override
    public Orientation getContentBias() {
        return Orientation.HORIZONTAL;
    }

    @Override
    protected void layoutChildren() {
        double left = getInsets().getLeft();
        double top = getInsets().getTop();

        double tileWidth = calculateTileWidth(getWidth());
        double tileHeight = calculateTileHeight(getWidth());

        ObservableList<Node> children = getChildren();
        double currentX = left;
        double currentY = top;
        for (int idx = 0; idx < children.size(); idx++) {
            if (idx > 0 && idx % columnCount == 0) {
                currentX = left;
                currentY = currentY + tileHeight;
            }
            children.get(idx).resize(tileWidth, tileHeight);
            children.get(idx).relocate(currentX, currentY);
            currentX = currentX + tileWidth;
        }
    }

    @Override
    protected double computePrefWidth(double height) {
        double w = 0;
        for (int idx = 0; idx < columnCount; idx++) {
            Node node = getChildren().get(idx);
            w += node.prefWidth(-1);
        }
        return getInsets().getLeft() + w + getInsets().getRight();
    }

    @Override
    protected double computePrefHeight(double width) {
        double h = calculateTileHeight(width) * getRowCount();
        return getInsets().getTop() + h + getInsets().getBottom();
    }

    private double calculateTileHeight(double width) {
        return calculateTileWidth(width) * ratio;
    }

    private double calculateTileWidth(double width) {
        return (-getInsets().getLeft() + width - getInsets().getRight()) / columnCount;
    }

    private int getRowCount() {
        return getChildren().size() / columnCount;
    }
}

公共类按钮Grid扩展窗格{
私人静态最终双违约率=0.618033987；
私有int列计数；
私人双重比率；
公共ButtonGrid（int columnCount）{
这（列数，默认的_比率）；
}
public ButtonGrid（int columnCount，双倍高度到宽度）{
getStyleClass（）.add（“按钮网格”）；
this.columnCount=columnCount；
比率=高度到宽度；
}
公共void setColumnCount（int columnCount）{
this.columnCount=columnCount；
}
公共空间设置高度到宽度（双倍比率）{
这个比率=比率；
}
@凌驾
公共导向getContentBias（）{
返回方向。水平；
}
@凌驾
受保护的void layoutChildren（）{
左双=getInsets（）.getLeft（）；
double-top=getInsets（）.getTop（）；
double tileWidth=计算宽度（getWidth（））；
double tileHeight=CalculateIleHeight（getWidth（））；
ObservableList children=getChildren（）；
双电流x=左；
双电流Y=顶部；
for（int idx=0；idx0&&idx%columnCount==0）{
电流x=左；
电流Y=电流Y+瓷砖高度；
}
children.get（idx）.resize（tileWidth，tileHeight）；
获取（idx）、重新定位（currentX、currentY）；
currentX=currentX+波浪宽度；
}
}
@凌驾
受保护的双computePrefWidth（双高）{
双w=0；
for（int-idx=0；idx

好的，下面是我自己尝试的解决方案：

由于

GridPane

几乎按照我需要的方式工作，只是不能自动流动其内容，因此我决定对

GridPane

进行子类化，并添加自定义代码以自动流动其子控件。（感谢@jns提示可以对JavaFX库控件类进行子类化。）

因此，我对

GridPane

进行了子类化，并为其内部子列表添加了一个侦听器，以便每当在该列表中添加或删除子列表，或者该列表以某种方式更改时（例如，我们对子列表重新排序），调用一个私有方法，通过按子对象在列表中的位置将子对象指定给正确的列和行，从而在网格中回流子对象。我还添加了两个private helper函数，用于将列表中的位置转换为行数和列数，然后返回

我知道这既不完美也不优雅，但是，嘿，它工作得很好，足以满足我的需要：p所以我在这里发布代码，以防其他人遇到同样的问题：

package flowgrid;

import javafx.collections.ObservableList;
import javafx.collections.ListChangeListener;

import javafx.scene.Node;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.RowConstraints;
import javafx.scene.layout.Priority;
import javafx.geometry.HPos;
import javafx.geometry.VPos;

import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.NamedArg;

/**
 * This class subclasses the GridPane layout class.
 * It manages its child nodes by arranging them in rows of equal number of tiles.
 * Their order in the grid corresponds to their indexes in the list of children
 * in the following fashion (similarly to how FlowPane works):
 * 
 *      +---+---+---+---+
 *      | 0 | 1 | 2 | 3 |
 *      +---+---+---+---+
 *      | 4 | 5 | 6 | 7 |
 *      +---+---+---+---+
 *      | 8 | 9 | … |   |
 *      +---+---+---+---+
 *  
 * It observes its internal list of children and it automatically reflows them
 * if the number of columns changes or if you add/remove some children from the list.
 * All the tiles of the grid are of the same size and stretch accordingly with the control.
 */
public class FlowGridPane extends GridPane
{
   // Properties for managing the number of rows & columns.
   private IntegerProperty rowsCount;
   private IntegerProperty colsCount;

   public final IntegerProperty colsCountProperty() { return colsCount; }
   public final Integer getColsCount() { return colsCountProperty().get(); }
   public final void setColsCount(final Integer cols) {
      // Recreate column constraints so that they will resize properly.
      ObservableList<ColumnConstraints> constraints = getColumnConstraints();
      constraints.clear();
      for (int i=0; i < cols; ++i) {
         ColumnConstraints c = new ColumnConstraints();
         c.setHalignment(HPos.CENTER);
         c.setHgrow(Priority.ALWAYS);
         c.setMinWidth(60);
         constraints.add(c);
      }
      colsCountProperty().set(cols);
      reflowAll();
   }

   public final IntegerProperty rowsCountProperty() { return rowsCount; }
   public final Integer getRowsCount() { return rowsCountProperty().get(); }
   public final void setRowsCount(final Integer rows) {
      // Recreate column constraints so that they will resize properly.
      ObservableList<RowConstraints> constraints = getRowConstraints();
      constraints.clear();
      for (int i=0; i < rows; ++i) {
         RowConstraints r = new RowConstraints();
         r.setValignment(VPos.CENTER);
         r.setVgrow(Priority.ALWAYS);
         r.setMinHeight(20);
         constraints.add(r);
      }
      rowsCountProperty().set(rows);
      reflowAll();
   }

   /// Constructor. Takes the number of columns and rows of the grid (can be changed later).
   public FlowGridPane(@NamedArg("cols")int cols, @NamedArg("rows")int rows) {
      super();
      colsCount = new SimpleIntegerProperty();  setColsCount(cols);
      rowsCount = new SimpleIntegerProperty();  setRowsCount(rows);
      getChildren().addListener(new ListChangeListener<Node>() {
         public void onChanged(ListChangeListener.Change<? extends Node> change) {
            reflowAll();
         }
      } );
   }

   // Helper functions for coordinate conversions.
   private int coordsToOffset(int col, int row) { return row*colsCount.get() + col; }
   private int offsetToCol(int offset) { return offset%colsCount.get(); }
   private int offsetToRow(int offset) { return offset/colsCount.get(); }

   private void reflowAll() {
      ObservableList<Node> children = getChildren();
      for (Node child : children ) {
         int offs = children.indexOf(child);
         GridPane.setConstraints(child, offsetToCol(offs), offsetToRow(offs) );
      }
   }
}

packageflowgrid；
导入javafx.collections.ObservableList；
导入javafx.collections.ListChangeListener；
导入javafx.scene.Node；
导入javafx.scene.layout.GridPane；
导入javafx.scene.layout.ColumnConstraints；
导入javafx.scene.layout.RowConstraints；
导入javafx.scene.layout.Priority；
导入javafx.geometry.HPos；
导入javafx.geometry.VPos；
导入javafx.beans.property.IntegerProperty；