如何布局一个用一定比例的可用空间填充的JavaFX节点？

Answer 1

您可以按照James_D的建议，使用带有适当约束的gridpane来完成此任务。这里有一个例子：

import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.geometry.Pos;
import javafx.geometry.VPos;
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.scene.layout.RowConstraints;
import javafx.stage.Stage;

public class App extends Application {

  @Override
  public void start(Stage primaryStage) {
    Region region = new Region();
    region.setStyle("-fx-background-color: firebrick;");

    GridPane grid = new GridPane();
    grid.setAlignment(Pos.CENTER);
    grid.add(region, 0, 0);

    ColumnConstraints cc = new ColumnConstraints(0, Region.USE_COMPUTED_SIZE, Double.MAX_VALUE);
    cc.setPercentWidth(75);
    cc.setHgrow(Priority.ALWAYS);
    cc.setHalignment(HPos.CENTER);
    grid.getColumnConstraints().add(cc);

    RowConstraints rr = new RowConstraints(0, Region.USE_COMPUTED_SIZE, Double.MAX_VALUE);
    rr.setPercentHeight(100);
    rr.setVgrow(Priority.ALWAYS);
    rr.setValignment(VPos.CENTER);
    grid.getRowConstraints().add(rr);

    primaryStage.setScene(new Scene(grid, 500, 300));
    primaryStage.show();
  }
}

另一个选择是创建自己的布局，假设我没有犯错，这并不太难：

import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.scene.Node;
import javafx.scene.layout.Pane;

public class CustomPane extends Pane {

  // value should be between 0.0 (0%) and 1.0 (100%)
  private final DoubleProperty widthRatio =
      new SimpleDoubleProperty(this, "widthRatio", 0.75) {

        @Override
        protected void invalidated() {
          requestLayout();
        }
      };
  public final void setWidthRatio(double widthRatio) { this.widthRatio.set(widthRatio); }
  public final double getWidthRatio() { return widthRatio.get(); }
  public final DoubleProperty widthRatioProperty() { return widthRatio; }

  public CustomPane() {}

  public CustomPane(double widthRatio) {
    setWidthRatio(widthRatio);
  }

  @Override
  protected void layoutChildren() {
    double ratio = getWidthRatioClamped();
    double x = snappedLeftInset();
    double y = snappedTopInset();
    double w = getWidth() - snappedRightInset() - x;
    double h = getHeight() - snappedBottomInset() - y;

    // could do the same thing with the height if you want
    x = snapPositionX(x + ((w - w * ratio) / 2.0));
    w = snapSizeX(w * ratio);

    for (Node child : getManagedChildren()) {
      layoutInArea(child, x, y, w, h, -1.0, HPos.CENTER, VPos.CENTER);
    }
  }

  private double getWidthRatioClamped() {
    return Math.max(0.0, Math.min(1.0, getWidthRatio()));
  }
}

请注意，这两个解决方案都将考虑子节点的最小/最大/最大宽度和高度。如果子节点的大小不可调整（例如ImageView、MediaView等），那么它将不能按预期工作。当然，您也可以为不可调整大小的节点创建变通方法。例如，下面是我的另一个答案，它创建了一个“可调整的ImageView”。