пользовательские кнопки со стрелками вниз, использующие CSS в Qt - PullRequest
Новая
       22

пользовательские кнопки со стрелками вниз, использующие CSS в Qt

1 голос
/ 08 ноября 2011

Мы разрабатываем приложение Qt с сенсорным экраном в формах C ++, для которого требуется широкое графическое изображение со стрелкой вниз, а также пользовательский фон. Я пытался получить что-то, что работает с использованием QSS, но до сих пор потерпел поражение.

Единственный способ получить широкую кнопку (размером более 16 пикселей) - использовать отрицательные поля: 

QComboBox {
    min-height:63px;
    max-height:63px;
    margin-right:47px;
    border-image:url(Resources/ComboBox_Center1.png);
    font-family:  "Franklin Gothic Medium";
    font-size:  22px;
}
QComboBox::drop-down {
    width:47px;
    border:0px;
    margin:0px;
    margin-right:-47px;
}
QComboBox::down-arrow {
    image:url(Resources/ComboBox_Right1.png);
}

Это помещает кнопку в правильное положение и делает область ввода правильного размера, но тогда стрелка вниз только открывает поле со списком, не открывает и затем закрывает.

Все остальные параметры либо расширяют область ввода на область (поле, границу), либо уменьшают весь элемент управления.

Установка тега background-image не имела никакого эффекта - только изображение границы показывало изображение.

Обратите внимание, что изображение границы (или цвет фона) всегда отображается даже под стрелкой.

Есть ли способ стилизовать только секцию ввода поля со списком? Кажется, что эта часть комбо должна иметь свой собственный дочерний селектор, но я этого не видел.

1 Ответ

3 голосов
/ 08 ноября 2011

Попробуйте это ... 

QComboBox {
    min-height:63px;
    max-height:63px;
    font-family:  "Franklin Gothic Medium";
    font-size:  22px;
    padding: 1px 1px 1px 1px;
}
QComboBox::drop-down {
   width: 47px;
   border: 0px;
}

QComboBox::down-arrow {
    image: url(Resources/ComboBox_Right1.png);
    width: 42px;
    height: 42px;
}

Примечание: ширина и высота на изображении со стрелкой вниз будет зависеть от того, какое изображение вы используете.Это работает для моего имиджа.

В таблицах стилей есть несколько странных вещей и множество скрытых трюков.Возможно, стоит потратить несколько минут, чтобы просмотреть этот , в котором описаны основные принципы работы таблиц стилей.Они кажутся простыми, но даже после некоторого использования я часто возвращаюсь к примерам и документации.

Фоновые изображения - одна из тех вещей, которая не очевидна.Вот то, что я взял прямо из документа.В большинстве случаев, когда мы устанавливаем изображение для фона, мы действительно хотим установить border-image.Я предполагаю, что причина, по которой вы не видите «background-image», заключается в том, что комбинированное окно является «сложным» виджетом, то есть состоит из нескольких других элементов, и поэтому фон скрыт за ними.

Обычно используется свойство background-image, но у него есть ряд недостатков: например, фон часто будет скрыт за украшением кнопки, поскольку он не считается фоном.Кроме того, при изменении размера кнопки весь фон будет растянут или выложен плиткой, что не всегда выглядит хорошо.Лучше использовать свойство border-image, поскольку оно всегда будет отображать изображение независимо от фона (вы можете комбинировать его с фоном, если в нем есть альфа-значения), и у него есть специальные настройки для изменения размера кнопки..

Что касается стилизации области ввода ... при условии, что ваш QComboBox является редактируемым, область ввода - это просто QLineEdit.Таким образом, вы всегда можете назначить таблицу стилей для редактирования строки следующим образом 

comboBox->lineEdit()->setStyleSheet(your style sheet);

Надеюсь, это поможет.

...