使用百分比宽度的列时，GridPane不会给标签足够的空间

Question

下面的代码生成此屏幕截图：

第二列下面的标签不需要在需要包装时正确地声明额外空间。这只发生在列使用百分比宽度时 - 文档说它会忽略那种情况下的所有其他属性，包括hgrow等，但它没有提到它也会影响行的工作方式..但看起来确实如此。

任何人都有解决方法或者可以告诉我我做错了什么？我想要的只是显示3张图像，其下方的标签尺寸大小不一，排列整齐，尺寸相同，尺寸相同......如下所示：

以上是通过自定义控件完成的，暂定名为“BetterGridPane”......

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.RowConstraints;
import javafx.stage.Stage;

public class TestLabelWrap extends Application {

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

  @Override
  public void start(Stage primaryStage) throws Exception {
    GridPane root = new GridPane();

    root.add(new ListView(FXCollections.observableArrayList("1", "2", "3")), 0, 0);
    root.add(new ListView(FXCollections.observableArrayList("1", "2", "3")), 1, 0);
    root.add(new ListView(FXCollections.observableArrayList("1", "2", "3")), 2, 0);

    root.add(new Label("Value A"), 0, 1);
    root.add(new Label("The value for this porperty is so large it wraps, The value for this porperty is so large it wraps") {{
      setWrapText(true);
    }}, 1, 1);
    root.add(new Label("Value C"), 2, 1);

    root.getColumnConstraints().add(new ColumnConstraints() {{ setPercentWidth(33.33); }});
    root.getColumnConstraints().add(new ColumnConstraints() {{ setPercentWidth(33.33); }});
    root.getColumnConstraints().add(new ColumnConstraints() {{ setPercentWidth(33.33); }});

    root.getRowConstraints().add(new RowConstraints() {{ setVgrow(Priority.NEVER); }});
    root.getRowConstraints().add(new RowConstraints() {{ setVgrow(Priority.ALWAYS); }});

    primaryStage.setScene(new Scene(root));
    primaryStage.show();
  }
}

Answer 1

将wrapText设置为true实际上似乎已经足够了。您可以通过简单地增加窗口的高度来看到这一点，并观察文本开始换行（根据需要减小窗口的宽度）。问题似乎是GridPane和它的初始尺寸计算 - 它水平增长以适应Label，但不是垂直。一个解决方法是简单地给Scene，GridPane或Label一个明确的（首选）宽度，同时留下要计算的高度。

• new Scene(root, someWidth, -1)
• root.setPrefWidth(someWidth)
• label.setPrefWidth(someWidth) + label.setMaxWidth(Double.MAX_VALUE)

然而，即使ColumnConstraints.percentWidth的Javadoc说：

如果设置为大于0的值，则该列将调整为Gridpane可用宽度的此百分比，并忽略其他大小约束（minWidth，prefWidth，maxWidth，hgrow）。

在优选的尺寸计算中，[min|pref|max]Width似乎没有被忽略。当您看起来具有已知且均匀宽度的图像时，您应该能够将每个约束的首选宽度设置为略大于图像的宽度。这是一个例子（使用OpenJDK 12和OpenJFX 12）：

import java.util.stream.Stream;
import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.TextAlignment;
import javafx.stage.Stage;

public class Main extends Application {

    private static ColumnConstraints[] createColumnConstraints() {
        return Stream.generate(() -> {
            var constraint = new ColumnConstraints();
            constraint.setHalignment(HPos.CENTER);
            constraint.setPercentWidth(100.0 / 3.0);
            constraint.setPrefWidth(225.0); // SET PREF WIDTH
            return constraint;
        }).limit(3).toArray(ColumnConstraints[]::new);
    }

    private static Rectangle[] createRectangles() {
        return Stream.generate(() -> new Rectangle(100.0, 150.0)).limit(3).toArray(Rectangle[]::new);
    }

    private static Label[] createLabels(String... texts) {
        return Stream.of(texts).map(text -> {
            var label = new Label(text);
            label.setWrapText(true);
            label.setTextAlignment(TextAlignment.CENTER);
            return label;
        }).toArray(Label[]::new);
    }

    @Override
    public void start(Stage primaryStage) {
        var root = new GridPane();
        root.setGridLinesVisible(true); // FOR VISUAL CLARITY
        root.setHgap(10.0);
        root.setVgap(10.0);
        root.setAlignment(Pos.CENTER);
        root.setPadding(new Insets(20.0));
        root.getColumnConstraints().addAll(createColumnConstraints());

        root.addRow(0, createRectangles());
        root.addRow(1, createLabels("Label A", "This is long text. ".repeat(10), "Label C"));

        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    }

}

结果如下：

---

猜测：

因为你使用new Scene(root)意味着Scene将自己调整为其内容的首选大小。这基本上使根自由的统治增长到它认为必要的大。正如GridPane所记录的那样：

默认情况下，行和列的大小将适合其内容;一根柱子的宽度足以容纳最宽的孩子，一排高到足以容纳最高的孩子。

使用percentWidth，每列的宽度实际上没有上限;他们将成长为适合最宽的孩子。此外，因为每一列使用percentWidth，随着一个人的成长，他们都会成长。

这意味着Labels几乎没有水平增长的空间，这意味着Label的首选高度只计算为一行文本;为什么在你有无限宽度时换行？因此，Labels所属的行只能垂直增长，以容纳一行文本。没有空间来包装文本溢出。