qtabwidget 样式_标注样式怎么设置合理

全栈程序员站长

发布于 2022-09-27 15:25:38

2.8K0

发布于 2022-09-27 15:25:38

大家好，又见面了，我是你们的朋友全栈君。

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;
}

效果对比如下：（上图为原来效果，下图为去掉边框后效果）

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/193212.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

https

java

网络安全

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度