每個選定項目的JavaFX組合框背景顏色

Question

我想基於所選項目更改ComboBox的背景。

例如：如果選擇了第一項，那麼背景應該是綠色的，如果第二個選擇了紅色的話。

這可能嗎？

Answer 1

如果您只想設置ComboBox本身的顏色而不是項目ComboBox的下拉列表中，您可以在和ComboBox的valueProperty之間創建自定義綁定，以實現自定義着色。

例

此示例顏色ComboBox到如果第一項被選擇，以紅色如果選擇了第二項，和葉着色，因爲它是否則綠色。

更新：的ComboBox的箭頭按鈕的背景顏色現在也着色，對於該lookup方法可以用來獲取箭頭按鈕：StackPane arrowButton = (StackPane) combo.lookup(".arrow-button");。

ComboBox<String> combo = new ComboBox<>(); 
combo.setItems(FXCollections.observableArrayList("First", "Second", "Third", "Fourth")); 

combo.buttonCellProperty().bind(Bindings.createObjectBinding(() -> { 

    int indexOf = combo.getItems().indexOf(combo.getValue()); 

    Color color = Color.TRANSPARENT; 

    switch (indexOf) { 
    case 0: color = Color.GREEN; break; 
    case 1: color = Color.RED; break; 
    default: break; 
    } 

    final Color finalColor = color; 

    // Get the arrow button of the combo-box 
    StackPane arrowButton = (StackPane) combo.lookup(".arrow-button"); 


    return new ListCell<String>() { 

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

      if (empty || item == null) { 
       setBackground(Background.EMPTY); 
       setText(""); 
      } else { 
       setBackground(new Background(new BackgroundFill(finalColor, CornerRadii.EMPTY, Insets.EMPTY))); 
       setText(item); 
      } 

      // Set the background of the arrow also 
      if (arrowButton != null) 
       arrowButton.setBackground(getBackground()); 
     } 

    }; 
}, combo.valueProperty())); 

結果是這樣的：

注意

1）如果您還想顏色在下拉列表中的項目，可以從這裏選擇其他答案的解決方案。

2）如果不顯示String秒，但那些能夠同時存儲該項目的顏色項目，解決的辦法是更短，只需要使用所選項目的顏色updateItem方法，而不是計算你自己的顏色。

Answer 2

當然這是可能的。在與ComboBox一起使用的cellFactory中創建自定義ListCell s，並根據其包含的項目使用它來修改Cell的樣式。

例子：

public class Item { 

    public Item(String value, Color color) { 
     this.value = value; 
     this.color = color; 
    } 

    private final String value; 
    private final Color color; 

    public String getValue() { 
     return value; 
    } 

    public Color getColor() { 
     return color; 
    } 
} 

ComboBox<Item> comboBox = new ComboBox<>(FXCollections.observableArrayList(
     new Item("Summer", Color.RED), 
     new Item("Winter", Color.CYAN), 
     new Item("Spring", Color.LIME), 
     new Item("Autumn", Color.BROWN) 
)); 

comboBox.setCellFactory(lv -> new ListCell<Item>(){ 

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

     if (empty || item == null) { 
      setBackground(Background.EMPTY); 
      setText(""); 
     } else { 
      setBackground(new Background(new BackgroundFill(item.getColor(), 
                  CornerRadii.EMPTY, 
                  Insets.EMPTY))); 
      setText(item.getValue()); 
     } 
    } 

}); 

comboBox.setButtonCell(comboBox.getCellFactory().call(null)); 

Answer 3

public class Main extends Application { 

Random r = new Random(); 
private class Item { 
    Color c; 
    String s; 
    public Item(Color a,String b){ 
     c = a; 
     s = b; 
    } 

    @Override 
    public String toString() { 
     // TODO Auto-generated method stub 
     return s; 
    } 
} 

private void addAll(List<String> items){ 
    for(String s : items){ 
     box.getItems().add(new Item(Color.WHITE,s)); 
    } 
} 

ComboBox<Item> box; 

@Override 
public void start(Stage primaryStage) { 

    Pane p; 

    try { 
     p = new StackPane(); 
     box = new ComboBox<Item>(); 
     box.setMinWidth(100); 
     addAll(Font.getFontNames()); 
     box.setCellFactory(new Callback<ListView<Item>, ListCell<Item>>() { 

      @Override 
      public ListCell<Item> call(ListView<Item> param) { 
       // TODO Auto-generated method stub 
       return new ListCell<Item>(){ 


        @Override 
        public void updateSelected(boolean selected) { 
         super.updateSelected(selected); 
         if(selected){ 
          getItem().c = Color.rgb(r.nextInt(205), 
            r.nextInt(205), r.nextInt(205), 1); 

         } 
         setStyle("-fx-text-fill: black; -fx-background-color: #" + 
           getItem().c.toString().substring(2)+";"); 
        } 

        @Override 
        protected void updateItem(Item item, boolean empty) { 
         // TODO Auto-generated method stub 
         super.updateItem(item, empty); 
         if(empty){ 
          return; 
         } 
         setText(item.toString()); 
         setStyle("-fx-text-fill: black; -fx-background-color: #" + 
           getItem().c.toString().substring(2)+";"); 
        } 

       }; 
      } 
     }); 
     p.getChildren().add(box); 
     p.setPrefSize(500, 500); 
     Scene scene = new Scene(p); 
     scene.getStylesheets().add(getClass(). 
       getResource("application.css").toExternalForm()); 
     primaryStage.setScene(scene); 
     primaryStage.show(); 

    } catch(Exception e) { 
     e.printStackTrace(); 
    } 
} 

Answer 4

combobox.valueProperty().addListener(new ChangeListener<String>() { 
     @Override 
     public void changed(ObservableValue ov, String t, String t1) { 
      if (t1.equals("Option 1")) { 
       combobox.setStyle(" -fx-background-color: #000000"); 
      } 
      if (t1.equals("Option 2")) { 
       combobox.setStyle(" -fx-background-color: #FFFFFF"); 
      } 
     } 
    }); 

你應該能夠做一些很簡單的像上面的一個基本變化監聽器，您可能需要刷新頁面（我經常只是刪除並重新添加組件，以便您可以看到發生的變化）

這是您想要選擇組合框項目的基礎上，然後更改框，而不是每個項目有不同的顏色從開始