Java组合框如何添加图标？

Question

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

我在FXML中定义了一个组合框,并在控制器类中创建了necesarry关联.但我想在这个组合框中添加图像.

仍然经过几个小时的谷歌搜索,我仍然无法解决这个问题.

你能帮助我一个关于如何实现目标的"简单"例子吗？

非常感谢!

我目前的代码是:(确定有一种更简单的方法可以做到这一点,但它有效!)

            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

将其注释中链接的示例 erhun作为起点,在fxml中定义ComboBox,如下所示,以便组合框项目包括带图形的标签(这些是您的"图标").

<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初始化方法中,为按钮设置一个自定义单元格(下面的简单单元格只接受选择项目的文本,但如果您喜欢,也可以包含图形):

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

以上只是一种方法.或者(也许最好)你可以为你的ComboBox塞巴斯蒂安在他的答案中指出一个细胞工厂.

修改样本的输出:

Answer 2

您需要自定义ComboBox 的CellFactory以维护框中项目的可视化。请参阅此链接以获取简短示例。

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

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

另请参阅有关此内容的文档。