[Qt]QListView 重绘实例之二：列表项覆盖的问题处理

news/2025/2/10 17:47:39/

0 环境

  1. Windows 11
  2. Qt 5.15.2 MinGW x64

1 系列文章

简介：本系列文章，是以纯代码方式实现 Qt 控件的重构，尽量不使用 Qss 方式。

《[Qt]QListView 重绘实例之一：背景重绘》

《[Qt]QListView 重绘实例之二：列表项覆盖的问题处理》

《[Qt]QListView 重绘实例之三：滚动条覆盖的问题处理》

《[Qt]QListView 重绘实例之四：效果一讲解》

《[Qt]QListView 重绘实例之五：效果二讲解》

2 问题开始

继上文《之一》，绘制圆角矩形背景时，遗留了两个主要问题：

  • 列表项覆盖破坏背景效果；
  • 滚动条覆盖破坏背景效果；

其中，对于滚动条的问题，留作下一文《之三》讲解。参考《[Qt]QListView 重绘实例之三：滚动条的处理》。

本文先解决列表项覆盖的问题。

QListView-residual2

至少有两个思路解决列表项的覆盖问题：

  • 使用委托。如子类化 QItemDelegate，然后进行列表项的重绘；
  • 使用代理样式。如子类化 QProxyStyle，然后进行列表项的重绘；

本文选择第二种思路，原因有二：

  • 其一，承接上文《之一》已经使用了子类化 QProxyStyle 的方法，继续实现对列表项的重绘功能即可，没有必要再另外添加一个新委托子类实现；
  • 其二，样式 QStyle /代理样式 QProxyStyle，本身即包含委托实现的功能。而且它们更多强大，可以对某类或全局样式进行控件；

具体的重绘过程分为两个部分：

  1. 对于视口最上行/最下行，需要处理上半部分/下半部分的圆角绘制；
  2. 对于视口的其它中间行，则进行默认绘制（或按期望样式绘制）；

→→→ 解决方案直达 ←←←

3 重绘列表项背景

代理样式中，与列表项相关的主要有一个样式类和两个元素类型：

  • 样式类：QStyleOptionViewItem
  • 元素类型：
    • QStyle::CE_ItemViewItem - void drawControl() const
    • QStyle::PE_PanelItemViewItem - void drawPrimitive() const

Qt 文档关于 QStyle 类有如下说明：

Styles in Item Views

…

The primitive element PE_PanelItemViewItem is responsible for painting the background of items, and is called from QCommonStyle’s implementation of CE_ItemViewItem.

（译：QCommonStyle 子类实现中的控制类型 CE_ItemViewItem 会调用原始类型 PE_PanelItemViewItem，其中，原始类型 PE_PanelItemViewItem 负责绘制列表项的背景。）

…

即，在 QStyle::PE_PanelItemViewItem 中绘制列表项的背景，在 QStyle::CE_ItemViewItem 中绘制列表项的内容。

3.1 保存视口大小信息

Qt 明确说明 QListView 是垂直型的列表。

首先，需要判断视口中的最上/最下行位置。而判断位置则需要知道整个列表的高度。具体实现是在绘制 QFrame 时保存数据。

