Как я могу установить цвет границы, когда я устанавливаю изображение границы в QToolButton?

Я пытаюсь создать QToolButton с измененным размером изображения, цветом фона и рамкой. Я успешно получил изображение (используя border-image) и цвет фона, чтобы они отображались правильно. Тем не менее, я не могу показать границу, так как кажется, что цвет фона «покрывает» ее.

Я пытаюсь сделать это, используя таблицы стилей в Qt Creator 2.7.0 с Qt 4.8.4.

Моя таблица стилей:

border-radius: 4px;
border: 2px solid red;
border-image: url(myImage) 0 0 0 0 stretch stretch;
border-repeat: no-repeat;
background-color: rgb(100, 255, 100);

Я могу создать желаемый внешний вид, используя QLabel, установив растровое изображение для своего изображения, а затем установив цвет границы и фона в моей таблице стилей, но мне нужно, чтобы это была кнопка, на которую можно нажать. Любая идея, что я делаю неправильно?


qt stylesheet qtstylesheets
person Chris    schedule 16.05.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Итак, оказалось, что решение было довольно простым, но для полноты картины я расскажу о двух случаях, которые пробовал первыми.

Установка background-image для QToolButton помещает изображение на кнопку с исходным размером изображения. То есть он не масштабирует изображение и не изменяет его размер при изменении размера кнопки. Однако использование background-image позволило мне установить желаемую границу, поэтому я сначала подумал, что должен это сделать.

Установка border-image для QToolButton помещает изображение на кнопку с масштабируемым размером, чтобы соответствовать кнопке, и оно изменяет масштаб при изменении размера кнопки. К сожалению, этот метод переопределяет стиль границы, который я пытался установить.

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

Моя таблица стилей теперь:

border-radius: 4px;
border: 2px solid red;
image: url(myImage) 2 2 2 2 stretch stretch;
background-repeat: no-repeat;
background-color: rgb(100, 255, 100);

Редактировать: предостережение от использования только изображения заключается в том, что при необходимости оно будет уменьшаться, но не увеличиваться. Если ваша кнопка больше, чем ваше изображение, ваше изображение не будет растягиваться, чтобы соответствовать вашей кнопке. К счастью для меня, мое изображение было больше моей кнопки, поэтому оно уменьшилось. См.: http://qt-project.org/doc/qt-4.8/stylesheet-reference.html#image-prop

person Chris    schedule 16.05.2013
comment
Это также работает для Qt 5. Спасибо! (проверено на: Ubuntu, Qt Creator 4.5.2, Qt 5.9.5, GCC 7.3.0, 64-разрядная версия) - person Marco Carletti; 05.06.2020

arrow_upward
0
arrow_downward

Установите изображение, используя background-image, так как вы используете border-image, оно переопределяет ваш стиль, установленный на border

border-radius: 4px;
border: 2px solid red;
background-image: url(:/myImage.png);
background-color: rgb(100, 255, 100);
person warunanc    schedule 16.05.2013
comment
Фоновое изображение не масштабируется на QToolButton. Если изображение слишком большое, оно выходит за пределы кнопки. Если оно слишком маленькое, изображение не растягивается до размера кнопки. Я думаю, что использую изображение рамки правильно, я просто не могу заставить границу работать. Я копирую старую версию пользовательского интерфейса, которая имеет кнопку в качестве QToolButton, но использует палитру для установки всего, и, похоже, она работает правильно для этого, но я хочу перейти на использование таблиц стилей. - person Chris; 16.05.2013