首页 > 学院 > 开发设计 > 正文

Qt tabwidget自定义样式

2019-11-10 18:42:41
字体:
来源:转载
供稿:网友

自定义处理如下:

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 下移如果是正数则上移

}​


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表