子节点的 JavaFX GridPane 动态调整大小以填充分配的区域
Posted
技术标签:
【中文标题】子节点的 JavaFX GridPane 动态调整大小以填充分配的区域【英文标题】：JavaFX GridPane Dynamic Resizng of Child Nodes to Fill Assigned Area 【发布时间】：2016-07-10 04:03:16 【问题描述】：所以我使用 GridPane 的目的是根据组件添加到网格时分配给组件的部分来调整其子注释的大小以填充提供给 GridPane 的可用空间。我花了一些时间研究类似的问题，但提出的解决方案似乎都不起作用，也不符合我的要求。基本上我想要这样的东西并动态调整大小：
如果我在 CSS 或代码中调整按钮的 min、max 和 pref 大小，我可以做到这一点。我发现，随着窗口大小的调整，按钮会稍微调整大小，但是即使我将宽度和高度的首选项最大值设置为一个非常大的值，它们仍然如上所示，即它们没有占据整个屏幕，如下图所示。值得注意的是，洋红色应用于 GridPane 而不是它所在的 AnchorPane，因此它显然占用了所有空间，但没有按比例将其分配给子级。
如果我取出 CSS 指定的 pref、min 和 max 尺寸，并在 Java 代码中只留下 setMaxSize 指令，那么窗口都会被画得很小。如下所示。
下面是一个 SCE。 （我知道代码可以优化，但这只是一个简单明了的例子）。
JAVA： 打包申请；
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
public class Main extends Application
@Override
public void start(Stage primaryStage)
try
BorderPane root = new BorderPane();
Scene scene = new Scene(root,400,400);
scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
ButtonPanel2 bp = new ButtonPanel2();
root.setCenter(bp);
primaryStage.setScene(scene);
primaryStage.show();
catch(Exception e)
e.printStackTrace();
//end start
public static void main(String[] args)
launch(args);
//end main
//end class main
class ButtonPanel2 extends AnchorPane
GridPane grid;
Button ba, bb, bc, bd;
/**Construct a new button panel object.**/
public ButtonPanel2()
//Create Grid and gaps
grid = new GridPane();
grid.setHgap(10);
grid.setVgap(10);
grid.prefWidthProperty().bind(this.widthProperty());
grid.getStyleClass().add("test");
//Init buttons
ba = new Button("A");
bb = new Button("B");
bc = new Button("C");
bd = new Button("D");
//Apply CSS styles for size
ba.getStyleClass().add("button1");
bb.getStyleClass().add("buttonH2");
bc.getStyleClass().add("buttonV2");
bd.getStyleClass().add("button2");
ba.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
bb.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
bc.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
bd.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
//Add items to grid.
//Node, colIndex, rowIndex, colSpan, rowSpan
grid.add(ba,0,0,1,1);//
grid.add(bb,1,0,2,1);//
grid.add(bc,0,1,1,2);//
grid.add(bd,1,1,2,2);//
GridPane.setFillHeight(ba, true);
GridPane.setFillHeight(bb, true);
GridPane.setFillHeight(bc, true);
GridPane.setFillHeight(bd, true);
GridPane.setFillWidth(ba, true);
GridPane.setFillWidth(bb, true);
GridPane.setFillWidth(bc, true);
GridPane.setFillWidth(bd, true);
//anchor grid to parent container (anchor)
AnchorPane.setTopAnchor(grid, 0.0);
AnchorPane.setBottomAnchor(grid, 0.0);
AnchorPane.setLeftAnchor(grid, 0.0);
AnchorPane.setRightAnchor(grid, 0.0);
this.getChildren().add(grid);
this.getStyleClass().add("test");
//end buttonPanel2
//end buttonPanel2
CSS：
.buttonV2
-fx-min-width: 50px;
-fx-min-height:100px;
-fx-max-width: 200px;
-fx-max-height:100px;
-fx-pref-width: 75px;
-fx-pref-height:150px;
.buttonH2
-fx-min-width: 100px;
-fx-min-height:50px;
-fx-max-width: 200px;
-fx-max-height:100px;
-fx-pref-width: 150px;
-fx-pref-height:75px;
.button1
-fx-min-width: 50px;
-fx-min-height:50px;
-fx-max-width: 100px;
-fx-max-height:100px;
-fx-pref-width: 75px;
-fx-pref-height:75px;
.button2
-fx-min-width: 100px;
-fx-min-height:100px;
-fx-max-width: 200px;
-fx-max-height:200px;
-fx-pref-width: 150px;
-fx-pref-height:150px;
.test
-fx-background-color: #ff00ff;
.test2
-fx-background-color: #00ffff;
【问题讨论】：
我宁愿理解为什么也不愿使用 Scene Builder。我想 Scene-builder 可以告诉我为什么如果我使用 Scene-builder 来制作它。但是，老实说，我认为 GridPane 应该比这更容易使用。 【参考方案1】：这是使用 SceneBuilder 创建的示例布局，其中包含几个不同大小的预览场景。您可以看到随着大小的变化，每个按钮的比例大小保持不变。这是通过在 GridPane 的行和列上设置 60:40 constraints 来实现的。
该解决方案还使用tip for sizing and aligning nodes：
要使所有按钮的大小调整为...窗格的宽度，每个按钮的最大宽度设置为 Double.MAX_VALUE 常量，这使得控件可以无限制地增长。
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<GridPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.40">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="40.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" percentHeight="40.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.columnIndex="1" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.rowIndex="1" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.columnIndex="1" GridPane.rowIndex="1" />
</children>
</GridPane>
上述布局是使用来自 Gluon 的 SceneBuilder 在大约 3 分钟内完成的。我发现它是一个很好的工具，可以用来理解各种布局类型和约束。
通常AnchorPane 用于固定大小的布局。如果您想要一个动态大小的布局，通常首选不同的布局窗格类型，这就是为什么答案只使用 GridPane 而不是 AnchorPane。
将最大尺寸设置为 Double.MAX_VALUE。我明白了，但这感觉就像一个黑客攻击。
是的，一开始可能是这样，特别是因为只有某些控件（如按钮）需要 MAX_VALUE 设置，而其他布局（如 StackPanes）则不需要。但在你习惯了它之后，它从来没有真正困扰过我。经验法则是布局尝试执行您“通常”想要的操作。通常，您不希望按钮增长到任何大小，而是希望它保持其首选大小。当然，这并不总是您想要的，这就是为什么您可以覆盖默认值以允许不受约束的增长，如此处所示。
【讨论】：
啊，这就是秘密，它全部在行约束中并将最大大小设置为本质上 Double.MAX_VALUE。我明白了，但这感觉就像一个黑客。我刚刚发现您还可以在列和行约束上设置 percentWidth 和 percentHeight，所以也许混合方法会起作用。我会尝试一些想法并报告回来。嗯，我还看到您没有使用 colSpan 或 rowSpan 属性。嗯，很有趣。【参考方案2】：好的，所以在 Jewelsea 的一些指针之后，答案在于结合使用 RowConstraints 和 ColumnConstraints 来定义给每一行和每一列的百分比比例，因此将网格的所有子组件的 MaxSize 设置为更大的值比你显示的多 (Double.MAX_VALUE)。
这使得布局及其组件随着舞台大小的调整成比例地增长和缩小。代码如下：
打包应用程序；
导入 javafx.application.Application； 导入javafx.stage.Stage； 导入javafx.scene.Scene； 导入 javafx.scene.control.Button； 导入 javafx.scene.layout.AnchorPane； 导入 javafx.scene.layout.BorderPane； 导入 javafx.scene.layout.ColumnConstraints； 导入 javafx.scene.layout.GridPane； 导入 javafx.scene.layout.Priority； 导入 javafx.scene.layout.RowConstraints;
JAVA 代码：
public class Main extends Application
@Override
public void start(Stage primaryStage)
try
BorderPane root = new BorderPane();
Scene scene = new Scene(root,400,400);
scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
ButtonPanel2 bp = new ButtonPanel2();
root.setCenter(bp);
primaryStage.setScene(scene);
primaryStage.show();
catch(Exception e)
e.printStackTrace();
//end start
public static void main(String[] args)
launch(args);
//end main
//end class main
class ButtonPanel2 extends AnchorPane
GridPane grid;
Button ba, bb, bc, bd;
/**Construct a new button panel object.**/
public ButtonPanel2()
//Create Grid and gaps
grid = new GridPane();
grid.setHgap(10);
grid.setVgap(10);
grid.prefWidthProperty().bind(this.widthProperty());
grid.getStyleClass().add("test");
//Init buttons
ba = new Button("A");
bb = new Button("B");
bc = new Button("C");
bd = new Button("D");
ba.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
bb.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
bc.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
bd.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
//Add items to grid.
//Node, colIndex, rowIndex, colSpan, rowSpan
grid.add(ba,0,0,1,1);//
grid.add(bb,1,0,2,1);//
grid.add(bc,0,1,1,2);//
grid.add(bd,1,1,2,2);//
//Grid contstraints.
RowConstraints row1 = new RowConstraints();
row1.setPercentHeight(25);
RowConstraints row2 = new RowConstraints();
row2.setPercentHeight(75);
ColumnConstraints col1 = new ColumnConstraints();
col1.setPercentWidth(25);
ColumnConstraints col2 = new ColumnConstraints();
col2.setPercentWidth(75);
grid.getRowConstraints().addAll(row1,row2);
grid.getColumnConstraints().addAll(col1,col2);
//anchor grid to parent container (anchor)
AnchorPane.setTopAnchor(grid, 0.0);
AnchorPane.setBottomAnchor(grid, 0.0);
AnchorPane.setLeftAnchor(grid, 0.0);
AnchorPane.setRightAnchor(grid, 0.0);
this.getChildren().add(grid);
this.getStyleClass().add("test");
//end buttonPanel2
//end buttonPanel2
CSS：
.buttonV2
-fx-min-width: 50px;
-fx-min-height:100px;
-fx-max-width: 9999px;
-fx-max-height:9999px;
-fx-pref-width: 75px;
-fx-pref-height:150px;
.buttonH2
-fx-min-width: 100px;
-fx-min-height:50px;
-fx-max-width: 200px;
-fx-max-height:100px;
-fx-pref-width: 150px;
-fx-pref-height:75px;
.button1
-fx-min-width: 50px;
-fx-min-height:50px;
-fx-max-width: 100px;
-fx-max-height:100px;
-fx-pref-width: 75px;
-fx-pref-height:75px;
.button2
-fx-min-width: 100px;
-fx-min-height:100px;
-fx-max-width: 200px;
-fx-max-height:200px;
-fx-pref-width: 150px;
-fx-pref-height:150px;
.test
-fx-background-color: #ff00ff;
.test2
-fx-background-color: #00ffff;
【讨论】：
以上是关于子节点的 JavaFX GridPane 动态调整大小以填充分配的区域的主要内容，如果未能解决你的问题，请参考以下文章
JavaFX：GridPane 中的 ComboBox 导致不必要的大小调整
JavaFX：如何从 GridPane 中动态创建的文本字段的值计算平均值？