Qt6之QListWidget——Qt仿ToDesk侧边栏(1)

一、 QLitWidget概述

注意:本文不是简单翻译Qt文档或者接口函数,而侧重于无代码Qt设计器下演示使用。

QListWidget也称列表框类,它提供了一个类似于QListView提供的列表视图,但是它具有一个用于添加和删除项的经典的基于项的接口。在实际应用中,多与堆栈窗体类配合使用。

它是Qt这些常用基础组件里,我认为最被低估的类,其实QListWidget反到灵活、简单、实用,包括我自己在侧栏或者上栏,也经常使用了QFrame+QPushButton或者QToolButton组合拼接起来自己“造轮子”,如下图卡巴和微信的侧栏列表框样式以及本文演示重点todesk侧边栏:

大部分不熟悉的人,潜意识里都觉得QListWidget太低级不好用只配实现下图左的效果,本次我们按照ToDesk已有布局实现如下右图效果,只用qt designer设计器和样式表且不使用一行代码:

 二、实例演示和试用

2.1、拖出列表框类并添加列表

如下图,在Item Widget栏里1位置,直接拖拽出List Widget,会得到2位置所示的白框,看这什么也没有那是因为没有列表菜单,双击2位置空间,在3位置点绿色添加按钮,在输入名称就可显示了,依次增加5个得到下右图所示;

 2.2、对QListWidget设置背景去除边框

QListWidget选中右键,改变样式表,输入以下内容,得到下右图所示:

QListWidget {
	background-color: rgb(240, 243, 248);
	border: 0;
}

 2.3、调整字体大小

将所有列表菜单字体,一次性全部字体大小调成12;

QListWidget选中,最右边窗口font,12,确认即可,得到右图;

2.4、调整每个列表菜单高度

解决每个列表菜单高度,也叫Item高度。

此时每个按钮菜单已经可以点击或者选中了,但是按钮高度太低,导致都挤在了上面,改变item高度,还有每个按钮圆角,我一般还是习惯样式表,如下图:

QListView::item {
    height: 45px;
	border-radius: 5px;
}

 2.5、设置鼠标划过和选中效果

依旧是选中,编辑样式表:其中background背景颜色,color字体颜色。设置完成后如右图:

 QListView::Item:hover {
 background: rgb(229, 237, 248);
 }

QListView::Item:selected  {
	background: rgb(204, 223, 248);
	color: rgb(0, 112, 249);
}

 2.6、解决左侧图标

2.6.1 项目,右键,新建文件,选择“Qt resource file”,随便一个英文名,后期会被视为路径,建议resource,此时得到右图,在qrc文件位置,添加现有文件,把准备好的图标一把添加。

备注:每个菜单有两个图标,是因为选中后图标是蓝色,所以是两个

2.6.2 选中,右键,编辑项目,再选择属性,滚动找到icon,点小三角形,再点选择资源,找到第一个control对应黑色图标;紧接着,滚动到“选择 关”位置,同样点小三角形,再点选择资源,找到第一个control对应蓝色图标,确认即可。

 

 

 2.6.3 按照上面的方面,把5个列表,依次设置图标,完成后,如下图,会看到图标特别小,我们需要根据图标大小,设置一下,在如下箭头所示位置,iconsize的宽度和高度都设置为30,得到下右图,已经接近完美了;

 2.7、解决选中后的虚线框问题

 这里也采用样式表去除,选中列表框整体,右键,改变样式表,增加如下,如下图:

QWidget:focus{
outline: none;
}

2.8 最终编译演示

此时已经,完整完成,侧边栏,如下图,下篇将演示和堆栈窗体类QStackedWidget结合起来,实现翻页切换功能:

 总结,实际上Qt提供给我们的是小孩积木,到底堆成怎样效果,取决于想象力和熟练度。下篇将QStackedWidget很容易的实现切换页,相对于QFrame+QPushButton或者QToolButton这种造轮子组和,更加简洁、实用和易理解。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/72020.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