/* .h */
class PListViewStyle : public QListView
{
public:// ...
private:mutable QRect mRect;	// Need mutable
}/* .cpp */
void PListViewStyle::drawControl(QStyle::ControlElement element,const QStyleOption *option,QPainter *painter,const QWidget *widget) const
{switch(element){case QStyle::CE_ShapedFrame:{const QStyleOptionFrame *opt = qstyleoption_cast<const QStyleOptionFrame *>(option);if(nullptr == opt) { return; }mRect = opt->rect;//...return;}default:break;}QProxyStyle::drawControl(element, option, painter, widget);
}

注意：变量 mRect 必须使用 mutable 修饰。

3.2 判断视口中的最上/最下行位置

  • 判断视口中的最上行位置
if(0 == opt->rect.y())

如果没有设置内填充，最上行位置的 y 坐标应该等于 0，因此使用此条件进行判断。

  • 判断视口中的最下行位置
bool PListViewStyle::isLastRow(const QRect rect, int &rowHeight) const
{/* 列表可显示行数 */int rowCount = mRect.height() / rect.height();/* 由 y 坐标与行高计算行索引 */int index = rect.y() / rect.height();if(rowCount == index){rowHeight = mRect.height() - index * rect.height();return true;}return false;
}

3.3 绘制列表项背景

/* 添加常量定义，需要添加到 cpp 文件开头位置 */
const int Radius = 15;void PListViewStyle::drawPrimitive(QStyle::PrimitiveElement element,const QStyleOption *option,QPainter *painter,const QWidget *widget) const
{switch(element){/* PE_PanelItemViewItem 主要负责绘制列表项的背景（选中背景/高亮背景）*/case QStyle::PE_PanelItemViewItem:{const QStyleOptionViewItem *opt = qstyleoption_cast<const QStyleOptionViewItem *>(option);if(nullptr == opt) { break; }QColor c(Qt::lightGray);if(QStyle::State_MouseOver & opt->state){c = QColor(0, 0, 255, 255 * 0.2);}else if(QStyle::State_Selected & opt->state){c = QColor(0, 0, 255, 255 * 0.5);}int x, y, w, h;opt->rect.getRect(&x, &y, &w, &h);QPainterPath path;int rowHeight = 0;/* 最上一行 */if(0 == y){/* 创建最上一行，带圆的角矩形路径 */path.moveTo(x, y + h);path.arcTo(QRect(x, y, 2 * Radius, 2 * Radius), 180, -90);path.lineTo(x + w, y);path.lineTo(x + w, y + h);path.closeSubpath();}/* 最下一行 */else if(isLastRow(opt->rect, rowHeight)){/* 创建最下一行，带圆角的矩形路径 */path.moveTo(x, y);path.lineTo(x + w, y);path.lineTo(x + w, y + rowHeight);path.arcTo(QRect(x, y + rowHeight - 2 * Radius, 2 * Radius, 2 * Radius), 270, -90);path.closeSubpath();}else{path.addRect(QRect(x, y, w, h));}painter->save();painter->setRenderHint(QPainter::Antialiasing);painter->setPen(Qt::NoPen);painter->setBrush(QBrush(c));painter->drawPath(path);painter->restore();return;}default:break;}QProxyStyle::drawPrimitive(element, option, painter, widget);
}

为了显示绘图的效果，这里特地将列表项的默认白色背景，改成了浅灰色。

其中的重点是：对视口最上行和最下行进行了圆角处理，通过 QPainterPaht 实现。

效果图如下：

QListView-itembg

从上图中可以看到，绘制列表项的圆角效果确实出来了，高亮效果也正确。说明，至少这样的处理方案没有问题。

但是，还是发现，背景上有一个白色直角矩形，仍然破坏了圆角矩形背景。

这也同样说明，这个白色直角矩形并不是由于列表项产生的影响。

3.4 视口 viewport()

好了，现在问题好像又回到 QListView 的里层了。

很明显，列表项应该是表层的，因为用户是可以直接看到的。

接下来，结合上一文《之一》的内容，来看一下以下这张图。

QListView-layers

这里有一个层级关系：

  • 最底层：QFrame。在《之一》中使用 paintEvent() 进行重绘时，正是设置的这个，直接设置成了 QFrame::NoFrame；
  • 上一层：viewpotr()。在《之一》中也验证过这点，而且，viewport() 区域是不包含滚动条的。如上图中列表项底下的白色矩形；
  • 最上层：列表项。上文已有说明。

现在，基本上可以确定问题应该聚焦在 viewport() 上。

查看 Qt 帮助文档，与视口相关的有两个接口：

QWidget *QAbstractScrollArea::viewport() const;
void QAbstractScrollArea::setViewport(QWidget *widget);

可知，视口即是一个 QWidget 控件。

那么，再来验证一下，重新设置视口控件，然后设置其背景色为蓝色：

PListView::PListView(QWidget *parent) : QListView(parent)
{auto *widget = new QWidget;widget->setStyleSheet("background: blue");setViewport(widget);
}

效果图如下：

QListView-viewport

由此可知，确认了之前的推论。

补充内容：

解决方法只需要一条语句：setViewport(new QWidget)，而且，做过一些深入的尝试，但没有理解具体的原因。

  • 既然视口是一个 QWidget，那么，对 QWidget 进行绘制，是不是应该也可以当作背景使用？实际上的情况是，子类化 QWidget 后重写 paintEvent() 方法，再设置为新的视口控件，重绘函数根本不会被调用。经实测，可以改变这个视口控件的方式，只有通过设置 Qss 才有效。也没明白是为什么。
  • 然后，设置 QWidget 对象为新的视口控件，该对象的调色板（或者说对象样式）是会影响列表项的默认样式的。例如 QWidget 通过 Qss 设置背景颜色为蓝色，则列表项的默认背景色也会变为蓝色。当然，这也可能是 Qss 设置影响了子对象。

此外，之所以只要设置一个默认的 QWidget 对象作为新视口即可，猜测原因是：默认 QWidget 本身是一个透明的（或者是统一风格背景色的）控制，在 QListView 中即表现为透明的一层，所以不会影响圆角背景的效果。

虽然实际原因不知，但能解决问题。

4 解决方案

  • 添加新的视口控件
PListView::PListView(QWidget *parent) : QListView(parent)
{setViewport(new QWidget);setFrameStyle(QFrame::NoFrame);	// Must//...
}
  • 绘制列表项背景
void PListViewStyle::drawPrimitive(QStyle::PrimitiveElement element,const QStyleOption *option,QPainter *painter,const QWidget *widget) const
{switch(element){/* PE_PanelItemViewItem 主要负责绘制列表项的背景（以及选中背景/高亮背景） */case QStyle::PE_PanelItemViewItem:{const QStyleOptionViewItem *opt = qstyleoption_cast<const QStyleOptionViewItem *>(option);if(nullptr == opt) { break; }QColor c(Qt::white);	/* 默认背景色 */if(QStyle::State_MouseOver & opt->state){c = QColor(0, 0, 255, 255 * 0.2);}else if(QStyle::State_Selected & opt->state){c = QColor(0, 0, 255, 255 * 0.5);}int x, y, w, h;opt->rect.getRect(&x, &y, &w, &h);QPainterPath path;int rowHeight = 0;/* 最上一行 */if(0 == y){/* 创建最上一行，带圆角的矩形路径 */path.moveTo(x, y + h);path.arcTo(QRect(x, y, 2 * Radius - 5, 2 * Radius - 5), 180, -90);path.lineTo(x + w, y);path.lineTo(x + w, y + h);path.closeSubpath();}/* 最下一行 */else if(isLastRow(opt->rect, rowHeight)){/* 创建最下一行，带圆角的矩形路径 */path.moveTo(x, y);path.lineTo(x + w, y);path.lineTo(x + w, y + rowHeight);path.arcTo(QRect(x, y + rowHeight - 2 * Radius, 2 * Radius, 2 * Radius), 270, -90);path.closeSubpath();}else{path.addRect(QRect(x, y, w, h));}painter->save();painter->setRenderHint(QPainter::Antialiasing);painter->setPen(Qt::NoPen);painter->setBrush(QBrush(c));painter->drawPath(path);painter->restore();return;}default:break;}QProxyStyle::drawPrimitive(element, option, painter, widget);
}

最后来看一下效果图，达到了预期的效果目标。

QListView-items


http://www.ppmy.cn/news/1128204.html

相关文章

使用Vue、ElementUI实现登录注册，配置axios全局设置，解决CORS跨域问题

使用Vue、ElementUI实现登录注册，配置axios全局设置，解决CORS跨域问题

目录 引言 什么是ElementUI&#xff1f; 步骤1&#xff1a;创建Vue组件用于用户登录和注册 1. 基于SPA项目完成登录注册 在SPA项目中添加elementui依赖 在main.js中添加elementui模块 创建用户登录注册组件 配置路由 修改项目端口并启动项目 静态页面展示图 步骤2&#x…
阅读更多...
做外贸你的差不多可能差的很多

做外贸你的差不多可能差的很多

人们常说不想当将军的士兵不是好士兵&#xff0c;然而当不好士兵的将军一定不是一个好将军&#xff0c;我们对事情或者自我的要求衡量越低的时候&#xff0c;当以什么事情都差不多为标准的时候&#xff0c;可能我们自己也就只能最高混到差不多而已了。 就拿简单的书写来说&…
阅读更多...
运动控制：直线电机

运动控制：直线电机

一、什么是直线电机 直线电机&#xff0c;也叫做直线马达&#xff0c;线性马达&#xff0c;线性电机&#xff0c;上电后&#xff0c;直接做直线运动的电机。 二、直线电机的原理 把一个圆柱剪开&#xff0c;摊平就是一个矩形了&#xff0c;直线电机也是如此&#xff0c;传统的…
阅读更多...
初识C语言——详细入门（系统性学习day4）

初识C语言——详细入门（系统性学习day4）

目录 前言 一、C语言简单介绍、特点、基本构成 简单介绍&#xff1a; 特点&#xff1a; 基本构成&#xff1a; 二、认识C语言程序 标准格式&#xff1a; 简单C程序&#xff1a; 三、基本构成分类详细介绍 &#xff08;1&#xff09;关键字 &#xff08;2&#xf…
阅读更多...
基于JAVA,SpringBoot和Vue的前后端分离的求职招聘系统

基于JAVA,SpringBoot和Vue的前后端分离的求职招聘系统

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 这个系统的研发背景是…
阅读更多...
软件测试自动化的成本效益分析

软件测试自动化的成本效益分析

随着软件测试技术的发展&#xff0c;人们已经从最初的手工测试转变为手工和自动化技术相结合的测试方法。目前&#xff0c;人们更多的是关心自动化测试框架、自动化测试工具以及脚本研究等技术方面&#xff0c;而在软件自动化测试方案的效益分析方面涉及较少。 软件测试的目的是…
阅读更多...
【小程序 - 基础】WXML、WXSS语法以及小程序的配置、网络数据请求_03

【小程序 - 基础】WXML、WXSS语法以及小程序的配置、网络数据请求_03

目录 一、WXML模板语法 1. 数据绑定 1.1 数据绑定的基本原则 1.2 在 data 中定义页面的数据 1.3 Mustache 语法的格式 1.4 Mustache 语法的应用场景 2. 事件绑定 2.1 什么是事件 2.2 小程序中常用的事件 2.3 事件对象的属性列表 2.4 target 和 currentTarget 的区别…
阅读更多...
基于微信小程序的图书馆自习室预约选座小程序(源码+lw+部署文档+讲解等)

基于微信小程序的图书馆自习室预约选座小程序(源码+lw+部署文档+讲解等)

文章目录 前言系统主要功能&#xff1a;具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计…
阅读更多...
最新文章

Copyright @ 2022~2023