使用具有百分比宽度的列时，GridPane 没有提供足够的标签 space
GridPane not giving label enough space when using columns with percentage widths
下面的代码生成这个屏幕截图：
第 2 列下方的标签不想在需要包装时正确声明额外的 space。这仅在 columns 使用百分比宽度时发生——文档说在这种情况下它将忽略所有其他属性，包括 hgrow 等，但它没有提到它也会影响行的工作方式..但看起来确实如此。
任何人都有解决方法或可以告诉我我做错了什么？我想要的只是显示 3 张图像，它们下面有未知大小的标签，这些标签很好 spaced 并对齐并且大小相同......像这样：
以上是用自定义控件完成的，暂命名为"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();
}
}
设置wrapText到true其实好像就够了。您可以通过简单地增加 window 的高度并观察文本开始换行（根据需要减小 window 的宽度）来看到这一点。问题似乎是 GridPane 和它的初始大小计算 — 它水平增长以适应 Label，但不是垂直增长。一种解决方法是简单地为 Scene、GridPane 或 Label 指定一个显式（首选）宽度，同时让高度待计算。
new Scene(root, someWidth, -1)root.setPrefWidth(someWidth)label.setPrefWidth(someWidth) + label.setMaxWidth(Double.MAX_VALUE)
但是，即使 ColumnConstraints.percentWidth 的 Javadoc 说：
If set to a value greater than 0, the column will be resized to this percentage of the gridpane's available width and the other size constraints (minWidth, prefWidth, maxWidth, hgrow) will be ignored.
[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 所记录：
By default, rows and columns will be sized to fit their content; a column will be wide enough to accommodate the widest child, a row tall enough to fit the tallest child.
使用percentWidth，每列的宽度实际上没有上限；他们将成长为适应最广泛的 child。另外，因为每一列都使用 percentWidth，随着一个列的增长，它们都会增长。
这意味着 Label 几乎可以无限地 space 水平增长，这意味着 Label 的首选高度被计算为只有一行文本；当你有无限宽度时为什么要换行？因此，Label 所属的行仅垂直增长以容纳一行文本。没有空间包装文本超限。
下面的代码生成这个屏幕截图：
第 2 列下方的标签不想在需要包装时正确声明额外的 space。这仅在 columns 使用百分比宽度时发生——文档说在这种情况下它将忽略所有其他属性，包括 hgrow 等，但它没有提到它也会影响行的工作方式..但看起来确实如此。
任何人都有解决方法或可以告诉我我做错了什么？我想要的只是显示 3 张图像，它们下面有未知大小的标签，这些标签很好 spaced 并对齐并且大小相同......像这样：
以上是用自定义控件完成的，暂命名为"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();
}
}
设置wrapText到true其实好像就够了。您可以通过简单地增加 window 的高度并观察文本开始换行（根据需要减小 window 的宽度）来看到这一点。问题似乎是 GridPane 和它的初始大小计算 — 它水平增长以适应 Label，但不是垂直增长。一种解决方法是简单地为 Scene、GridPane 或 Label 指定一个显式（首选）宽度，同时让高度待计算。
new Scene(root, someWidth, -1)root.setPrefWidth(someWidth)label.setPrefWidth(someWidth)+label.setMaxWidth(Double.MAX_VALUE)
但是，即使 ColumnConstraints.percentWidth 的 Javadoc 说：
If set to a value greater than 0, the column will be resized to this percentage of the gridpane's available width and the other size constraints (minWidth, prefWidth, maxWidth, hgrow) will be ignored.
[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 所记录：
By default, rows and columns will be sized to fit their content; a column will be wide enough to accommodate the widest child, a row tall enough to fit the tallest child.
使用percentWidth，每列的宽度实际上没有上限；他们将成长为适应最广泛的 child。另外，因为每一列都使用 percentWidth，随着一个列的增长，它们都会增长。
这意味着 Label 几乎可以无限地 space 水平增长，这意味着 Label 的首选高度被计算为只有一行文本；当你有无限宽度时为什么要换行？因此，Label 所属的行仅垂直增长以容纳一行文本。没有空间包装文本超限。