Как я могу создать пользовательскую кнопку из 3 состояний?
Мне нужно создать пользовательскую кнопку, которая будет иметь 3 разных фоновых изображения, соответствующих следующим состояниям:
- нормальный
- наведите курсор мыши
- мышь вниз
Я хотел бы иметь QHBoxLayout с 3 частями для левой стороны, правой стороны и средней стороны (сторона растяжения) для кнопки.
Внутри среднего размера я хотел бы иметь ярлык для отображения текста.
Мне нужно, чтобы эта кнопка также имела событие «нажал».
Я делал много поисков, чтобы достичь этого, но я действительно потерян. Я пробовал много вещей, включая пользовательский виджет из QWidget или стиль QPushButton с таблицами стилей, но мне не удалось получить 3 изображения для 3 состояний мыши и событие clicked.
Я ищу помощь.
Решение
Вы можете использовать border-image свойство, составляя одно изображение для каждого состояния, как это:
| | Левое изображение | Среднее изображение | Правильное изображение | |
затем, указав размеры изображения слева и справа в качестве размеров среза границы и ширины границы таблицы стилей. Например, если правое изображение имеет ширину 25 пикселей, а левое — 20, вы получите:
QPushButton {
border-image: url(:/normal.png) 0 25 0 20 stretch stretch;
border-width:0 25 0 20; /* without it, only the middle images would show */
}
QPushButton:hover {
border-image: url(:/hover.png) 0 25 0 20 stretch stretch;
}
QPushButton:pressed {
border-image: url(:/pressed.png) 0 25 0 20 stretch stretch;
}
Значения представляют расстояние между верхней, правой, нижней и левой сторонами изображения.
Другие решения
ну, во-первых, у вас должно быть 3 изображения для 3 состояний, а затем вы можете использовать функцию setStyleSheet .
QPushButton *btn = new QPushButton;
btn->setStyleSheet("QPushButton{background:url(:/Resources/pause_nor.png);border:0px;}""QPushButton:hover{background:url(:/Resources/pause_over.png);border:0px}""QPushButton:pressed{background:url(:/Resources/pause_over.png); position: relative;top: 1px; left: 1px;}");