QT QCombox QSS样式问题

css 复制代码

/*combobox 样式*/
QComboBox#FileterComboBox,QComboBox#DateRangeComboBox{
	background-color: #262626;     /* 背景颜色 */
	color: #e0e0e0;     /* 文本颜色 */
	border-radius:16px;
	font-family: "Microsoft YaHei";    /* 文本字体族 */
	font-size: 18px;    /* 文本字体大小 */
	padding-left: 16px;
}
 
QComboBox#FileterComboBox::drop-down,QComboBox#DateRangeComboBox::drop-down{
	width:20px;
	height:20px;
	subcontrol-position: right;
	border:none;
}
QComboBox#FileterComboBox::down-arrow,QComboBox#DateRangeComboBox::down-arrow{
	border-image: url("../../data/icon/en/default/icon_arrow_down_hw20.png");
}


QComboBox#FileterComboBox QAbstractItemView::item,
QComboBox#DateRangeComboBox QAbstractItemView::item{

	height:32px;
	color:#e0e0e0;
	padding-left: 16px;
	
}
 QComboBox#FileterComboBox QAbstractItemView,
QComboBox#DateRangeComboBox QAbstractItemView{
	background:rgba(31, 31, 31,1);
	min-width:240px;
}
QComboBox#FileterComboBox QAbstractItemView::item:hover,
QComboBox#DateRangeComboBox QAbstractItemView::item:hover{
    background-color:#feb439;
    color:black;
}
QComboBox#FileterComboBox QAbstractItemView::item:selected,
QComboBox#DateRangeComboBox QAbstractItemView::item:selected{
  background-color:#feb439;
  color:black;

}

上面是我QCombobx的样式，我想到的是文字距离左侧16px;实际效果图如下：

后面我去单独写一个QCombobox的Demo发现了问题，按照我上面写的qss样式，如果不在` QAbstractItemView::item`添加`background:rgba(31, 31, 31,1);`会出现上面问题。添加之后一切正常。

css 复制代码

QComboBox#FileterComboBox QAbstractItemView::item,
QComboBox#DateRangeComboBox QAbstractItemView::item{
	background:rgba(31, 31, 31,1);
	height:32px;
	color:#e0e0e0;
	padding-left: 16px;
	
}

为什么在` QAbstractItemView::item`添加`background:rgba(31, 31, 31,1);`之后就正常了呢？

下面是AI给我的答复:

1:Gemini

css 复制代码

你说得对。移除 background:rgba(31, 31, 31,1); 确实可能导致下拉列表的 Item 文字在某些情况下出现跳动或闪烁的现象，尤其是在鼠标悬停或选择 Item 时。这是因为背景色的变化会触发重绘，而没有明确的背景色可能会导致重绘区域不一致，从而产生视觉上的跳动。

以下是更详细的解释：

重绘机制： 当鼠标悬停在一个 Item 上时，会触发 hover 状态，需要改变 Item 的背景色（在你的代码中是 #feb439）。这个改变需要进行重绘，即重新绘制 Item 的外观。

布局和尺寸计算： 在重绘过程中，Qt 需要重新计算 Item 的布局和尺寸。如果没有明确的背景色，Qt 可能会基于文本内容来计算 Item 的大小。由于文本渲染在不同平台上可能存在细微差异，加上字体抗锯齿等因素，每次重绘计算出的 Item 尺寸可能会有轻微变化。

跳动现象： 这些微小的尺寸变化会在视觉上表现为文字的跳动或闪烁。尤其是在快速移动鼠标时，连续触发 hover 状态，这种跳动会更加明显。

background 的作用： background:rgba(31, 31, 31,1); 的作用不仅仅是设置背景色，更重要的是它为 Item 提供了一个稳定的背景区域。这个固定的背景区域使得 Qt 在重绘时只需要简单地改变背景颜色，而不需要重新计算 Item 的尺寸，从而避免了跳动现象。

总结来说： background 属性为 Item 建立了一个稳定的绘制区域，避免了因文本渲染或布局计算的微小变化而导致的跳动。即使背景色与父元素相同，这个属性仍然很重要，因为它稳定了 Item 的绘制区域。

其他可能导致跳动的因素：

字体渲染： 不同的字体渲染引擎在处理字体抗锯齿等方面可能存在差异，这也会影响 Item 的尺寸计算，从而导致跳动。
Item 高度： 如果 Item 的高度没有明确设置，Qt 可能会根据文本内容动态调整高度，这也会导致跳动。你的代码中设置了 height:32px;，这是一个很好的做法，可以减少这种可能性。
父元素布局： 父元素的布局方式也可能影响 Item 的显示。例如，如果父元素使用了动态布局，可能会导致 Item 的位置或大小发生变化。
建议：

保留 background 属性： 即使背景色与父元素相同，也应该保留 background 属性，以确保 Item 的绘制稳定。
固定 Item 高度： 像你代码中那样设置 height:32px;，可以有效避免因高度变化导致的跳动。
检查字体渲染： 尽量使用一致的字体和字体渲染设置，以减少因字体渲染差异导致的跳动。
通过以上措施，可以有效地避免或减少下拉列表 Item 文字跳动的现象，提升用户体验。

2:chatgpt

感觉解释的有一定的道理。

如果有大佬知道请留下评论，帮忙答疑。谢谢。