Java 在窗格中填充宽度

Fill width in a Pane

提问by Vertex

There is a Paneas root and a GridPaneas its child. The root resizes with the stage. How can I achieve that the GridPanegets automaticallyresized with the root to fill the width? Any width should possible.Is it possible without property binding?

有一个Pane作为根和一个GridPane作为它的孩子。根随着舞台调整大小。我怎样才能做到这一点的GridPane被自动与根填补宽度调整？任何宽度都应该是可能的。没有属性绑定是否可能？

This is the situation:

情况是这样的：

1. A Paneroot(yellow) is the root of the Sceneso it fills the width and height of the Stage.
2. A GridPane(green) with one row and 3 colums as child of root.
3. The row should have a fixed height.
4. The first and third column should have a constant size
5. The middle column should grow to maximum
6. The GridPaneshould fill the width of its parent

1. 甲Pane根（黄色）是的根Scene，使其充满的宽度和高度Stage。
2. A GridPane（绿色），一行和 3 列作为root 的孩子。
3. 该行应具有固定高度。
4. 第一列和第三列应该有一个恒定的大小
5. 中间列应该增长到最大
6. 本GridPane应填写其父的宽度

Unfortunately the GridPanedoes not fill the width:

不幸的GridPane是没有填充宽度：

Code:

代码：

@Override
public void start(Stage primaryStage) throws Exception {
    // Resizes with the stage
    final Pane root = new Pane();
    root.setStyle("-fx-background-color: yellow");

    // grid: 1 row, 3 colums
    // should have a constant height and should grow in width to fill parent pane
    final GridPane gridPane = new GridPane();
    root.getChildren().add(gridPane);
    gridPane.setStyle("-fx-background-color: green");
    gridPane.setGridLinesVisible(true);

    final RowConstraints row = new RowConstraints(100); // constant height = 100
    final ColumnConstraints col1 = new ColumnConstraints(100, Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
    // should grow as much as possible in width
    final ColumnConstraints col2 = new ColumnConstraints(200, Control.USE_COMPUTED_SIZE, Double.MAX_VALUE);
    final ColumnConstraints col3 = new ColumnConstraints(100, Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
    gridPane.getRowConstraints().add(row);
    gridPane.getColumnConstraints().addAll(col1, col2, col3);

    final Scene scene = new Scene(root);
    primaryStage.setScene(scene);
    primaryStage.setWidth(600);
    primaryStage.setHeight(400);
    primaryStage.show();
}

采纳答案by James_D

The size of nodes inside panes is controlled by the way the individual pane implements its layout: i.e. the size of a node is effectively determined by its parent. So the overall size of your grid pane is controlled by the layout implementation of Pane.

窗格内节点的大小由单个窗格实现其布局的方式控制：即节点的大小由其父节点有效确定。因此，您的网格窗格的整体大小由Pane.

Paneactually does minimal layout work: it effectively just positions everything at (0,0) and sizes it to its preferred size. So your grid pane gets its preferred width, which is the sum of the preferred widths of the columns.

Pane实际上做了最少的布局工作：它实际上只是将所有内容定位在 (0,0) 并将其调整为首选大小。因此，您的网格窗格将获得其首选宽度，即各列首选宽度的总和。

So to get your grid pane to grow, you either need to change its preferred width, or use a layout pane that allows you to control how it grows.

因此，要使网格窗格增长，您要么需要更改其首选宽度，要么使用允许您控制其增长方式的布局窗格。

For example:

例如：

gridPane.prefWidthProperty().bind(root.widthProperty());

will make the grid pane grow to the width of root. This will just add extra space to the right of all three columns, so additionally setting

将使网格窗格增长到根的宽度。这只会在所有三列的右侧添加额外的空间，因此另外设置

col2.setHgrow(Priority.ALWAYS);

will let col2have the extra width.

将让col2有额外的宽度。

Alternatively, using an AnchorPanefor root:

或者，使用AnchorPanefor root：

// Pane root = new Pane();
AnchorPane root = new AnchorPane();

and setting

和设置

AnchorPane.setLeftAnchor(gridPane, 0.0);
AnchorPane.setRightAnchor(gridPane, 0.0);

(again with the col2hgrowset) will have the same effect.

（再次与col2hgrow设置）将具有相同的效果。

Or you could do

或者你可以做

VBox root = new VBox();
root.setFillWidth(true);

(for example: there are many solutions).

（例如：有很多解决方案）。

The choice of solution depends on what other nodes, if any, you have inside the root pane.

解决方案的选择取决于根窗格中的其他节点（如果有）。

回答by Jordi Castilla

Actually your result is the expected 100 + 200 + 100 = 400px:

实际上你的结果是预期的100 + 200 + 100 = 400px：

final ColumnConstraints col1 = new ColumnConstraints(100, Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
//                                                   ↑
final ColumnConstraints col2 = new ColumnConstraints(200, Control.USE_COMPUTED_SIZE, Double.MAX_VALUE);
//                                                   ↑
final ColumnConstraints col3 = new ColumnConstraints(100, Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
//                                                   ↑

And you define:

你定义：

primaryStage.setWidth(600);

Just change medium column to fill the remainin 200px

只需更改中列以填充剩余部分 200px

final ColumnConstraints col1 = new ColumnConstraints(100, Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);
final ColumnConstraints col2 = new ColumnConstraints(400, Control.USE_COMPUTED_SIZE, Double.MAX_VALUE);
//                                                   ↑ change to 400
final ColumnConstraints col3 = new ColumnConstraints(100, Control.USE_COMPUTED_SIZE, Control.USE_COMPUTED_SIZE);

回答by Uluk Biy

Panedoes not automatically layouts its children. Try to use VBoxinstead. It will fill the width of available space by (if possible) resizing its childdren. This way the GridPane will resize on stage width changes.

Pane不会自动布局其子项。尝试使用VBox。它将通过（如果可能）调整其子项的大小来填充可用空间的宽度。这样 GridPane 将在舞台宽度变化时调整大小。

Now, you can manage the gridpane columns how they share the space. According to your description it is enough to set

现在，您可以管理网格窗格列如何共享空间。根据你的描述设置就够了

col2.setHgrow( Priority.ALWAYS );

回答by cagney

To make gridpane automatically adjust use the fxml. Don't do it with the java.

要使 gridpane 自动调整使用 fxml。不要用java来做。

See below they are set to a percentage width. The very last row in my example below has fixed settings.

见下文，它们被设置为百分比宽度。下面示例中的最后一行具有固定设置。

<GridPane fx:id="gridPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="700.0" xmlns="http://javafx.com/javafx/8.0.121" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">

  <columnConstraints>
    <ColumnConstraints percentWidth="50" /> 
    <ColumnConstraints percentWidth="50" />
  </columnConstraints>
  <rowConstraints>
    <RowConstraints percentHeight="35" />
    <RowConstraints percentHeight="35" />
    <RowConstraints maxHeight="106.0" minHeight="10.0" prefHeight="106.0" vgrow="ALWAYS" />
  </rowConstraints>
   <children>