窗格 -> Hbox -> ImageView 适合高度答案

【问题标题】：Pane -> Hbox -> ImageView fit height窗格 -> Hbox -> ImageView 适合高度
【发布时间】：2018-07-01 07:55:53
【问题描述】：

我在 Pane 内的 HBox 中有 ImageView，并且在调整舞台大小时希望 ImageView 高度适合 HBox 高度。试试下面的代码

package sample;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
        Pane pane = new Pane();
        pane.setBackground(new Background(new BackgroundFill(Color.RED, CornerRadii.EMPTY, Insets.EMPTY)));
        HBox hBox = new HBox();
        hBox.setBackground(new Background(new BackgroundFill(Color.GREEN, CornerRadii.EMPTY, Insets.EMPTY)));
        hBox.setPrefHeight(100);
        hBox.setPrefWidth(100);
        hBox.prefHeightProperty().bind(pane.heightProperty());
        ImageView imageView = new ImageView("http://www.calgary.ca/CA/city-manager/scripts/about-us/webparts/images/ourHistory_retina.jpg");
        imageView.fitHeightProperty().bind(hBox.heightProperty());
        imageView.setPreserveRatio(true);
        hBox.getChildren().add(imageView);
        pane.getChildren().add(hBox);
        primaryStage.setScene(new Scene(pane, 300, 275));
        primaryStage.show();
    }


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

启动时，ImageView 不适合窗口高度，它以原始大小显示。只有当我调整窗口大小以使其更大时，它才会放大，然后是原始图像大小。

我也看到了，hBox.prefHeightProperty().bind(pane.heightProperty()) 工作得很好（图像后面的红色 HBox 背景的高度是相应的窗口高度）。

看来imageView.fitHeightProperty().bind(hBox.heightProperty()) 的行为不像我预期的那样。

如何使 ImageView 适合 HBox 的 height，嵌套在 Pane 中？

【问题讨论】：

你能解释一下你真正想要做什么，特别是HBox的高度（和宽度）吗？看起来您希望它填充窗格的整个高度（但不是宽度）。如果是这样，最好为根使用布局窗格，让您这样做（而不是将 hbox 的高度绑定到窗格的高度）。对于 hbox 的宽度，您将 pref 宽度设置为 100，但图像视图的宽度将由图像和 hbox 的高度决定...
James，我正在尝试创建简单的水平画廊，将图像放入 hbox。在调整 HBox 的父级大小时，我需要图像高度与 HBox 高度完全匹配。

标签： java user-interface javafx javafx-8 javafx-2

【解决方案1】：

在您发布的代码中，HBox 实际上比包含它的根 Pane 高（尽管它被剪掉了，所以您只能看到根侧的部分）。因此，fitHeight 上的绑定按您的意愿运行，但相对于HBox 的首选高度的布局并没有达到您的预期。所以你需要更好地控制HBox的布局。

允许您最多控制的布局窗格是GridPane。因此，虽然可能有更简单的方法可以做到这一点，但使用 GridPane 作为根并将 HBox 放置在 0,0 的唯一单元格中，您可以控制如何调整 HBox 的大小。您在这里唯一需要做的就是允许HBox 无限期地缩小setMinHeight(0)。

我认为以下提供了您想要的行为：

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.layout.RowConstraints;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
        GridPane root = new GridPane();

        RowConstraints rc = new RowConstraints();
        rc.setVgrow(Priority.ALWAYS);

        root.getRowConstraints().add(rc);

        root.setBackground(new Background(new BackgroundFill(Color.RED, CornerRadii.EMPTY, Insets.EMPTY)));
        HBox hBox = new HBox();
        hBox.setBackground(new Background(new BackgroundFill(Color.GREEN, CornerRadii.EMPTY, Insets.EMPTY)));
        hBox.setMinHeight(0);
        ImageView imageView = new ImageView("http://www.calgary.ca/CA/city-manager/scripts/about-us/webparts/images/ourHistory_retina.jpg");
        imageView.fitHeightProperty().bind(hBox.heightProperty());
        imageView.setPreserveRatio(true);
        hBox.getChildren().add(imageView);
        root.add(hBox, 0, 0);         

        primaryStage.setScene(new Scene(root, 300, 275));
        primaryStage.show();
    }


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

【讨论】：

【解决方案2】：

感谢提出解决方案的 James_D。甚至可以将 Pane 保留为 root。

唯一要添加的行是

hBox.setMinHeight(0);

也很奇怪

hBox.setPrefHeight(100);
hBox.setPrefWidth(100);

应该被删除。

【讨论】：