Java组合框如何添加图标？

Question

是FXML的新手，我正在构建一个应用程序。现在我遇到了无法解决的问题。

我在FXML中定义了一个组合框，并在控制器类中创建了necesarry关联。但我想将图像添加到此组合框。

在Google上搜索了几个小时后，我仍然无法解决此问题。

你们能帮我举一个“简单的”例子来实现我的目标吗？

非常感谢！

我当前的代码是：（确保有更简单的方法可以执行此操作，但是它可以工作！）

ImageView img1 = new ImageView("Layout/nl.png");
ImageView img2 = new ImageView("Layout/en.png");

AnimalBoxLanguage.getItems().addAll(img1, img2);

AnimalBoxLanguage.setCellFactory(new Callback<ListView<ImageView>, ListCell<ImageView>>() {
    @Override 
    public ListCell<ImageView> call(ListView<ImageView> p) {
        return new ListCell<ImageView>() {
            private final ImageView rectangle;
            { 
                setContentDisplay(ContentDisplay.GRAPHIC_ONLY); 
                rectangle = new ImageView();
            }

            @Override 
            protected void updateItem(ImageView item, boolean empty) {
                super.updateItem(item, empty);

                if (item == null || empty) {
                    setGraphic(null);
                } else {
                    rectangle.setImage(item.getImage());
                    setGraphic(rectangle);
                }
            }
        };
    }
});

Answer 1

您需要自定义组合框的CellFactory，以保持框中项目的可视化。参见this link的简短示例。

要使图像在控制区域中可见（选择一项后，必须将组合框的按钮单元格设置为其中一个单元格。 JavaFX将相应地自动更新它们。基本上，您要做的就是使用自定义单元工厂设置组合框时：

mycombobox.setButtonCell(myCellFactory.call(null));

也可以参考documentation。

Answer 2

以他的注释中链接的sample erhun为起点，如下所示在fxml中定义ComboBox，以便组合框项目包括带有图形的Label（这些是您的“图标”。）]]

<ComboBox fx:id="fruitCombo" layoutX="15.0" layoutY="33.0" prefWidth="90.0" promptText="choose">
  <items>
    <FXCollections fx:factory="observableArrayList">
      <Label text="Apple">
        <graphic> 
          <StackPane prefWidth="50">
            <ImageView fitHeight="32" preserveRatio="true">
              <image>
                <Image url="http://uhallnyu.files.wordpress.com/2011/11/green-apple.jpg" preserveRatio="false" smooth="false" />
              </image>
            </ImageView>
          </StackPane>  
        </graphic>  
      </Label>  
      <Label text="Pear">
        <graphic> 
          <StackPane prefWidth="50">
            <ImageView fitHeight="32" preserveRatio="true">
              <image>
                <Image url="http://smoothiejuicerecipes.com/pear.jpg" preserveRatio="false" smooth="false" />
              </image>
            </ImageView>
          </StackPane>  
        </graphic>  
      </Label>  
      <Label text="Orange">
        <graphic> 
          <StackPane prefWidth="50">
            <ImageView fitHeight="32" preserveRatio="true">
              <image>
                <Image url="http://i.i.com.com/cnwk.1d/i/tim/2011/03/10/orange_iStock_000001331357X_540x405.jpg" preserveRatio="false" smooth="false" />
              </image>
            </ImageView>
          </StackPane>  
        </graphic>  
      </Label>  
    </FXCollections>
  </items>
</ComboBox>
并且在FruitComboController的initialize方法中，为按钮设置一个自定义单元格（下面的简单单元格仅包含所选择项目的文本，但是如果您愿意，还可以包括一个图形）：

ListCell<Label> buttonCell = new ListCell<Label>() {
  @Override protected void updateItem(Label item, boolean isEmpty) {
    super.updateItem(item, isEmpty);
    setText(item == null ? "" : item.getText());        
  }
};
fruitCombo.setButtonCell(buttonCell);
以上只是执行此操作的一种方法。正如塞巴斯蒂安（Sebastian）在他的回答中指出的那样，您可以替代地（也许最好是）为ComboBox定义一个单元工厂。
修改后的样本的输出：

ObservableList options = FXCollections.observableArrayList();
//
Image img = new Image("/images/auto32.png");
ImageView imgView = new ImageView();
imgView.setImage(img);
//
Label lbl = new Label("test");
lbl.setGraphic(imgView);
// 
options.add(lbl);
options.add(lbl);
options.add(lbl);
//
myCombo.setItems(options);

Answer 3

ObservableList options = FXCollections.observableArrayList();
//
Image img = new Image("/images/auto32.png");
ImageView imgView = new ImageView();
imgView.setImage(img);
//
Label lbl = new Label("test");
lbl.setGraphic(imgView);
// 
options.add(lbl);
options.add(lbl);
options.add(lbl);
//
myCombo.setItems(options);