JavaFx：如何把ImageView放入ListView

Question

我一直在尋找一些關於JavaFx ListView的線程，但仍然很難找到一個簡單而簡單的解決方案來在JavaFx ListView中放置一個JavaFx ImageView。我正在嘗試使用JavaFx框架創建聊天應用程序。在照片應該看起來像這樣。這不是重複的，因爲另一個線程對於像我這樣的初學者來說是模糊的。 ListView with imageview inside

我試過這樣的事情。我完全不知道這個提前感謝！

import javafx.application.Application; 
import javafx.collections.FXCollections; 
import javafx.collections.ObservableList; 
import javafx.scene.Scene; 
import javafx.scene.control.ListCell; 
import javafx.scene.control.ListView; 
import javafx.scene.image.Image; 
import javafx.scene.image.ImageView; 
import javafx.scene.layout.Priority; 
import javafx.scene.layout.VBox; 
import javafx.stage.Stage; 

public class Main extends Application { 
    ImageView imageView = new ImageView(); 
    Image image = new Image(Main.class.getResourceAsStream("bell.jpg")); 
    ListView<String> list = new ListView<String>(); 
    ObservableList<String> data = FXCollections.observableArrayList(
      "chocolate", "salmon", "gold", "coral", "darkorchid", 
      "darkgoldenrod", "lightsalmon", "black", "rosybrown", "blue", 
      "blueviolet", "brown"); 
    Image pic; 

    @Override 
    public void start(Stage stage) { 
     VBox box = new VBox(); 
     Scene scene = new Scene(box, 200, 200); 
     stage.setScene(scene); 
     stage.setTitle("ListViewSample"); 
     box.getChildren().addAll(list); 
     VBox.setVgrow(list, Priority.ALWAYS); 
     list.setItems(data); 

     list.setCellFactory(listView -> new ListCell<String>() { 
      public void updateItem(String friend, boolean empty) { 
       super.updateItem(friend, empty); 
       if (empty) { 
        setText(null); 
        setGraphic(null); 
       } else { 

        imageView.setImage(image); 
        setText(friend); 
        setGraphic(imageView); 
       } 
      } 

     }); 

     stage.show(); 
    } 


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

Answer 1

您不需要每次在ListView中設置圖像時都創建一個新的HBox。您可以直接使用ListView的setCellFactory()來獲得相同的結果。

這個例子只是答案Image in JavaFX ListView的擴展，並且包含可以嘗試和測試的Minimal, Complete, and Verifiable example。 如果你想知道這是如何工作的，我建議你先去看看這個鏈接的問題。

更新 - 如何調整圖像

要調整圖像以適合你想要的大小，使用的ImageView的的fitWidth()和fitHeight()方法。還有其他方法，如setSmooth()和setPreserveRatio()，它們也可以派上用場。

MCVE

import javafx.application.Application; 
import javafx.collections.FXCollections; 
import javafx.collections.ObservableList; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.ListCell; 
import javafx.scene.control.ListView; 
import javafx.scene.image.Image; 
import javafx.scene.image.ImageView; 
import javafx.scene.layout.VBox; 
import javafx.stage.Stage; 

public class ListViewWithImages extends Application { 

    private final Image IMAGE_RUBY = new Image("https://upload.wikimedia.org/wikipedia/commons/f/f1/Ruby_logo_64x64.png"); 
    private final Image IMAGE_APPLE = new Image("http://findicons.com/files/icons/832/social_and_web/64/apple.png"); 
    private final Image IMAGE_VISTA = new Image("http://antaki.ca/bloom/img/windows_64x64.png"); 
    private final Image IMAGE_TWITTER = new Image("http://files.softicons.com/download/social-media-icons/fresh-social-media-icons-by-creative-nerds/png/64x64/twitter-bird.png"); 

    private Image[] listOfImages = {IMAGE_RUBY, IMAGE_APPLE, IMAGE_VISTA, IMAGE_TWITTER}; 

    @Override 
    public void start(Stage primaryStage) throws Exception { 

     ListView<String> listView = new ListView<String>(); 
     ObservableList<String> items =FXCollections.observableArrayList (
       "RUBY", "APPLE", "VISTA", "TWITTER"); 
     listView.setItems(items); 

     listView.setCellFactory(param -> new ListCell<String>() { 
      private ImageView imageView = new ImageView(); 
      @Override 
      public void updateItem(String name, boolean empty) { 
       super.updateItem(name, empty); 
       if (empty) { 
        setText(null); 
        setGraphic(null); 
       } else { 
        if(name.equals("RUBY")) 
         imageView.setImage(listOfImages[0]); 
        else if(name.equals("APPLE")) 
         imageView.setImage(listOfImages[1]); 
        else if(name.equals("VISTA")) 
         imageView.setImage(listOfImages[2]); 
        else if(name.equals("TWITTER")) 
         imageView.setImage(listOfImages[3]); 
        setText(name); 
        setGraphic(imageView); 
       } 
      } 
     }); 
     VBox box = new VBox(listView); 
     box.setAlignment(Pos.CENTER); 
     Scene scene = new Scene(box, 200, 200); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 
    } 

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

輸出

Answer 2

除了我的評論，我會在這裏展示一些代碼，這爲我工作：

private void setListEntry(ListCell<Label> listCell, Label label) { 

     Image img = loadLableIcon(label); 

     GridPane row = new GridPane(); 
     row.setHgap(15); 
     row.setVgap(15); 

     ColumnConstraints col1 = new ColumnConstraints(); 
     col1.setPercentWidth(90); 
     ColumnConstraints col2 = new ColumnConstraints(); 
     col2.setPercentWidth(10); 

     ImageView icon = new ImageView(img); 

     javafx.scene.control.Label name = new javafx.scene.control.Label(label.getName()); 
     name.setMinWidth(120d); 

     javafx.scene.control.Label amount = new javafx.scene.control.Label("" + label.getSize()); 

     HBox iconAndName = new HBox(10); 
     iconAndName.setAlignment(Pos.CENTER_LEFT); 
     iconAndName.getChildren().addAll(icon, name); 

     row.add(iconAndName, 0, 0); 
     row.add(amount, 1, 0); 

     row.getColumnConstraints().addAll(col1, col2); 

     listCell.setGraphic(row); 
    } 

請注意：我不是在JavaFX的專家，所以我不知道這是最佳實踐與否。