如何在ComboBox javafx中設置ButtonCell？

Question

我正在嘗試創建一個ComboBox，它將顯示所選圖像的預覽，但ComboBox會改爲顯示字符串值。 我讀了很多建議，我發現我需要使用setButtonCell()方法，但我不知道如何。

這是我的代碼：

public class ContentTabPaneController implements Initializable{ 

    @FXML 
    private JFXComboBox<CustomComboBox> cbxDevices; 

    private final ObservableList<CustomComboBox> data = FXCollections.observableArrayList(); 


    @Override 
    public void initialize(URL location, ResourceBundle resources) { 

     String smartPhoneImageSrc = "@../../image/device/iphone.png"; 
     String ipadImageSrc = "@../../image/device/ipad.png"; 

     data.clear(); 
     data.add(new CustomComboBox(smartPhoneImageSrc, "Smart Phone")); 
     data.add(new CustomComboBox(ipadImageSrc, "Ipad")); 


     cbxDevices.setCellFactory(new Callback<ListView<CustomComboBox>, ListCell<CustomComboBox>>() { 
      @Override 
      public ListCell<CustomComboBox> call(ListView<CustomComboBox> param) { 
       ListCell<CustomComboBox> cell = new ListCell<CustomComboBox>(){ 
        @Override 
        protected void updateItem(CustomComboBox item, boolean btl){ 
         super.updateItem(item, btl); 
         if(item != null) 
         { 
          Image img = new Image(item.getImageSrc()); 
          ImageView imgView = new ImageView(img); 
          imgView.setFitHeight(48); 
          imgView.setFitWidth(48); 
          setGraphic(imgView); 
          setText(item.getString()); 
         } 
        } 
       }; 

       return cell; 
      } 


     }); 
     cbxDevices.setItems(data); 
     //cbxDevices.setButtonCell(); how can i use this methode???? 



    } 




} 

這是我CustomComboBox類：

public class CustomComboBox { 

    private String imageSrc; 
    private String string; 

    public CustomComboBox(String imageSrc, String string) { 
     this.imageSrc = imageSrc; 
     this.string = string; 
    } 


    public String getImageSrc() { 
     return imageSrc; 
    } 

    public void setImageSrc(String imageSrc) { 
     this.imageSrc = imageSrc; 
    } 

    public String getString() { 
     return string; 
    } 

    public void setString(String string) { 
     this.string = string; 
    } 
} 

My comboBox enter image description here

Answer 1

細胞只是傳遞到setButtonCell()：

cbxDevices.setButtonCell(new ListCell<CustomComboBox>(){ 
    @Override 
    protected void updateItem(CustomComboBox item, boolean btl){ 
     super.updateItem(item, btl); 
     if(item != null) { 
      Image img = new Image(item.getImageSrc()); 
      ImageView imgView = new ImageView(img); 
      imgView.setFitHeight(48); 
      imgView.setFitWidth(48); 
      setGraphic(imgView); 
      setText(item.getString()); 
     } 
    } 
}); 

請注意，您的單元格實現有一個錯誤：如果單元格被重用，以前它是非空的，但現在是空的，它不會清除文本和圖形。您需要處理updateItem()方法中的所有案例（包括空項目/空單元格）。此外，最好創建一次ImageView，然後在updateItem()方法中更新它，而不是每次都創建一個新的。

由於您使用相同ListCell執行兩次，它可能會更好使用命名的內部類，而不是匿名類的，以避免重複代碼：

public class ContentTabPaneController implements Initializable{ 

    @FXML 
    private JFXComboBox<CustomComboBox> cbxDevices; 

    private final ObservableList<CustomComboBox> data = FXCollections.observableArrayList(); 


    @Override 
    public void initialize(URL location, ResourceBundle resources) { 

     String smartPhoneImageSrc = "@../../image/device/iphone.png"; 
     String ipadImageSrc = "@../../image/device/ipad.png"; 

     data.clear(); 
     data.add(new CustomComboBox(smartPhoneImageSrc, "Smart Phone")); 
     data.add(new CustomComboBox(ipadImageSrc, "Ipad")); 


     cbxDevices.setCellFactory(lv -> new CustomComboCell()); 
     cbxDevices.setButtonCell(new CustomComboCell()); 
    } 

    private static class CustomComboCell extends ListCell<CustomComboBox> { 

     private final ImageView imgView ; 

     CustomComboCell() { 
      imgView = new ImageView(); 
      imgView.setFitHeight(48); 
      imgView.setFitWidth(48); 
     } 

     @Override 
     protected void updateItem(CustomComboBox item, boolean btl){ 
      super.updateItem(item, btl); 
      if(item == null) { 
       setText(null); 
       setGraphic(null); 
      } else { 
       Image img = new Image(item.getImageSrc()); 
       imgView.setImage(img); 
       setGraphic(imgView); 
       setText(item.getString()); 
      } 
     } 
    } 
}