返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >详解QListWidget如何实现自定义Item效果
  • 594
分享到

详解QListWidget如何实现自定义Item效果

2024-04-02 19:04:59 594人浏览 安东尼
摘要

首先,我们来看以下实现的最终效果吧! 我觉得这并不是一个很难得问题,最近新招了一个应届生,发现在实现上述效果时,被困扰住了,是不是刚刚接触Qt的这种稍微有难度的界面时,都会有些无头

首先,我们来看以下实现的最终效果吧!

我觉得这并不是一个很难得问题,最近新招了一个应届生,发现在实现上述效果时,被困扰住了,是不是刚刚接触Qt的这种稍微有难度的界面时,都会有些无头绪呢?

所以,我打算分享给大家实现的思路,以及会出现的问题,就我一个开发5年c++的员工而言,针对新手会遇到哪些不懂的问题。

当前的开发环境:win10 VS2017 + Qt5.14.2 x64

在实现过程中新手会出现的难点,如下

1:如何在QListWidget中添加带有按钮、文本等其它控件的一条数据?

2:选中每一条之后如何响应?QListWidget自带的item响应为什么不生效?

3:如何选中删除按钮并通知QListWidget做出具体的响应?

就根据上述三个问题,边讲述问题边实现带有自定义控件的Item内容吧!

在使用QListWidget插入一条数据时,默认的方式,如下:

ui.listWidget->insertItem(0, "Text Content"); //方法1
ui.listWidget->addItem("Text Content"); //方法2

使用上述代码是无法实现的,因为参数中只能添加QString类型的字符串,那么该如何实现添加自定义项呢?

在QListWidget类中提供了叫做QListWidgetItem的子类,用于实现自定义的item。

这时,我们就需要重新定义一个类,并且将该类与ListWidgetItem进行绑定,就可以实现每一行的item上展示属于我们自定义的格式了。

例子中展示的item中显示了一个选择框、文件名称以及删除按钮。

在这里,采用了QCheckBox以及QPushButton两个按钮实现的。

有人会询问:文件名称不应该使用QLabel控件表示吗?

回答是:当前可以使用QLabel控件显示文件名称,这里采用QCheck主要是想要展示文件的图标,根据不同的文件名后缀显示不同的图标。

自定义Widget

该类继承自QWidget。假设叫做:CustomItem

有些新手会直接创建一个纯的C++类,这样做肯定是有问题的,当我们在外部使用当前自定义类时,你会发现,为什么新创建的类会单独分出来呢?

如果直接使用纯C++类,还有另一个至关重要的问题,当前类需要进行消息交互时,你该如何传递给外部调用者呢?回调吗?是不是有点大材小用呢?

class CustomItem : public QWidget
{
	Q_OBJECT

public:
	CustomItem(QWidget *parent);
	~CustomItem();
private:
	QCheckBox* m_checkName; //文件名
	QCheckBox* m_checkSelect; //选择
	QPushButton* m_btnDelete; //删除

};

自定义类CustomItem中创建了三个控件变量,分别表示了:选择框、文件名称以及删除按钮。

就是文章开始显示效果图的三个控件了。

接下来,需要定义一个外部调用接口,插入一条有效数据,假设接口名称是:AddINewtemData

class CustomItem : public QWidget
{
	Q_OBJECT

public:
	CustomItem(QWidget *parent);
	~CustomItem();
public: //对外开放接口
	void AddINewtemData(int nRow, QString qsFileName); //添加一条新数据
private:
	int m_nRow;
	QCheckBox* m_checkName; //附件名
	QCheckBox* m_checkSelect; //选择
	QPushButton* m_btnDelete; //删除

};

AddINewtemData 参数

参数1:代表的是当前自定义widget属于QListWidget的行编号,用于后续消息传递使用。

参数2:需要展示的文件名称

根据用户传入的文件名称,根据文件后缀展示不同的图标。

void CustomItem::AddINewtemData(int nRow, QString qPath)
{
	m_nRow = nRow; //记录当前自定义widget对应的QListWidget的行号
        
	//根据路径名,获取文件名称,并设置
	QFileInfo info(qPath);
	QString qsFileName = info.fileName();
	m_checkName->setText(qsFileName);
	//获取文件后缀
	QString qsCheckStyle = "";
	if (info.suffix() == "mp4") //视频文件
	{
            //自定义QCheckBox风格
	}
	else if (info.suffix() == "png") //图片文件
	{
            //自定义QCheckBox风格
	}
	else if (info.suffix() == "xlsx") //表格文件
	{
            //自定义QCheckBox风格
	}
	else if (info.suffix() == "pdf")
	{
            //自定义QCheckBox风格
	}
	else //文档文件
	{
            //自定义QCheckBox风格
	}
	m_checkName->setStyleSheet(qsCheckStyle);
}

构造完自定义widget类之后,接下来就需要将该类与QListWidgetItem进行绑定,显示到QListWidget上去。

外部调用方法,如下:

int nCount = ui.listWidget->count();

CustomItem* widget = new CustomItem(this);
widget->AddINewtemData(nCount, qsFileName);
widget->show();

QListWidgetItem* item = new QListWidgetItem;
item->setSizeHint(QSize(48, 48));
ui.listWidget->addItem(item);
ui.listWidget->setItemWidget(item, widget);

自定义CustomItem响应

上述功能可以实现QListWidget中展示自定义的widget之后,该如何点击QListWidget中的每一条做出不同的响应呢?

此时,我们对每一行的QListWigetItem绑定自定义类之后,是无法响应QListWidget自身的选择消息的!这一点需要大家记清楚了。

那么,该怎么触发呢?

针对于每一个QWidget类,只要是继承自QWidget,都会有鼠标的四大响应:

virtual void mousePressEvent(QMouseEvent *event);
virtual void mouseReleaseEvent(QMouseEvent *event);
virtual void mouseDoubleClickEvent(QMouseEvent *event);
virtual void mouseMoveEvent(QMouseEvent *event);

当鼠标在自定义类做了点击效果后,肯定可以在鼠标按下事件中获取点击响应的。

所以,在自定义类CustomItem中需要重写QWidget的系统消息:mousePressEvent

void CustomItem::mousePressEvent(QMouseEvent *event)
{
    QWidget::mousePressEvent(event);
}

断点设在该响应函数中时,肯定是会触发的,如果不可以肯定是当前widget处于禁用状态,或者是被遮盖住了。

这里还有一个隐藏问题:有些同学在点击自定义窗口时会发现这样一个奇怪的现象,为什么点击有些区域是响应mousePressEvent消息的,而点击有些区域是不响应呢?

以下是重中之重了!!

这就是前一段话提到的内容了,当前widget不触发时,肯定是禁用或者是被遮挡住了。

在我们这个自定义Widget中有三个活跃的控件,两个QCheck,一个QPushButton,当我们的鼠标在任意控件上点击时,此时的点击响应应该是响应到子控件上,而不是自定义的Widget(CustomItem)上。

为了让鼠标点击任何控件时,所有的响应都响应到父类Widget,也就是CustomItem上时,我们应该对支持鼠标响应操作的控件做特殊处理

setAttribute(Qt::WA_TransparentFORMouseEvents)

每个控件都要设置以上的操作,当前控件只是用来显示,不做任何消息处理,是当前窗口做的消息处理

自定义Widget控件响应并通知外界处理

下面,来说一说第三个重点问题,如何通知外界处理。

我们使用了自定义的Widget之后就不能再使用QListWidget的内部选中消息了,为了让外部窗口获取内部Widget的消息时,此时我们需要采用发信号的方式,通知外界,模拟QListWidget消息。

signals:
    void Msg_SendDeleteItemData

外部窗口直接操作该消息,使用方法跟普通的方法一致,这里就不再过多介绍Qt中消息机制了。

以上实现QListWidget内嵌自定义窗口的核心功能就说清楚了。

到此这篇关于详解QListWidget如何实现自定义Item效果的文章就介绍到这了,更多相关QListWidget自定义Item内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 详解QListWidget如何实现自定义Item效果

