Question

所以我有一个StackPane。它的高度设置为300。在堆栈窗格中是一个包含图像和标签的imageview。我将图像高度设置为250，对齐方式设置为居中。我将标签对齐方式设置为窗格的底部中心。但是，每次我运行代码时，图像都会被推到框架的底部，标签文本位于框架的顶部，因此很难阅读。堆栈窗格的高度是否为500，图像是否为100 Pos.TOP-CENTER和标签是否为基线中心都没有关系，文本不会像预期的那样显示在图像下方。相反，它显示在图像的底部。有人可以告诉我为什么会这样吗？

public class VBoxProductPane extends StackPane {

    private MainController mainController;
    private String name;
    private Image image;
    private String fileName;
    private double price;
    private int quantity;
    private Button button = new Button();
    private Product product;

    public VBoxProductPane(Product product){

        setPrefSize(250, 275);
        this.name = product.getName();
        this.price = product.getPrice();
        this.quantity = product.getQuantity();
        this.fileName = product.getFileName();
        this.product = new Product(this.name, this.price, this.quantity, this.fileName);
        setImage();
        setButton();
        setLabel();
        setOnMouseEntered(e -> {
                    button.setVisible(true);
                });
        setOnMouseExited(e -> {
            button.setVisible(false);
        });
    }
    private void setButton(){
        button.setText("Explore");
        getChildren().add(button);
        button.setVisible(false);
        button.setOnAction(e -> {
            button.setVisible(true);
        });
        button.setOnAction(e -> {
            try {
                FXMLLoader loader = new FXMLLoader();
                loader.setLocation(getClass().getResource("/ProductLayout.fxml"));
                Stage secondaryStage = new Stage();
                loader.setController(new ProductPage(mainController, product));
                secondaryStage.setTitle(product.getName());
                secondaryStage.setHeight(450);
                secondaryStage.setWidth(600);

                Scene scene = new Scene(loader.load());
                secondaryStage.setScene(scene);
                secondaryStage.show();
            } catch (IOException ex) {
                ex.printStackTrace();
            }
        });
    }
    private void setLabel(){
        Label label = new Label(getLabelText());
        setAlignment(label, Pos.BOTTOM_CENTER);
// this does nothing
        label.setLayoutY(250);
        label.setWrapText(true);
        label.setTextAlignment(TextAlignment.CENTER);
        getChildren().add(label);
        setAlignment(label, Pos.BOTTOM_CENTER);
    }
    private String getLabelText(){
        if (this.product.getName() == null){
            System.out.println("name is null");
        }
        return this.product.getName();
    }
    private Image getImage(){
        Image image = this.product.getImage();
        return image;
    }
    private void setImage() {
        ImageView imageViews = new ImageView();
        imageViews.setImage(this.product.getImage());
        setAlignment(imageViews, Pos.TOP_CENTER);
// this does nothing
        imageViews.setFitHeight(150);
// does not matter what this height is set to
// image is always displayed at the bottom with text over top
        imageViews.setFitWidth(250);
        imageViews.setY(0);
        getChildren().add(imageViews);
    }
}

Answer 1

ImageView是Node的非常简单的类型。它不能不可调整大小（没有最小值/最大值/首选项值）。不幸的是，这使得它在布局中使用起来非常笨拙。

例如，StackPane不能正确决定如何处理ImageView（因为它没有首选大小，甚至没有最大大小），而只能为其分配尽可能多的值尽可能的空间。

您可以解决的事情：

1）将ImageView包裹在容器中并设置其尺寸（将最大尺寸设置为与适合的尺寸相同）。

2）使用VBox或BorderPane，以便可以将Label正确地放置在底部。

3）使用setGraphic中的Label将Image直接与Label控件集成。

为什么我不能在图像（javafx）下方显示标签？

1 个答案: