java - 使用具有百分比宽度的列时,GridPane 没有给标签足够的空间
问题描述
下面的代码生成此屏幕截图:
第二列下方的标签在需要包装时不想正确声明额外的空间。这仅在列使用百分比宽度时发生 - 文档说在这种情况下它将忽略所有其他属性,包括 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();
}
}
解决方案
设置wrapText
为true
实际上似乎就足够了。您可以通过简单地增加窗口的高度并观察文本开始换行来看到这一点(根据需要减小窗口的宽度)。问题似乎是GridPane
它的初始大小计算 - 它水平增长以适应Label
,但不是垂直。一种解决方法是简单地给出Scene
, GridPane
, 或Label
显式(首选)宽度,同时保留要计算的高度。
new Scene(root, someWidth, -1)
root.setPrefWidth(someWidth)
label.setPrefWidth(someWidth)
+label.setMaxWidth(Double.MAX_VALUE)
然而,即使 JavadocColumnConstraints.percentWidth
说:
如果设置为大于 0 的值,则列将调整为网格窗格可用宽度的此百分比,并且将忽略其他大小约束(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
,随着一个增长,它们都会增长。
这意味着Label
s 具有几乎无限的水平增长空间,这意味着 s 的首选高度Label
被计算为只有一行文本;当你有无限宽度时为什么要换行?因此,Label
s 所属的行仅垂直增长到足以容纳一行文本。没有空间来换行文本溢出。
推荐阅读
- python - 如何优化 Django 与数据库表的交互
- windows - 如何打开“.scpt”文件?
- typescript - Angular 回调函数默认值
- javascript - 我可以通过终端全局安装 react native Cli 吗?
- .net - 大型 DBML(Linq-to-SQL)在编辑时损坏
- ios - Swift - 如何在 iOS 应用中检测 CarPlay 的连接/断开状态?
- html - 短划线和十字符号的 SVG 模式
- python - 获取包含python中一个字符的年份月份
- vue.js - IdentityServer4 使用 JWT 令牌和 [Authorize] 调用后端
- sql - 为数据范围内的每个客户 ID 创建月份列