QTabWidget标签头(Tabbar)上方留出空白

今天遇到调整QTabWidget样式的问题。最难解决的问题是,标签页上方留出部分空白背景区域。

预实现效果如下

箭头所指区域是背景色。
QTabWidget标签头(Tabbar)上方留出空白

实现方法

这里我取了个巧,直接设置的 margin-top,暂时没有找到更好的方法。

QTabBar::tab {
	margin-top:8px;
	}

番外篇

在解决上个问题之前,还遇到另外的问题,就是标签页后面的背景色无法改变,怎么设置都没有效果。最后,查找了许多,发现原因是多方面的。

解决如下:

ui.tabWidgetCentral->setAutoFillBackground(false);
ui.tabWidgetCentral->setAttribute(Qt::WA_StyledBackground);
ui.tabWidgetCentral->setStyleSheet("QTabWidget{ "
		"background-color: #F4F8FF;"
		"margin-top: 0px;"
		"border:none;"
		"}"
	);

样式参考

ui.tabWidgetCentral->setTabsClosable(true);
	ui.tabWidgetCentral->setAutoFillBackground(false);
	ui.tabWidgetCentral->setAttribute(Qt::WA_StyledBackground);
	ui.tabWidgetCentral->setStyleSheet("QTabWidget{ "
		"background-color: #F4F8FF;"
		"margin-top: 0px;"
		"border:none;"
		"}"
		"QTabWidget::pane {"
		"border-top: 2px solid;"
		"border-color: #D7D9DD;"
		"background-color: rgb(255, 255, 255);"
		"}"
		"QTabBar::tab {"
		"width:171px;"
		"height:24px;"
		"font-family:\"方正兰亭黑简体\";"
		"font-size:14px;"
		"color:#FFFFFF;"
		"background:#83AFE2;"
		"border-top-left-radius:7px;"
		"border-top-right-radius:7px;"
		"border:none; "
		"text-align:left;"
		//"min-height:24px;"
		"max-height:40px;"
		"margin-top:8px;"
		"margin-left:8px;"
		"padding-left:8px;"
		"}"
		"QTabBar::tab:selected{"
		"background:#3375C2;"
		"border-top-left-radius:0px;"
		"border-top-right-radius:7px;"
		"}"
		"QTabBar::close-button {"
		"margin-left:8px;"
		"margin-top:8px;"
		"image: url(:/GuiCameraSetupWidget/Resources/close2.png);"
		"}"
	);
上一篇:QT desiger-QTabWidget用法


下一篇:PyQt5高级界面控件之QTabWidget(六)