企业官网建设流程全解析

研究背景

今天在设计一款主题的过程中,发现QTabWidget的右边和下边总是有白色边框,但是左边和上边没有,这令人十分好奇.

先说结论

其实用截图工具仔细观察的话,发现从未设置任何样式的QTabWidget的左侧和上边有2px,即2行像素;但是其右侧和下边则有4行像素.

如何理解结论?具体的原因是什么?

如上,用一张图来解释,橙色是TabBar的边框,蓝色是pane的边框.
其实在最开始,左上右下分别都有4行像素,但是左侧和上边pane的像素被TabBar"压住了"

• 图解:
  • 上边：橙色(TabBar) 压住了 蓝色(pane) → 只看到橙色
  • 左边：橙色(TabBar) 压住了 蓝色(pane) → 只看到橙色
  • 右边：橙色(TabBar) + 蓝色(pane) 各自独立 → 两层都看得见
  • 下边：橙色(TabBar) + 蓝色(pane) 各自独立 → 两层都看得见

如何消除四边的白色像素?

1. 先消除左边和上边的两行像素

QTabWidget { border: none; /* background-color: transparent; */ }

效果:左侧和上边的两行像素被消除,右侧和下边的像素分别还剩下两行
2.再消除右边和下边剩下的两行像素

1. 写法1

QTabWidget::pane { border: none; /* background-color: transparent; */ }

2. 写法2 -> 或者直接可以写:

QTabWidget::pane { }

Qt 样式表的一个重要机制：样式继承（Style Inheritance）->
由于 QTabWidget 设置了 border: none;，所以 pane 继承了这个属性