在下拉列表中选择项目的QComboBox样式。

Question

我想在组合框的下拉菜单中对选中的项目进行样式化。

与其他问题不同的是，我不想为 "选中 "的项目设置样式（悬停在上面），而是为已经选中的项目设置样式。

默认的是某种勾，画在文本上。我想让选中的项目有粗体文字，而不打勾。

或者在最坏的情况下，只需将文本向右移动，使 "勾 "字正确可见。

我现在的情况是这样的。

请注意第17项，数字17上有个"√"。

这是我的样式表。

QComboBox
{
    subcontrol-origin: padding;
    subcontrol-position: top right;
    selection-background-color: #111;
    selection-color: yellow;
    color: white;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #565656, stop: 0.1 #525252, stop: 0.5 #4e4e4e, stop: 0.9 #4a4a4a, stop: 1 #464646);
    border-style: solid;
    border: 1px solid #1e1e1e;
    border-radius: 5;
    padding: 1px 0px 1px 20px;
}


QComboBox:hover, QPushButton:hover
{
    border: 1px solid yellow;
    color: white;
}

QComboBox:editable {
    background: red;
    color: pink;
}

QComboBox:on
{
    padding-top: 0px;
    padding-left: 0px;
    color: white;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #2d2d2d, stop: 0.1 #2b2b2b, stop: 0.5 #292929, stop: 0.9 #282828, stop: 1 #252525);
    selection-background-color: #ffaa00;
}

QComboBox:!on
{
    color: white;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #666, stop: 0.1 #555, stop: 0.5 #555, stop: 0.9 #444, stop: 1 #333);
}

QComboBox QAbstractItemView
{
    border: 2px solid darkgray;
    color: black;
    selection-background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #111, stop: 1 #333);
}

QComboBox::drop-down
{
     subcontrol-origin: padding;
     subcontrol-position: top right;
     width: 15px;
     color: white;
     border-left-width: 0px;
     border-left-color: darkgray;
     border-left-style: solid; /* just a single line */
     border-top-right-radius: 3px; /* same radius as the QComboBox */
     border-bottom-right-radius: 3px;
     padding-left: 10px;
 }

QComboBox::down-arrow, QSpinBox::down-arrow, QTimeEdit::down-arrow, QDateEdit::down-arrow
{
     image: url(:/icons/down_arrow.png);
     width: 7px;
     height: 5px;
}

我试图覆盖项目的delagate:

ui->modeComboBox->setItemDelegate(new QStyledItemDelegate());

和...

QComboBox QAbstractItemView::item:selected style 

或者覆盖视图。

QListView * listView = new QListView(ui->modeComboBox);

listView->setStyleSheet("QListView::item {                              \
                         border-bottom: 5px solid white; margin:3px; }  \
                         QListView::item:selected {                     \
                         border-bottom: 5px solid black; margin:3px;    \
                         color: black;                                  \
                        }");
ui->modeComboBox->setView(listView);

但在这两种情况下，这将完全禁用所选项目的高亮（第17项）。

更新1

我测试了一下设置::item:checked样式表，但是没有用。

QListView * listView = new QListView(ui->modeComboBox);
listView->setStyleSheet("QListView::item {                              \
                         border-bottom: 5px solid white; margin:3px; }  \
                         QListView::item:selected {                     \
                         border-bottom: 5px solid black; margin:3px;    \
                         color: black; }                                \
                         QListView::item:checked {                      \
                         background-color: green;                       \
                         color: green;}"
                         );
ui->modeComboBox->setView(listView);

我还在样式表中添加了这个，以确保。

QComboBox QListView::item:checked {
 background-color: green;
}

检查17模式后的结果是（黑色只是鼠标悬停）。

更新2

好吧，我可以改变选中项的字体权重，但我不能从项中删除勾。我用我的样式表文件做了实验，我发现这两个选择器是负责选中项的高亮样式的。

QWidget:item:selected
{
     border: 0px solid #999900;
     background: transparent;
}
QWidget:item:checked
{
     font-weight: bold;
}

如果我删除了::item:selected，那么::item:checked就不起作用了(它不能使选中的项目变成粗体)，并且tick消失了。

在Qt论坛上，他们建议我以某种方式缩短 "combobox图标的空间"。我找不到负责这个问题的选择器。

Answer 1

好吧，经过一番挣扎，我做了一些变通的方法......它不是最好的，也不合适，但它看起来还不错。

我以这种方式添加了粗体效果（它会影响其他小部件，如可选中的菜单项，但我可以接受）。

QWidget:item:selected
{
     border: 0px solid #999900;
     background: transparent;
}
QWidget:item:checked
{
     font-weight: bold;
}

然后当我添加项目的时候，我在它们的文本中预置了空格，以便向右移动。我尝试了很多东西，但都没有影响到里面的QAbstractItemView。

这就是结果。

Answer 2

我成功地使用了不太具体的样式表选择器和 "padding-left"。

QComboBox:item {
    padding-left: 20px;  /* move text right to make room for tick mark */
}
QComboBox:item:selected {
    padding-left: 20px;  /* move text right to make room for tick mark */
    border: 2px solid black;
}
QComboBox:item:checked {
    padding-left: 20px;  /* move text right to make room for tick mark */
    font-weight: bold;
}

(可能这里面也有一些不必要的重复!)

Answer 3

我知道这真的很晚了，但是对于有同样问题的人来说：我在另一个问题上发现了这个问题。无法隐藏QComboBox的选择指示器。

这应该会隐藏指标图。

QComboBox::indicator{
    background-color:transparent;
    selection-background-color:transparent;
    color:transparent;
    selection-color:transparent;
}

Answer 4

@Miklemyers的回答删除了指示器的功能 但我发现还留有空白。为了移除空格，我发现我还得使用

QComboBox::item:selected {                                                                                                      
    border: none;
} 

Answer 5

这对我很有效！。

myComboBox->setStyleSheet("QListView{color:black; background-color:white;}");