Question

我希望有一个水平ListView，每个ListCell包含一个带有标签的Image。

除了ListView将在GridPane上，所以它的大小可以改变。知道我想要每个单元格及其内容，在这种情况下是图像，以填充所有高度。如果ListView改变大小，图像和label应调整大小以适应新的ListView大小。

现在它显示如下，如果图像小于listView：

如果图像大于ListView，它看起来像这样： biggerImage

问题在于它没有调整图像大小以适应可用的高度。

以下是截图示例中的代码。它使用来自placeholdit的图像：

package com.example;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Orientation;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.RowConstraints;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Callback;
import java.util.ArrayList;


public class Main extends Application {
    public static void main(String[] args) {
                                                 launch(args);
                                                              }

    @Override
    public void start(Stage primaryStage)  throws Exception {
        ObservableList<Image> imagesObservableList = FXCollections.observableList(new ArrayList<>());
        for (int i = 0; i<10;i++) {
            // Adding 10 images
            //Bigger one
//            Image image = new Image("https://placeholdit.imgix.net/~text?txtsize=14&txt=150%C3%97300&w=150&h=300");
            //Smaller one
            Image image = new Image("https://placeholdit.imgix.net/~text?txtsize=14&txt=50%C3%97150&w=50&h=150");
//            Image image = new Image(getClass().getClassLoader().getResource("image_50x150.png").toString());
            imagesObservableList.add(image);
        }
        ListView<Image> listView = new ListView<>(imagesObservableList);
        listView.setOrientation(Orientation.HORIZONTAL);
        listView.setCellFactory(new Callback<ListView<Image>, ListCell<Image>>() {
            @Override
            public ListCell<Image> call(ListView<Image> imageViewListView) {
                return new ListCell<Image>() {
                    ImageView imageView;
                    Label title;
                    VBox vBox;
                    {
                        vBox = new VBox();
                        vBox.setAlignment(Pos.CENTER);
                        imageView = new ImageView();
                        imageView.setPreserveRatio(true);
                        title = new Label("Title");
                        title.setAlignment(Pos.TOP_CENTER);
                        vBox.getChildren().addAll(imageView,title);
                        vBox.setFillWidth(false);
                        setGraphic(vBox);
                    }

                    @Override
                    protected void updateItem(Image image, boolean bln) {
                        super.updateItem(image, bln);
                        imageView.setImage(image);
                    }
                };
            }
        });
        GridPane pane = new GridPane();
        pane.addRow(0);
        pane.addRow(1, listView);
        pane.addRow(2);
        pane.addColumn(0);
        RowConstraints topBottomConstraint = new RowConstraints();
        topBottomConstraint.setPercentHeight(30);
        RowConstraints centerConstraint = new RowConstraints();
        centerConstraint.setPercentHeight(30);
        pane.getRowConstraints().add(topBottomConstraint);
        pane.getRowConstraints().add(centerConstraint);
        pane.getRowConstraints().add(topBottomConstraint);
        ColumnConstraints columnConstraints = new ColumnConstraints();
        columnConstraints.setPercentWidth(100);
        pane.getColumnConstraints().add(columnConstraints);
        primaryStage.setScene(new Scene(pane));
        primaryStage.show();
    }

}

我想这个想法是将imageView.fitHeightProperty（）绑定到某个东西。但我无法理解绑定的内容。我尝试将它绑定到单元格高度并减去“标题”高度，如下所示：

ImageView.fitHeightProperty().bind(heightProperty().subtract(title.heightProperty()));

但是它没有按照我的预期工作，直到我滚动它才显示出奇怪的效果。

JavaFX 8：ListView包含自动调整大小/自动调整大小的图像和标签

0 个答案: