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

news2024/11/27 21:43:41

一、 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这种造轮子组和,更加简洁、实用和易理解。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

​币安或面临「美司法部」欺诈指控

作者:维特根斯坦他弟 美国媒体semafor独家报道,知情人士透露,美国司法部正计划对币安提出欺诈指控,但又担心消费者会为此付出的巨大代价。 知情人士表示,联邦检察官担心他们起诉币安,可能会引发该交易所发生…

Django进阶

1.模板 1.1 寻找html模板 TEMPLATES [{BACKEND: django.template.backends.django.DjangoTemplates,DIRS: [os.path.join(BASE_DIR, templates)],APP_DIRS: True,OPTIONS: {context_processors: [django.template.context_processors.debug,django.template.context_process…

开窗积累之学习更新版

1. 开窗使用1之 count range between current row and current row 将相同排序字段的值进行函数计算 selectsku_id,substr(create_date,1,7) date_month,order_id,create_date,sku_num*price,sum(sku_num*price) over (partition by sku_id order by substr(create_date,1,7)…

M2I触摸屏与PLC通信手册下部

其它推荐设置见内部同步、端子块、清除发送CTS置于0V位置。 固定设置在偶校验,数据比特7位,停止比特位在第2比特位上。 (3) C500-LK203 拨动开关设置 开关 设置项目 开关设置状态ON OFFSW1 1~5 制定站号 0 1 2 … 30 31 1 站号设置 OFF ON OFF … OFF…

stable-diffusion-webui 界面汉化

本教程通过安装 sd-webui-bilingual-localization 插件来达到汉化目的, 项目地址为:https://github.com/journey-ad/sd-webui-bilingual-localization 一、安装插件 先进入插件安装界面 在搜索栏搜索 zh_CN Localization 中文语言包, 项目地址: https://github.com/dtlnor/st…

vue+iviewUi+oss直传阿里云上传文件

前端实现文件上传到oss(阿里云)适用于vue、react、uni-app,获取视频第一帧图片 用户获取oss配置信息将文件上传到阿里云,保证了安全性和减轻服务器负担。一般文件资源很多直接上传到服务器会加重服务器负担此时可以选择上传到oss&…

怎么修改ip地址 手机ip地址如何改

如今的数字化时代,IP地址是连接我们与互联网世界的桥梁。然而,有时我们可能需要修改IP地址以满足特定需求,比如提高网络速度、绕过地理限制等。本文将为您提供修改IP地址的简单步骤和常见问题解答,帮助您轻松完成IP地址修改。 一、…

SciencePub学术 | Elsevier旗下计算机类重点SCIE征稿中

SciencePub学术 刊源推荐: Elsevier旗下计算机类重点SCIE征稿中!信息如下,录满为止: 一、期刊概况: 计算机语音类重点SCIE 【期刊简介】IF:4.0-4.5,JCR2区,中科院3区; 【出版社…

NANK南卡签约傅园慧,倡导更健康的听音体验

近日,中国知名骨传导耳机品牌——NANK南卡,正式官宣著名游泳冠军傅园慧成为Nank南卡的品牌推荐大使。 傅园慧是一位备受瞩目的运动员,在游泳领域取得了令人瞩目的成就,不仅如此她独特的个性和乐观向上的态度而闻名,深受…

2023全新UI好看的社区源码下载/反编译版

2023全新UI好看的社区源码下载/反编译版 这次分享一个RuleAPP二开美化版(尊重每个作者版权),无加密可反编译版本放压缩包了,自己弄吧!!! RuleAPP本身就是一款免费开源强大的社区,基…

一文5000字从0到1构建高效的接口自动化测试框架思路

在选择接口测试自动化框架时,需要根据团队的技术栈和项目需求来综合考虑。对于测试团队来说,使用Python相关的测试框架更为便捷。无论选择哪种框架,重要的是确保 框架功能完备,易于维护和扩展,提高测试效率和准确性。…

现代C++中的从头开始深度学习【1/8】:基础知识

一、说明 提及机器学习框架与研究和工业的相关性。现在很少有项目不使用Google TensorFlow或Meta PyTorch,在于它们的可扩展性和灵活性。也就是说,花时间从头开始编码机器学习算法似乎违反直觉,即没有任何基本框架。然而,事实并非…

同芯同意创未来——赛意力量 SNP ·南京半导体高科专场

7月28日,“赛意力量全国行”将在南京组织以“同芯同意创未来”为主题的南京半导体高科专场沙龙活动。届时,“赛意力量”将携众优秀企业IT及财务领域嘉宾,开展深度交流,共同为推动科技创新与区域经济发展而出谋划策。 南京作为中国…

并发——线程与进程的关系,区别及优缺点?

文章目录 1. 图解进程和线程的关系2.程序计数器为什么是私有的?3. 虚拟机栈和本地方法栈为什么是私有的?4. 一句话简单了解堆和方法区5. 说说并发与并行的区别? 从 JVM 角度说进程和线程之间的关系 1. 图解进程和线程的关系 下图是 Java 内存区域,通过下图我们…

【echarts】手把手喂饭教学!最容易懂的微信小程序 echarts 项目实践入门教程

前言:echarts是一个使用 canvas 制作图表的组件库,是前端中最常见的数据可视化( DashBoard ) 工具之一。相信很多同学都已经接触过了,但一直局限于使用官网的模板,无法完成个性化的精美图表。如果你也正被 无法使用echarts完成个性…

word单独一页设置页面设置

点击“分隔符——下一页”,这一页就成为了独立的一节,就可以单独设置页面布局了

掌握Python列表的魔法:解密常用方法揭示的编程奥秘!

在Python的编程世界中,列表是你的魔法仓库,能够存储、组织和操控各种数据。这些数据可以是数字、字符串、对象,甚至是其他列表。无论你是新手还是经验丰富的开发者,本篇博客将带你深入探索Python列表的常用方法,揭示这…

python简单知识点大全

python简单知识点大全 一、变量二、字符串三、比较运算符四、随机数4.1、随机整数4.2、随机浮点数4.3、随机数重现 五、数字类型5.1、整数5.2、浮点数5.3、复数 六、数字运算七、内置函数八、布尔类型八、逻辑运算符九、短路逻辑和运算符优先级十、分支和循环10.1、if语句10.2、…

Java技术整理(3)—— 多线程并发篇

1、Java 线程实现/创建方式 (1)继承Thread类 Thread类本质上是实现了Runnable接口的实例,代表一个线程的实例,通过start()启动,自动执行run()方法。 (2)实现Runnable接口 Runnable是一个没有…

【我们一起60天准备考研算法面试(大全)-第三十七天 37/60】【思维题】

专注 效率 记忆 预习 笔记 复习 做题 欢迎观看我的博客,如有问题交流,欢迎评论区留言,一定尽快回复!(大家可以去看我的专栏,是所有文章的目录)   文章字体风格: 红色文字表示&#…