Russian Qt Forum

Всем доброго времени.

Давно не "брал в руки" Qt виджеты. Но тут появилась необходимость реализовать GUI похожий на  QTabView (см. аттач).

Суть в том, что в "табах" имеются только картинки (иконки). При выборе "таба" его иконка подсвечивается и появляется треугольничек указывающий на выбранный таб.

С иконками и заливкой я вроде разобрался (использовал стили и пр. ). Но проблема в отрисовке этого самого треугольничка (да и всего виджета).  

Я так понимаю, что нужно взять QTabBar, отнаследоваться от него и попытаться рисовать кастомные табы самому, т.е. при активации таба, его контур должен выглядеть как-то так:


Подскажите, GUI гуру, как бы вы реализовали это, как проще и быстрее?  

Я б не долго думая взял бы виджет, накидал туда кнопок и запилил самоделку :P
Посмотрю счас, что можно сделать :)

update: так просто через tabBar не получится, я думаю. Ну, с наскока точно. Я бы предложил просто самописный виджет из кнопочек. Быстро и незатратно.

update: с "прозрачной" стрелочкой всё сложно. Но можно просто обмануть пользуна, если знать заранее цвет фона, или же брать его откуда то :)

Размялся чуток, вот что получилось https://dl.dropboxusercontent.com/u/101053289/Gif/3.gif.
В общем как то так - в архиве программа с классом и pro файлом.
https://dl.dropboxusercontent.com/u/101053289/Program/progorgTabView.zip

PS ничего сложного ^.^, прошу прощения за корявый (мб) код.

Взять вертикальный QToolBar (или просто QVBoxLayout), в него, как уже сказано накидать кнопок, и рядом QStackedWidget. Натянуть на всё это stylesheet, стрелочка - в нарисованной png.

CSS
QToolBar{
  border: none;
}
 
QToolButton{
  border: none;
  background-color: rgb(0, 135, 135);
}
 
QToolButton:checked{
  border-image: url(:/images/grayarrow.png) stretch;
}
 
QStackedWidget{
  background: rgb(127, 127, 127);
}
 

to mitrich: Тогда в вашем варианте ещё нужна QButtonGroup и всё равно нужно обвязку в коде делать.
PS на мой взгляд не очень :)

Ох, парни, спасибо..

Мне импонирует как-то вариант со стилями. Т.к. при нажатии на баттон она должна "подсвечиваться" другой иконкой (типо активно/неактивно).  Тем более, кажется, что у баттонов есть вариант установки иконок при нажатии и итпускании.. Попробую с ним..  :)

Стоп, а проперти "border-image" - это что такое? Где оно будет отрисовано?

C++ (Qt)
QToolButton:checked{
  border-image: url(:/images/grayarrow.png) stretch;
}
 

Ну на правах автора могу заметить, что в моём коде для этого достаточно пару строчек поменять. QIcon имеет все состояния аля активно-неактивно-он-офф.
Но раз стили нравятся, ничего не могу поделать.

Я делал свой виджет.
Еще вариант посмотреть, как сделано в QtCreator (fancytabwidget). Мне там не очень понравилось, как перерисовываются кнопки.
В своем варианте сделал подсветку как у fancytabwidget. Бонус - анимированный указатель-стрелка.
Можно менять цвет указателя, добавлять кнопки сверху и снизу. Документации нет, код нужно допилить: убрать лишний заголовок, переписать пару коннектов, если qt < 5.

Сделано так: в QVBoxLayout напихиваем QWidget (кнопки, рисуют себя сами), а поверх этого бегает стрелка. В принципе просто, у Вереса наверное что-то похожее.

У меня просто Widget без кнопок с обработкой нажатий и переопределённым рисованием :D

"Ты недооцениваешь мою мощь" ©

А так и мой допилить надо до красивостей. Hover/click/leave эффекты делаются просто. Так же и с состоянием иконок - там QIcon само автоматом рисует в зависимости от переданного состояния :)

По сути, то же самое, что и background-image - см. border-image (http://qt-project.org/doc/qt-4.8/stylesheet-reference.html#border-image) - только растягивается/сужается по размеру элемента (или я просто не понял, как background-image растягивать).

Все, спасибо, парни.

Ну ты хоть в двух словах расскажи, как решил делать.

Border-image это изображение, что будет растиражировано на бордере :) Ну на границе. Чтобы всякие красивости делать типо обожжённых краёв или свитков :D