jupyter切换conda虚拟环境

环境安装 conda install nb_conda 进入你想使用的虚拟环境: conda activate your_env_name 在你想使用的conda虚拟环境中: conda install -y jupyter 在虚拟环境中安装jupyter: conda install -y jupyter 重启jupyter 此时我们已经把该安装…

yolov5部署 单线程与多线程对比

单线程 部署代码可参考&#xff1a; Yolov5 ONNX Runtime 的 C部署_爱钓鱼的歪猴的博客-CSDN博客 main.cpp #include "detector.h" #include <chrono> using namespace std;// 识别线程 void *detect_thread_entry(void *para){}int main(int argc, char *ar…

【正版系统】2023热门短剧SAAS版开源 | 小程序+APP+公众号H5

当我们在刷百度、D音、K手等各种新闻或短视频时经常会刷到剧情很有吸引力的短剧广告&#xff0c;我们点击广告链接即可进入短剧小程序&#xff0c;小程序运营者通过先免费看几集为诱耳然后在情节高潮时弹出充值或开VIP会员才能继续看的模式来赚钱&#xff0c;以超级赘婿、乡村小…

HTML5 基础标签

目录 前言 标题标签 段落标签 换行标签和水平线标签 文本格式化标签 图像标签 超链接标签 多媒体标签 列表标签 无序列表 有序列表 表格 合并单元格 表单 无语义的布局标签 字符实体 前言 当今互联网时代&#xff0c;网页是我们获取信息、交流和展示自己的重要渠…

【RocketMQ入门-安装部署与Java API测试】

【RocketMQ入门-安装部署与Java API测试】 一、环境说明二、安装部署三、Java API 编写Producer和Consumer进行测试四、小结 一、环境说明 虚拟机VWMare&#xff1a;安装centos7.6操作系统源码包&#xff1a;rocketmq-all-5.1.3-source-release.zip单master部署&#xff0c;在…

如何微调优化你的ChatGPT提示来提高对话质量

ChatGPT会话质量很大程度上取决于微调优化提示的艺术。本文旨在阐明微调提示的复杂性&#xff0c;以确保你可以充分发挥ChaGPT这一颠覆性工具的潜力。 与ChatGPT对话的关键部分是“提示”。即&#xff1a;你输入的问题或陈述&#xff0c;它决定了人工智能的响应。类似于引导对…

软件测试基础篇——Docker

1、docker技术概述 docker描述&#xff1a;docker是一项虚拟化的容器技术&#xff08;类似于虚拟机&#xff09;&#xff0c;docker技术给使用者提供一个平台&#xff0c;在该平台上可以利用提供的容器&#xff0c;对每一个应用程序进行单独的封装隔离&#xff0c;每一个应用程…

Blender如何给fbx模型添加材质贴图并导出带有材质贴图的模型

推荐&#xff1a;使用 NSDT场景编辑器快速助你搭建可二次编辑的3D应用场景 此教程适合新手用户&#xff0c;专业人士直接可直接绕路。 本教程中介绍了利用Blender建模软件&#xff0c;只需要简单几步就可以为模型添加材质贴&#xff0c;图&#xff0c;并且导出带有材质的模型文…

netty基础与原理

Netty线程模型和Reactor模式 简介&#xff1a;reactor模式 和 Netty线程模型 设计模式——Reactor模式&#xff08;反应器设计模式&#xff09;&#xff0c;是一种基于 事件驱动的设计模式&#xff0c;在事件驱动的应用中&#xff0c;将一个或多个客户的 服务请求分离&#x…

Verilog求log10和log2近似

Verilog求log10和log2近似 Verilog求10对数近似方法&#xff0c;整数部分用位置index代替&#xff0c;小数部分用查找表实现 参考&#xff1a; Verilog写一个对数计算模块Log2(x) FPGA实现对数log2和10*log10

【LangChain学习】基于PDF文档构建问答知识库(三)实战整合 LangChain、OpenAI、FAISS等

接下来&#xff0c;我们开始在web框架上整合 LangChain、OpenAI、FAISS等。 一、PDF库 因为项目是基于PDF文档的&#xff0c;所以需要一些操作PDF的库&#xff0c;我们这边使用的是PyPDF2 from PyPDF2 import PdfReader# 获取pdf文件内容 def get_pdf_text(pdf):text "…

SQL常见命令语句

1.连接数据库 mysql (-h IP) -u root -p 密码2.查看数据库 show databases3.使用数据库 use db_name4.查看表 show tables [from db_name]5.查看表结构 desc tb_name6.创建、删除、选择数据库 create database db_namedrop database db_nameuse db_name7.数据类型 参考链…

技术应用:Docker安全性的最佳实验|聊聊工程化Docker

&#x1f525; 技术相关&#xff1a;《技术应用》 ⛺️ I Love you, like a fire! 文章目录 首先&#xff0c;使用Docker Hub控制访问其次&#xff0c;保护密钥写在最后 不可否认&#xff0c;能生存在互联网上的软件都是相互关联的&#xff0c;当我们开发一款应用程序时&#x…

(二)结构型模式:1、适配器模式(Adapter Pattern)(C++实现示例)

目录 1、适配器模式&#xff08;Adapter Pattern&#xff09;含义 2、适配器模式应用场景 3、适配器模式的UML图学习 4、C实现适配器模式的示例 1、适配器模式&#xff08;Adapter Pattern&#xff09;含义 将一个接口转换为客户端所期待的接口&#xff0c;从而使两个接口…

JVM 查看配置 jinfo 及使用 jstat,查看堆栈jstack及GC

1. Jinfo 查看正在运行的Java应用程序的扩展参数: 包含 JVM 参数与 java 系统参数 命令&#xff1a; jinfo pid 2 jstat 查看堆内存使用情况及 GC 回收频率等&#xff1a; jstat [-命令选项] [vmid] [间隔时间(毫秒)] [查询次数] 2.1 jstat -gc pid 最常用&#xff0c;可…

MySQL数据库----------安装anaconda---------python与数据库的链接

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; ​&#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382; &#x1f389;&#x1f389;&#x1f389…

【Linux】进程间通信之管道

【Linux】进程间通信之管道 进程间通信进程间通信目的进程间通信的方式 管道&#xff08;内核维护的缓冲区&#xff09;匿名管道&#xff08;用于父子间进程间通信&#xff09;简单使用阻塞状态读写特征非阻塞状态读写特征 匿名管道特点命名管道 匿名管道与命名管道的区别 进程…

时序预测 | MATLAB实现基于CNN卷积神经网络的时间序列预测-递归预测未来(多指标评价)

时序预测 | MATLAB实现基于CNN卷积神经网络的时间序列预测-递归预测未来(多指标评价) 目录 时序预测 | MATLAB实现基于CNN卷积神经网络的时间序列预测-递归预测未来(多指标评价)预测结果基本介绍程序设计参考资料 预测结果 基本介绍 1.Matlab实现CNN卷积神经网络时间序列预测未…

中国首款量子计算机操作系统本源司南 PilotOS正式上线

中国安徽省量子计算工程研究中心近日宣布&#xff0c;中国国产量子计算机操作系统本源司南 PilotOS 客户端正式上线。 如果把量子芯片比喻成人的“心脏”&#xff0c;那么量子计算机操作系统就相当于人的“大脑”&#xff0c;量子计算应用软件则是人的“四肢”。 据安徽省量子…

C++入门篇7---string类

所谓的string类&#xff0c;其实就是我们所说的字符串&#xff0c;本质和c语言中的字符串数组一样&#xff0c;但是为了更符合C面向对象的特性&#xff0c;特地将它写成了一个单独的类&#xff0c;方便我们的使用 对其定义有兴趣的可以去看string类的文档介绍&#xff0c;这里…