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

Question

我在窗格内的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适合嵌套在Pane中的HBox的高度 ？

Answer 1

在您发布的代码中， HBox实际上比包含它的根Pane高（尽管它已被裁剪，因此您只能看到根旁边的部分）。 因此， fitHeight上的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);
    }
}

Answer 2

感谢James_D提出了解决方案。 甚至有可能将Pane保留为根。

唯一要添加的行是

hBox.setMinHeight(0);

也奇怪

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

应该删除。