GridPane JavaFx 中的冗余单元格
Redundant cell in GridPane JavaFx
我是 JavaFX 的新手,我想创建一个包含一些列和行的网格示例。格子如下:
- 第一行:第一个单元格(宽度 = 100)占据 1 列,第二个单元格(宽度 = 200)占据 2 列
- 第二行:第一个 (width = 200) 单元格占用 2 列,第二个单元格 (width = 100) 占用 1 列
但是不知道为什么会出现意想不到的单元格。如下图:
我的代码如下:
// Label 1
Label lbl1 = new Label("Label1");
lbl1.setPrefWidth(100);
lbl1.setStyle("-fx-border-style: solid; -fx-background-color: #80aaff; -fx-border-width: 0.25");
// Label 2
Label lbl2 = new Label("Label2");
lbl2.setStyle("-fx-border-style: solid; -fx-background-color:#ff80bf; -fx-border-width: 0.25");
lbl2.setPrefWidth(200);
// Label 3
Label lbl3 = new Label("Label3");
lbl3.setPrefWidth(200);
lbl3.setStyle("-fx-border-style: solid; -fx-background-color:#66ff99; -fx-border-width: 0.25");
// Label 4
Label lbl4 = new Label("Label4");
lbl4.setPrefWidth(100);
lbl4.setStyle("-fx-border-style: solid; -fx-background-color: #ffff66; -fx-border-width: 0.25");
GridPane gridPane = new GridPane();
gridPane.setStyle("-fx-border-style: solid");
// column 0, row 0, column span 1, row span 1
gridPane.add(lbl1, 0, 0, 1, 1);
// column 1, row 0, column span 2, row span 1
gridPane.add(lbl2, 1, 0, 2, 1);
// column 0, row 1, column span 1, row span 1
gridPane.add(lbl3, 0, 1, 2, 1);
// column 2, row 1, column span 2, row span 1
gridPane.add(lbl4, 2, 1, 1, 1);
谁能指出我的问题?
谢谢。
GridPane
列 spans/overlapping 列的首选宽度的计算通常不会像预期的那样工作。你看到的"cell"是GridPane
的背景,没有被任何child覆盖。
为避免 GridPane
变得太大,请通过 ColumnConstraints
:
设置列宽
// Label 1
Label lbl1 = new Label("Label1");
lbl1.setMaxWidth(Double.MAX_VALUE);
lbl1.setStyle("-fx-border-style: solid; -fx-background-color: #80aaff; -fx-border-width: 0.25");
// Label 2
Label lbl2 = new Label("Label2");
lbl2.setStyle("-fx-border-style: solid; -fx-background-color:#ff80bf; -fx-border-width: 0.25");
lbl2.setMaxWidth(Double.MAX_VALUE);
// Label 3
Label lbl3 = new Label("Label3");
lbl3.setMaxWidth(Double.MAX_VALUE);
lbl3.setStyle("-fx-border-style: solid; -fx-background-color:#66ff99; -fx-border-width: 0.25");
// Label 4
Label lbl4 = new Label("Label4");
lbl4.setMaxWidth(Double.MAX_VALUE);
lbl4.setStyle("-fx-border-style: solid; -fx-background-color: #ffff66; -fx-border-width: 0.25");
GridPane gridPane = new GridPane();
ColumnConstraints constraints = new ColumnConstraints(100);
gridPane.getColumnConstraints().addAll(constraints, constraints, constraints);
gridPane.setStyle("-fx-border-style: solid");
// column 0, row 0, column span 1, row span 1
gridPane.add(lbl1, 0, 0);
// column 1, row 0, column span 2, row span 1
gridPane.add(lbl2, 1, 0, 2, 1);
// column 0, row 1, column span 1, row span 1
gridPane.add(lbl3, 0, 1, 2, 1);
// column 2, row 1, column span 2, row span 1
gridPane.add(lbl4, 2, 1);
这不会阻止空 "space" 在 window 调整大小时重新出现。无论 GridPane
的宽度如何,要对所有列使用相同的大小,请使用 percentWidth
:
ColumnConstraints constraints = new ColumnConstraints();
constraints.setPercentWidth(100d/3d);
gridPane.setPrefWidth(300);
我是 JavaFX 的新手,我想创建一个包含一些列和行的网格示例。格子如下: - 第一行:第一个单元格(宽度 = 100)占据 1 列,第二个单元格(宽度 = 200)占据 2 列 - 第二行:第一个 (width = 200) 单元格占用 2 列,第二个单元格 (width = 100) 占用 1 列
但是不知道为什么会出现意想不到的单元格。如下图:
我的代码如下:
// Label 1
Label lbl1 = new Label("Label1");
lbl1.setPrefWidth(100);
lbl1.setStyle("-fx-border-style: solid; -fx-background-color: #80aaff; -fx-border-width: 0.25");
// Label 2
Label lbl2 = new Label("Label2");
lbl2.setStyle("-fx-border-style: solid; -fx-background-color:#ff80bf; -fx-border-width: 0.25");
lbl2.setPrefWidth(200);
// Label 3
Label lbl3 = new Label("Label3");
lbl3.setPrefWidth(200);
lbl3.setStyle("-fx-border-style: solid; -fx-background-color:#66ff99; -fx-border-width: 0.25");
// Label 4
Label lbl4 = new Label("Label4");
lbl4.setPrefWidth(100);
lbl4.setStyle("-fx-border-style: solid; -fx-background-color: #ffff66; -fx-border-width: 0.25");
GridPane gridPane = new GridPane();
gridPane.setStyle("-fx-border-style: solid");
// column 0, row 0, column span 1, row span 1
gridPane.add(lbl1, 0, 0, 1, 1);
// column 1, row 0, column span 2, row span 1
gridPane.add(lbl2, 1, 0, 2, 1);
// column 0, row 1, column span 1, row span 1
gridPane.add(lbl3, 0, 1, 2, 1);
// column 2, row 1, column span 2, row span 1
gridPane.add(lbl4, 2, 1, 1, 1);
谁能指出我的问题? 谢谢。
GridPane
列 spans/overlapping 列的首选宽度的计算通常不会像预期的那样工作。你看到的"cell"是GridPane
的背景,没有被任何child覆盖。
为避免 GridPane
变得太大,请通过 ColumnConstraints
:
// Label 1
Label lbl1 = new Label("Label1");
lbl1.setMaxWidth(Double.MAX_VALUE);
lbl1.setStyle("-fx-border-style: solid; -fx-background-color: #80aaff; -fx-border-width: 0.25");
// Label 2
Label lbl2 = new Label("Label2");
lbl2.setStyle("-fx-border-style: solid; -fx-background-color:#ff80bf; -fx-border-width: 0.25");
lbl2.setMaxWidth(Double.MAX_VALUE);
// Label 3
Label lbl3 = new Label("Label3");
lbl3.setMaxWidth(Double.MAX_VALUE);
lbl3.setStyle("-fx-border-style: solid; -fx-background-color:#66ff99; -fx-border-width: 0.25");
// Label 4
Label lbl4 = new Label("Label4");
lbl4.setMaxWidth(Double.MAX_VALUE);
lbl4.setStyle("-fx-border-style: solid; -fx-background-color: #ffff66; -fx-border-width: 0.25");
GridPane gridPane = new GridPane();
ColumnConstraints constraints = new ColumnConstraints(100);
gridPane.getColumnConstraints().addAll(constraints, constraints, constraints);
gridPane.setStyle("-fx-border-style: solid");
// column 0, row 0, column span 1, row span 1
gridPane.add(lbl1, 0, 0);
// column 1, row 0, column span 2, row span 1
gridPane.add(lbl2, 1, 0, 2, 1);
// column 0, row 1, column span 1, row span 1
gridPane.add(lbl3, 0, 1, 2, 1);
// column 2, row 1, column span 2, row span 1
gridPane.add(lbl4, 2, 1);
这不会阻止空 "space" 在 window 调整大小时重新出现。无论 GridPane
的宽度如何,要对所有列使用相同的大小,请使用 percentWidth
:
ColumnConstraints constraints = new ColumnConstraints();
constraints.setPercentWidth(100d/3d);
gridPane.setPrefWidth(300);