setOnMouseEntered 不适用于 ListView 中的 ImageView

Question

i have a problem with setOnMouseEntered on JavaFx for ImageViews. I'm trying to change the brightness of ImageViews placed in a Listview with ColorAdjust. The effect itself works for ImageViews that are not in the ListView.

I guess that only the ListView triggers the setOnMouseEntered, but not the ImageViews, which is my goal. The same problem is caused by the hover effects of the ImageViews, which are not triggered as soon as they are in a ListView.

fxml:

 <ListView fx:id="cardsView" />

java-Code:

@FXML private ListView<ImageView> cardsView;
private ObservableMap<ImageView, Card> hCards;

@FXML
public void initialize() {
  hCards= FXCollections.observableHashMap();
  cardsView.getItems().setAll(hCards.keySet());
  hCards.addListener(
    (MapChangeListener<ImageView, Card>)
        change -> {
          cardsView.getItems().removeAll(change.getKey());
          if (change.wasAdded()) {
            cardsView.getItems().add(change.getKey());
          }
        });
  }

Later, for each of these ImageViews will be added:

private void addLightEffectOnMouseEntered(ImageView imageView) {
  imageView.setOnMouseEntered(
    t -> {
      ColorAdjust colorAdjust = new ColorAdjust();
      colorAdjust.setBrightness(0.4);
      imageView.setEffect(colorAdjust);
    });
}

While debugging I figured out that things like css and the setOnMouseEntered are added correctly. So it seems to be somehow blocked by the ListView that the ChildNodes get the setOnMouseEntered or Hover effect instead of the ListView

Answer 1

Your problem is basically the same as this one: Adding EventHandler To ImageView contained in a Label . All Cell specializations, including ListCell , inherit from Labeled and all their default skins inherit from LabeledSkinBase , which is the source of your problem. As a fix to a bug (see other Q&A) when an ImageView is used as the graphic of a Labeled it is set to be mouse-transparent. Since the the ImageView is mouse-transparent your MOUSE_ENTERED handler can never be invoked for obvious reasons.

If you're not aware, the default cell factory of ListView returns a ListCell implementation that, when the item is an instance of Node , sets the graphic of the cell to the item. An easy fix is to use your own ListCell implementation that wraps the ImageView in another node, such as Pane . Here's an example:

listView.setCellFactory(lv -> new ListCell<>() {

  private final Pane imageViewContainer = new Pane();

  @Override
  protected void updateItem(ImageView item, boolean empty) {
    super.updateItem(item, empty);
    if (empty || item == null) {
      imageViewContainer.getChildren().clear();
      setGraphic(null);
    } else {
      imageViewContainer.getChildren().setAll(item);
      setGraphic(imageViewContainer);
    }
  }
});

This will prevent the ImageView from becoming mouse-transparent.

---

As a side note, it's typically not a good idea to use GUI objects (eg ImageView ) as the model item of a ListView (or any other virtualized control). In this case, it may be an even worse idea since this set-up encourages holding every Image related to your application in memory simultaneously. Depending on how many images there are, as well as how large those images are, this can easily lead to an OutOfMemoryError or at least consume an unnecessary amount of your users' RAM.

You may want to consider using Card as the model item combined with a memory-constrained cache of Image objects (see WeakReference / SoftReference , though you could also look for a third-party caching library). The Card class could hold the location of its associated image or the cache could derive the location based on the state of the Card .

You would still use an ImageView as the graphic of your ListCell , however, so you would still need to use the workaround mentioned above. What using a memory-constrained cache helps with is that, if a Card isn't being displayed in a ListCell then its associated Image possibly becomes eligible for garbage collection, thus reducing the memory demands of your application.

The cache also allows you to use the same Image everywhere in your application (the same Image can be shared between multiple ImageView s) and means you don't always load a new Image when a particular one is needed (as it could still be in memory when requested). In other words, the typical functionality provided by any cache.