JavaFX/CSS 在组合框列表单元格的右侧显示 svg 形状

Posted 2023-03-28

【中文标题】JavaFX/CSS 在组合框列表单元格的右侧显示 svg 形状

【英文标题】：JavaFX/CSS Display an svg shape on the right side of a combo box list cell

【发布时间】：2021-11-12 12:47:11

【问题描述】：

我正在寻找一个组合框，所选项目应将其文本设置为粗体并在列表单元格的右侧显示一个勾号（勾号图标是 SVG）：

目前在我的代码中，勾号占用了所有可用空间：

这是我的 CSS：

.combo-box 
    -fx-background-color: transparent;
    -fx-border-color:     #44494F
    -fx-border-width:     1px


.combo-box .arrow 
    -fx-background-color: white;
    -fx-shape: -arrow;


.combo-box:showing .arrow 
    -fx-rotate: 180;


.combo-box .list-cell 
    -fx-font-size: 10px;
    -fx-text-fill: white;


.combo-box-popup .list-view 
    -fx-background-color: #2F353D;


.combo-box-popup .list-view .list-cell 
    -fx-background-color: #2F353D;
    -fx-border-width:     0px


.combo-box-popup .list-view .list-cell:filled:selected, .combo-box-popup .list-view .list-cell:filled:selected:hover
    -fx-font-weight: bold;
    -fx-shape:       "m184.405 461.013-184.405-184.405 24.354-24.354 160.051 160.051 332.279-332.279 24.354 24.354z";


.combo-box-popup .list-view .list-cell:filled:hover
    -fx-background-color: #393E44;

有没有办法只使用 CSS 将勾选放在右侧？即使没有，如何实现？

【问题讨论】：

查看this question 的答案，了解有关调整形状区域大小的信息。

我不确定您使用的是什么代码，您应该提供 minimal reproducible example，而不仅仅是 css，因为孤立的 css 对解决问题并没有多大帮助。

您可以提供custom cell factory 来呈现单元格（参见优先级组合框示例）。您可以使用布局窗格（例如 HBox）来呈现自定义单元格，或者只是一个带有刻度图形的标签以及适当的内容显示和对齐设置。

问题中的 css 甚至没有加载，从几行抛出加载错误 - 毫不奇怪，仔细看看 ;) 请注意，它必须是准确的（部分）在屏幕截图中生成组合的 css，最好作为@jewelsea 已经指出的minimal reproducible example 的一部分。

【参考方案1】：

正如 @jewelsea 在 cmets 中建议的那样，您可以提供自定义 CellFactory 来处理大小：

ComboBox<String> cb = new ComboBox<>();

cb.setCellFactory(lv -> 
    final ListCell<String> cell = new ListCell<>() 
        @Override 
        public void updateItem(String item, boolean empty) 
            super.updateItem(item, empty);
            setText(item != null ? item : null);
        
    ;
    Region icon = new Region();
    icon.getStyleClass().add("icon");
    
    cell.setGraphic(icon);
    cell.setGraphicTextGap(20);
    return cell;
);

您可以在css中设置大小和样式：

.combo-box-popup .list-view .list-cell .icon 
    -fx-min-width: 10;
    -fx-pref-width: 10;
    -fx-max-width: 10;
    
    -fx-min-height: 10;
    -fx-pref-height: 10;
    -fx-max-height: 10;
    
    -fx-shape: "m184.405 461.013-184.405-184.405 24.354-24.354 160.051 160.051 332.279-332.279 24.354 24.354z";
    -fx-background-color: white;


.combo-box-popup .list-view .list-cell 
    -fx-content-display: text-only;


.combo-box-popup .list-view .list-cell:filled:selected 
    -fx-content-display: right;

输出：

【讨论】：

if (item != null) setText(item); else setText(null); 是做什么的？

当有item时设置ListCell中的de文本，否则，它清除设置它null的文本。

所以和setText( item )一样

在这个具体的例子中是的，因为item 是String，否则你必须提取值。

注意：您不得在父节点之间共享节点（就像在 sn-p 中所做的那样，对所有单元格使用相同的图标实例）