如何在ComboBox javafx中设置ButtonCell? [英] How to set ButtonCell in ComboBox javafx?

问题描述

我正在尝试创建一个 ComboBox ，它将显示所选图像的预览，但是 ComboBox 而是显示字符串值.我阅读了许多建议，发现需要使用 setButtonCell()方法，但是我不知道如何使用.

I am trying to create a ComboBox that will display a preview of selected Image, but the ComboBox displays the string value instead. I read many suggestions and I found out that I need to use the setButtonCell() method but I don't know how.

这是我的代码:

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;
    }
}

我的comboBox 在此处输入图片描述

推荐答案

只需将一个单元格传递给 setButtonCell():

Just pass a cell to 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()方法中对其进行更新，而不是每次都创建一个新的.

Note that your cell implementation has a bug: if the cell is reused so that it was previously non-empty but is now empty, it won't clear out the text and graphic. You need to deal with all cases (including a null item/empty cell) in the updateItem() method. Also, it's better to create the ImageView once, and just update it in the updateItem() method than to create a new one each time.

由于您两次使用相同的 ListCell 实现，因此最好使用命名内部类而不是匿名类，以避免重复代码:

Since you use the same ListCell implementation twice, it's probably better to use a named inner class instead of an anonymous class, to avoid duplicating code:

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

这篇关于如何在ComboBox javafx中设置ButtonCell?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！