如何以编程方式用户根据 JavaFX 中的字符串值定义列表视图的颜色

Posted 2023-03-06

【中文标题】如何以编程方式用户根据 JavaFX 中的字符串值定义列表视图的颜色

【英文标题】：How to programmatically user define colors for a list view based on a string value in JavaFX

【发布时间】：2013-07-04 12:13:04

【问题描述】：

如果行中的文本与用户指定的文本匹配，我需要能够突出显示列表框中的一行，即用户说突出显示所有包含“警告”一词的行…… 我四处打听，发现 this Alex 向我展示了如何使用样式表。

我实现了上面的解决方案。但现在我想增强它，以便用户可以选择多个字符串值的前景色和背景色（第一个指定的优先级最高） 我玩过 CSS 并添加了一种样式，并根据是否找到文本，我删除并添加 CSS 样式表以提供如下效果：

highlighter.css

/** Highlighting for list-view search result cells */

.list-cell.search-highlight 
-fx-background-color: tomato;
-fx-accent: firebrick;


.list-cell:filled:hover.search-highlight 
-fx-background-color: derive(tomato, -20%);


.list-cell.search-highlight2 
-fx-background-color: yellow;
-fx-accent: firebrick;


.list-cell:filled:hover.search-highlight2 
-fx-background-color: derive(yellow, -20%);

删除/添加css的java代码 SearchHighlightedTextCell.java

public class SearchHighlightedTextCell extends ListCell<String> 

private static final String HIGHLIGHT_CLASS = "search-highlight";
private static final String HIGHLIGHT_CLASS2 = "search-highlight2";
private StringProperty searchText = new SimpleStringProperty("");
private StringProperty searchText2 =  new SimpleStringProperty("");

SearchHighlightedTextCell(StringProperty searchText, StringProperty searchText2) 
    this.searchText = searchText;
    this.searchText2 = searchText2;


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

    setText(text == null ? "" : text);

    updateStyleClass();
    searchText.addListener(new InvalidationListener() 
        @Override
        public void invalidated(Observable observable) 
            updateStyleClass();
        
    );

    searchText2.addListener(new InvalidationListener() 
        @Override
        public void invalidated(Observable observable) 
            updateStyleClass();
        
    );


private void updateStyleClass() 
    try 
        if (!isEmptyString(searchText.get()) && !isEmptyString(getText()) && getText().toUpperCase().contains(searchText.get().toUpperCase()))            
            getStyleClass().remove(HIGHLIGHT_CLASS2);
            getStyleClass().add(HIGHLIGHT_CLASS);

         else if (!isEmptyString(searchText2.get()) && !isEmptyString(getText()) && getText().toUpperCase().contains(searchText2.get().toUpperCase())) 
            getStyleClass().remove(HIGHLIGHT_CLASS);
            getStyleClass().add(HIGHLIGHT_CLASS2);            

         else 
            getStyleClass().remove(HIGHLIGHT_CLASS2);
            getStyleClass().remove(HIGHLIGHT_CLASS);
        
     catch (Exception e) 
        e.printStackTrace();
                 


private boolean isEmptyString(String text) 
    return text == null || text.equals("");

这会产生类似的东西

但问题是我不可能在样式表中定义前景色和背景色的所有组合。 有没有一种方法可以根据用户偏好以编程方式手动添加样式表。 或者还有其他方法可以做到这一点。 这是我为用户设计的屏幕，用于指示应突出显示的内容

【参考方案1】：

据我所知，JavaFX 2.2 目前缺少该功能。到目前为止，在这些情况下，我所做的是以编程方式创建 CSS 文件，将其写入临时文件并在用户选择新首选项时将其添加为样式表。当然，这是一个非常尴尬的解决方法。

另一种可能性，虽然可以说更不干净，但根本不使用具体的 CSS 类，而是直接使用 Node#setStyle(String) 来操作元素的样式。

【参考方案2】：

您可以在列表视图中使用 cellfactory 轻松做到这一点

listView.setCellFactory(new Callback<ListView<String>, ListCell<String>>() 
            @Override
            public ListCell<String> call(ListView<String> stringListView) 
                return new ListCell<String>()
                    @Override
                    protected void updateItem(String s, boolean b) 
                        super.updateItem(s, b);    //To change body of overridden methods use File | Settings | File Templates.
                        if (b) 
                            setText(null);
                            setGraphic(null);
                        
                        if (s.contains("warning"))
                            setStyle(your style here);
                                    setGraphic(your graphics);
                            setText(your text);
                        
                        if (s.contains("error"))
                            setStyle(your style here);
                            setGraphic(your graphics);
                            setText(your text);
                        
                    
                ;
            
        );