如何将图像工具提示添加到 JavaFX 中的 ComboBox 项?

Posted

技术标签:

【中文标题】如何将图像工具提示添加到 JavaFX 中的 ComboBox 项?【英文标题】:How to add image tooltips to ComboBox items in JavaFX? 【发布时间】:2016-12-08 21:16:23 【问题描述】:

我想为ComboBox 中的每个项目添加一张照片,因此当用户将鼠标悬停在ComboBox 中该项目的名称上时,将显示该项目的照片。

这是我的代码:

    lights.setConverter(new StringConverter<Light>() 
        @Override
        public String toString(Light object) 
            return object.getName();
        

        @Override
        public Light fromString(String string) 
            return null;
        
    );



    lights.setItems(FXCollections.observableArrayList
           (new Light ("Incandescent", 5.23),
            new Light ("Halogen", 5.75),
            new Light ("fluorescent",7.29),
            new Light ("Compact fluorescent bulbs",4.83),
            new Light ("LED",4.83)));


    lights.setPromptText("Please select a light");
    lights.setPrefWidth(100);


         lights.valueProperty().addListener((obs, oldVal, newVal) -> 
         String selectionText = "The price for the " + newVal.getName() + " light is : $" + newVal.getPrice();
       lightNamePrice.setText(selectionText);
    );

 private class Light 
    private String name;
    private Double price;

    private Double getPrice() 
        return price;
    

    private String getName() 
        return name;
    

    private Light(String name, Double price) 
        this.name = name;
        this.price = price;

    


有人有什么想法吗?我是 JavaFX 的新手,所以我能得到的任何帮助都会很棒。

【问题讨论】:

【参考方案1】:

您可以使用ComboBoxsetCellFactory 方法来自定义下拉列表中项目的呈现方式,以返回一个ListCell,其中附加了一个Tooltip,因为ListCell 是一个Control 的子类,因此它提供了setTooltip 方法。

示例

我更新了Light 类,使该类的每个实例都能够拥有自己的图像:

private class Light 
    private String name;
    private Double price;
    private Image image;

    public Image getImage() 
        return image;
    

    private Double getPrice() 
        return price;
    

    private String getName() 
        return name;
    

    private Light(String name, Double price, Image image) 
        this.name = name;
        this.price = price;
        this.image = image;
    

然后我更新了填充数据的代码以使用(相同的)Image:

Image image =  new Image(getClass().getResource("light.png").toExternalForm(), 100, 100, true, true);

lights.setItems(FXCollections.observableArrayList
       (new Light ("Incandescent", 5.23, image),
        new Light ("Halogen", 5.75, image),
        new Light ("fluorescent",7.29, image),
        new Light ("Compact fluorescent bulbs",4.83, image),
        new Light ("LED",4.83, image)));

最后是细胞工厂的更新:

lights.setCellFactory(param -> 
    return new ListCell<Light>() 

        @Override
        public void updateItem(Light item, boolean empty) 
            super.updateItem(item, empty);

            if (item != null) 
                setText(item.getName());

                // Add the Tooltip with the image of the current item
                Tooltip tt = new Tooltip();
                tt.setGraphic(new ImageView(item.getImage()));

                setTooltip(tt);
             else 
                setText(null);
                setTooltip(null);
            
        
    ;
);

结果:

您也可以查看有关图像工具提示的问题:How to show Image as tooltip in JavaFX?

【讨论】:

我使用了这个例子,但我遇到了这个错误,我试图修复它,但我不知道我做错了什么。这是我得到的错误。错误:找不到符号return new ListCell&lt;Light&gt;() 符号:类 ListCell 我看不到你是如何使用代码的,所以我不知道哪里出了问题。但是,如果您正确复制所有内容,它应该可以“开箱即用”:)

以上是关于如何将图像工具提示添加到 JavaFX 中的 ComboBox 项?的主要内容,如果未能解决你的问题,请参考以下文章

JavaFx 添加图像

如何将工具提示添加到 jtable 中的单元格?

如何将工具提示添加到 Telerik 树视图

如何将行和列添加到 JavaFX 8 TableView

你如何添加到工具提示,HighCharts 中的一个系列?

如何将工具提示添加到 primeNG 表中的特定标题列