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

Question

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

目前在我的代码中，勾号占据了所有可用的 space:

这是我的 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 将勾号放在右侧？即使没有，如何实现？

Answer 1

正如@jewelsea 在评论中所建议的那样，您可以提供自定义 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;
}

输出：

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

JavaFX/CSS Display an svg shape on the right side of a combo box list cell

css

java

svg

javafx

fxml