QTabBar 첫번째 버튼 고정 효과 적용하기

디자이너가 웹에서 가끔보는 Tab 형태의뷰를 아래와 같이 가이드를 해주었다.

위에 처럼 해달라고.. ㅜㅜ

​

윈도우 어플리케이션이라 힘들텐데............ 라고 말을 했지만 존심은 허락하지 않음 ㅋ

​

위의 효과를 주기위해 #QTabBar 물어 뜯어보기로................ ㅋ

​

출처 : https://www.programmersought.com/

​

아무리 찾아봐도 답이 보이지 않았는데..... 구글링의 결과 아래와 같은 속성이 있었다.

QTabBar::tab:top:first // first 라는 속성이 있을 줄이야. 이것이 첫번째 버튼이다......

#StyleSheet를 완성해보자....

​

상단 TabBar를 기준으로 하였다.

QTabBar::tab:top { color: #4f4f4f; border: 1px solid #F0F0F0; border-top: 1px solid #E0E0E0; border-bottom: 2px transparent black; background-color: #ffffff; padding: 5px; min-width: 110px; border-top-left-radius: 1px; border-top-right-radius: 1px; height: 27px; } QTabBar::tab:top:selected { color: #0f0f0f; background-color: #E0E0E0; border: 1px solid #E0E0E0; border-top: 1px solid #E0E0E0; border-bottom: 2px solid #3daee9; border-top-left-radius: 1px; border-top-right-radius: 1px; } QTabBar::tab:top:!selected:hover { border-bottom: 1px solid #C0C0C0; background-color: #C0C0C0; } QTabBar::tab:top:!selected { border-bottom: 1px solid #E0E0E0; background-color: #ffffff; } QTabBar::tab:top:first { color: #4f4f4f; border: 1px solid #F0F0F0; border-top: 1px solid #E0E0E0; border-bottom: 1px solid #E0E0E0; background-color: #ffffff; padding: 5px; min-width: 27px; border-top-left-radius: 1px; border-top-right-radius: 1px; height: 27px; } QTabBar::tab:top:first:selected { color: #0f0f0f; background-color: #E0E0E0; border: 1px solid #E0E0E0; border-top: 1px solid #E0E0E0; border-bottom: 1px solid #E0E0E0; border-top-left-radius: 1px; border-top-right-radius: 1px; } QTabBar::tab:top:first:!selected:hover { border-bottom: 1px solid #C0C0C0; background-color: #C0C0C0; } QTabBar::tab:top:first:!selected { border-bottom: 1px solid #ffffff; background-color: #ffffff; }

위처럼 #QTabBar 의 first 속성만 따로 지정한다.

​

추가로 첫번째 버튼의 x 버튼은 소스상에서 아래와 같이 수정하면 x 버튼을 숨길수 있다.......

QWidget *closeBtn = ui->tabMainWidget->tabBar()->tabButton(0, QTabBar::RightSide); closeBtn->hide();

​

.

.

.

.

.

.

.

두둥

.

.

.

드뎌 완성!!!!!!

비슷하죠~~~~~~~~~~~~~~ ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

좀더 다듬으면.... 디자이너가 이야기한데로 똑같이 되겠네요 ㅋㅋㅋ

​