Qt tabwidget设置自定义样式

自定义处理如下:

1、tab组件无背景图,无外框。

2、tab的标签做处理:更换3个状态下的背景图,按下是绿色,闲置是黄色,鼠标扫过是红色。按下时,其他状态的tab比按下状态的tab要矮6px。

话不多说,下面是具体代码。


【样式代码】

//tab组件的整体坐标、宽度,在创建之初new的时候就setGeometry了。

//pane 指整个tab组件 ,border-width 组件的外框宽度, border-color 外框颜色, border-style外框风格,比如outset就是凸出立体感,border-radius  外框的圆角像素。而本示例是无外框,无背景图的。

QTabWidget::pane

{

border-width: 0px;

border-color:white;

border-style:outset;

border-radius: 3px;

background-color: rgb(132, 171, 208);

background: transparent;

}​

QTabWidget::tab-bar

{

left:0px;     //move to,tab标签的起始位置,左移

}

QTabBar::tab

{

width: 160px; //tab标签的宽度 长度  指的是单个标签

height:46px;

font:20px;

color:white //tab上的字体颜色

}

QTabBar::tab:selected

{

margin-left: 1;  //距离left 1px

margin-right: 0;

color: white;

border-image: url(./image/call/1.png);

}

QTabBar::tab:!selected

{

color: white;

margin-left: 1;

margin-right: 0;

border-image: url(./image/call/2.png);

}

QTabBar::tab:hover:!selected

{

color: white;

margin-left: 1;

margin-right: 0;

border-image: url(./image/call/3.png);

}

QTabBar::tab:!selected

{

margin-top: 6px;   //距离top 6px 下移

margin-bottom: -6px; //距离bottom  6px 下移如果是正数则上移

}​

【使用语句】

ui->tabWidget->setStyleSheet("QTabBar::tab{background-color:rgb(255,255,255);color:rgb(0,0,0);font:1...

猜你喜欢

转载自blog.csdn.net/zqxdsy/article/details/82463508
今日推荐