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

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

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

相关推荐
不断努力的根号七3 小时前
qt框架,使用webEngine如何调试前端
开发语言·前端·qt
范纹杉想快点毕业11 小时前
基于C语言的Zynq SOC FPGA嵌入式裸机设计和开发教程
c语言·开发语言·数据库·嵌入式硬件·qt·fpga开发·嵌入式实时数据库
程序员编程指南12 小时前
Qt容器类:QList、QMap等的高效使用
c语言·开发语言·c++·qt
程序员编程指南13 小时前
Qt 元对象系统(Meta-Object System)解析
c语言·开发语言·c++·qt
XXYBMOOO14 小时前
使用全局变量访问 Qt UI 组件的方法文档
c++·qt·ui
kaikaile199516 小时前
基于Qt的仿QQ聊天系统设计
开发语言·qt
钱彬 (Qian Bin)17 小时前
《使用Qt Quick从零构建AI螺丝瑕疵检测系统》——4. 前后端联动:打通QML与C++的任督二脉
c++·qt·教程·qml·qt quick·qt 6.9.1·工业瑕疵检测
进击ing小白18 小时前
Qt WebEngine Widgets的使用
开发语言·qt
QUST-Learn3D1 天前
Qt自定义图像显示控件(支持平移、缩放、横纵比自适应)
qt
Logcater1 天前
Linux和Windows基于V4L2和TCP的QT监控
linux·c++·qt·嵌入式·camera·v4l2