Как сделать кастомный QComboBox

Question

Есть combobox и изображения-состояния для него.
Изображения-состояния:
Дефолтный док (defaultTX.png):

Нажатое (pressedTX.png):

При наведении мыши на док (rolloverTX.png):

Панель при раскрытом состоянии (panelTX.png):

На панели при выборе элемента (selectedTX.png):

И есть подгрузка стилей:

QFile combobox_style_file(":/Theme/combobox.qss");
combobox_style_file.open(QFile::ReadOnly);
auto comboboxstyle = QString::fromUtf8(hidebutton_style_file.readAll());
ui->servers->setStyleSheet(comboboxstyle);

Вопрос - как заполнить qss файл, чтобы привязать изображения к состояниям ComboBox.

Спасибо!

UPD [29.08.2020]

Важно уделить внимание именно панели, т.к. на текущий момент у меня получилось только это:

Answer 1

В документации Qt, в примерах qss, есть про QComboBox:

QComboBox {
    border: 1px solid gray;
    border-radius: 3px;
    padding: 1px 18px 1px 3px;
    min-width: 6em;
}

QComboBox:editable {
    background: white;
}

QComboBox:!editable, QComboBox::drop-down:editable {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
}

/* QComboBox gets the "on" state when the popup is open */
QComboBox:!editable:on, QComboBox::drop-down:editable:on {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #D3D3D3, stop: 0.4 #D8D8D8,
                                stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);
}

QComboBox:on { /* shift the text when the popup opens */
    padding-top: 3px;
    padding-left: 4px;
}

QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 15px;

    border-left-width: 1px;
    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;
}

QComboBox::down-arrow {
    image: url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png);
}

QComboBox::down-arrow:on { /* shift the arrow when popup is open */
    top: 1px;
    left: 1px;
}

В описании qss есть описание применимых к виджетам стилей, в том числе и для QComboBox.

Answer 2

Пока собираю потихоньку инфу - буду дополнять ответ
Вот код с комментариями:

// Основной стиль дока
QComboBox 
{
subcontrol-origin: padding; // ?
subcontrol-position: top right; // ?
selection-background-color: transparent; // ?
color: white; // Цвет текста
background-color: transparent; // Цвет фона
background-image: url(:/Theme/combobox/defaultTX.png); // Изображение фона
border-style: solid; // Тип окантовки
border: 1px solid #1e1e1e; // Цвет окантовки
border-radius: 5; // Радиус скругления краев
padding: 1px 0px 1px 20px; // Отступ текста 
}

// Стиль дока при наведении на него мыши
QComboBox:hover
{
    background-color: transparent; // Цвет фона
    background-image: url(:/Theme/combobox/rolloverTX.png); // Изображение фона
    color: white; // Цвет текста
}

// Стиль дока при нажатии мыши
QComboBox:on
{
padding: 1px 0px 1px 20px; // Отступ текста
color: white; // Цвет текста
background-color: transparent; // Цвет фона
background-image: url(:/Theme/combobox/pressedTX.png); // Изображение фона
}

// Стиль стрелочки (т.к. она уже входит в изображение - не показываем ее)
QComboBox::down-arrow
{
    background-color: transparent; // Цвет фона
}

В QSS НЕ ДОЛЖНО БЫТЬ КОММЕНТАРИЕВ, я добавил их, чтобы вы могли понять, какое свойство за что отвечает.

БЛОГ НА HUSL

Как сделать кастомный QComboBox

Ответы (2 шт):