使 VBox 适合父 GridPane

Question

我的 GridPane 有两列：第一列包含固定大小的 ImageView，第二列包含带有文本元素的 VBox。我需要这个 VBox 来适应列宽。 Grid 具有正确的尺寸，ImageView 也是，但是第二列中的 VBox 适合它包含的文本，而不适合父级（网格）。

VBox box = new VBox();
// all three texts can be changed during program execution by user
// (so 'box' width cannot be based on children widths)
box.getChildren().addAll(new Text("1"), new Text("2"), new Text("3"));
box.setStyle("-fx-background-color: red;");

Image image = ...; // image is always 150x150 px
ImageView imgView = new ImageView(image);
GridPane grid = new GridPane();
grid.add(imgView, 0,0);
grid.add(box,1,0);
grid.add(new Text("another content"), 0,1,2,1);

根据给定的示例，我希望 'box' 具有与 'grid' 对象的第二列相同的宽度。如何解决这个问题？

带绿色边框的容器：GridPane 网格浅蓝色边框的容器：VBox box GridPane 有红色背景，VBox 有粉红色背景。你可以看到它显然不适合它的父宽度。

提前致谢

Answer 1

了解首选尺寸

当组件放置在没有附加组件、场景或舞台大小限制的场景中时，默认大小调整机制是将所有组件调整为它们的首选大小。

来自Scene javadoc:

The scene's size may be initialized by the application during construction. If no size is specified, the scene will automatically compute its initial size based on the preferred size of its content.

按预期工作

您提供的代码按我的预期工作 - 所有内容都调整为首选大小。

没有任何列像您的评论中指出的那样有 1000 像素宽，因此您必须有一些额外的代码来确保布局不会按您希望的方式运行。

示例程序

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.*;
import javafx.scene.layout.*;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class GridSample extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        VBox box = new VBox();
        box.getChildren().addAll(new Text("1"), new Text("2"), new Text("3"));
        box.setStyle("-fx-background-color: red;");

        Image image = new Image(IMAGE_LOC);
        ImageView imgView = new ImageView(image);
        GridPane grid = new GridPane();
        grid.add(imgView, 0,0);
        grid.add(box, 1, 0);
        grid.add(new Text("another content"), 0,1,2,1);

        stage.setScene(new Scene(grid));
        stage.show();

        System.out.println("Grid width:  " + grid.getWidth());
        System.out.println("Image width: " + imgView.getLayoutBounds().getWidth());
        System.out.println("Box width:   " + box.getWidth());
        final double secondColWidth = 
                grid.getWidth() - imgView.getLayoutBounds().getWidth();
        System.out.println(
                "Width of box matches width of second grid column: " +
                        (box.getWidth() == secondColWidth)
        );
    }

    public static void main(String[] args) {
        launch(args);
    }

    public static final String IMAGE_LOC =
            "http://icons.iconarchive.com/icons/designbolts/thin-download/128/Download-from-Internet-icon.png";
    // icon License: Linkware (Backlink to http://www.designbolts.com required)

}

程序输出

Grid width:  137.0
Image width: 128.0
Box width:   9.0
Width of box matches width of second grid column: true

Answer 2

您可以将 Hgrow 设置为 GridPane 的子项。将 HGrow 设置为 Always 将允许他们占用 total width available 给他们。

由于 box 是 gridPane 的子项，您可以使用静态方法 setHgrow

应用属性

GridPane.setHgrow(box, Priority.Always);

对于与height类似的问题，您可以使用setVGrow(Node child, 优先级值).

使 VBox 适合父 GridPane

Fit VBox to parent GridPane

java

javafx

vbox

gridpane