QTabWidget常用样式设置
1 前言
个人使用qt,感觉QTabwidget是个非常好用的控件,但有时候总是感觉其tab样式不好控制或说不够灵活,从而导致放弃使用该控件。比如说,标签横向显示的时候,文字随之也横着显示了,这样还需要指定自定义样式,继承QProxyStyle类并重写drawControl虚函数。 然而这样过于麻烦,关于软件主菜单不同的界面切换,个人还是比较喜欢按键组合+STackedWidget控件。 对于一般的小界面来说,QTabWidget其实完全满足你的使用要求,所以本文主要简述QTabwidget样式的常用使用方法,配合标签背景图片,可以使你的tabwidget界面得到极大的美化。
2 基本样式设置
#基本的设置 QTabBar::tab{ font: 75 12pt "Arial"; #设置字体 width:84px; #设置宽度 height:30; #设置高度 margin-top:5px; #设置边距 margin-right:1px; margin-left:1px; margin-bottom:0px; }
3 修改选中及未选中样式
被选中或未被选中的tab标签(标签可分类,最左侧、最右侧、中间),可改变标签颜色及背景图片,具体的内容看下面注释。
#最左边标签未选中时显示(因为需要左边打圆角,所以和其他背景图片不一样,注意字体颜色) QTabBar::tab:first:!selected { color:#000000; border-image: url(:/common/images/common/左_normal.png); } #最左边标签被选中 QTabBar::tab:first:selected { color:#FFFFFF; border-image: url(:/common/images/common/左_pressed.png); } #最右边标签未选中时显示(因为需要右边打圆角,所以和其他背景图片不一样) QTabBar::tab:last:!selected { color:#000000; border-image: url(:/common/images/common/右_normal.png); } #最右边标签被选中 QTabBar::tab:last:selected { color:#FFFFFF; border-image: url(:/common/images/common/右_pressed.png); } #中间的标签未被选择的显示 QTabBar::tab:!selected { color:#000000; border-image: url(:/common/images/common/中_normal.png); } #中间标签选中显示的图片 QTabBar::tab:selected { color:#FFFFFF; border-image: url(:/common/images/common/中_pressed.png); }
实现效果如下:
4 tab标签居中显示
QTabWidget::tab-bar { alignment: center; }
效果如下:(左边为原来样式,右边为居中后的样式)
5 鼠标停留tab标签的效果
鼠标放在标签上,可设置标签颜色或者背景图片
QTabBar::tab:hover{ background:rgb(255, 255, 255, 100); }
6 去掉tabwidget的widget边框
QTabWidget::pane{ border:none; }
效果对比如下:(上图为原来效果,下图为去掉边框后效果)