如何在 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());
            }
        }
    }
}