本文链接: https://lsjlt.com/news/145705.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 详解QListWidget如何实现自定义Item效果
    首先,我们来看以下实现的最终效果吧! 我觉得这并不是一个很难得问题,最近新招了一个应届生,发现在实现上述效果时,被困扰住了,是不是刚刚接触Qt的这种稍微有难度的界面时,都会有些无头...
    99+
    2024-04-02
  • QListWidget怎么实现自定义Item效果
    本文小编为大家详细介绍“QListWidget怎么实现自定义Item效果”,内容详细,步骤清晰,细节处理妥当,希望这篇“QListWidget怎么实现自定义Item效果”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧...
    99+
    2023-06-30
  • 使用PyQt5 如何在QListWidget中自定义Item
    使用PyQt5 如何在QListWidget中自定义Item?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。自定义一个Item新建一个QWidget对象在QWid...
    99+
    2023-06-08
  • Android自定义View实现动画效果详解
    目录帧动画补间动画属性动画帧动画 帧动画就是给定一个完整动画的所有关键帧,由大脑想象中间的变化过程的一种动画。 <xml version="1.0" encoding="utf...
    99+
    2023-02-02
    Android自定义View实现动画 Android 动画 Android自定义View
  • Qt自定义Widget实现互斥效果详解
    目录前沿功能实现知识点问题讲解知识点1讲解知识点2讲解知识点3总结前沿 什么叫做自定义Widget实现互斥效果呢? 在使用Qt做一个界面美观性比较强的功能时,可能会遇到这种问题:多个...
    99+
    2024-04-02
  • ionic如何实现自定义弹框效果
    这篇文章给大家分享的是有关ionic如何实现自定义弹框效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。思路利用ionic自带的弹框$ionicPopup。隐藏头部和尾部,只保留...
    99+
    2024-04-02
  • CSS+HTML如何实现自定义checkbox效果
    这篇文章主要介绍CSS+HTML如何实现自定义checkbox效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! checkbox应该是一个比较常用的html功能了,不过浏...
    99+
    2024-04-02
  • js如何实现自定义进度条效果
    这篇文章主要介绍js如何实现自定义进度条效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!效果图:代码如下:<!DOCTYPE html> <html&g...
    99+
    2024-04-02
  • JS如何实现自定义滚动条效果
    这篇文章给大家分享的是有关JS如何实现自定义滚动条效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下<head>  <meta ...
    99+
    2024-04-02
  • iOS UISegmentControl如何实现自定义分栏效果
    小编给大家分享一下iOS UISegmentControl如何实现自定义分栏效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下iOS 自带的...
    99+
    2023-06-29
  • Android如何实现自定义view画圆效果
    这篇文章主要介绍了Android如何实现自定义view画圆效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。看图代码:package sjx.com.custonv...
    99+
    2023-05-30
    android view
  • Android 自定义阴影效果详解及实例
    Android 自定义阴影效果详解及实例 Android5.X中,Google为其增加了两个属性 android:elevation=” ” 与 android:transla...
    99+
    2022-06-06
    自定义 Android
  • Android自定义控件eBook实现翻书效果实例详解
    本文实例讲述了Android自定义控件eBook实现翻书效果的方法。分享给大家供大家参考,具体如下: 效果图: Book.java文件: package com.book...
    99+
    2022-06-06
    Android
  • Android自定义View实现纵向跑马灯效果详解
    首先看看效果图(录制的gif有点卡,真实的效果还是很流畅的) 实现思路 通过上面的gif图可以得出结论,其实它就是同时绘制两条文本信息,然后通过动画不断的改变两条文本信息...
    99+
    2022-06-06
    view 跑马灯 Android
  • Android通过自定义view实现刮刮乐效果详解
    目录前言实现原理关键步骤创建bitmap绘制文字画路径完整代码前言 已经有两个月没有更新博客了,其实这篇文章我早在两个月前就写好了,一直保存在草稿箱里没有发布出来。原因是有一些原理性...
    99+
    2024-04-02
  • Android如何用自定义View实现雪花效果
    效果图 1.SnowView 类 package com.ilz.rocketapplication.handaccount.view; import android.co...
    99+
    2024-04-02
  • Android如何自定义view实现半圆环效果
    小编给大家分享一下Android如何自定义view实现半圆环效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下1.自定义属性<declare-s...
    99+
    2023-06-29
  • Android如何自定义View实现数字雨效果
    今天小编给大家分享一下Android如何自定义View实现数字雨效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。效果图在安...
    99+
    2023-06-29
  • Android Switch自定义实现IOS效果
    先看下效果图 自定义View public class Seniorswitch extends Switch { priva...
    99+
    2022-06-06
    switch IOS Android
  • iOSUISegmentControl实现自定义分栏效果
    本文实例为大家分享了iOS UISegmentControl实现自定义分栏效果的具体代码,供大家参考,具体内容如下 iOS 自带的UISegmentControl实现的就是类似上图...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作