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

这篇具有很好参考价值的文章主要介绍了Qt6之QListWidget——Qt仿ToDesk侧边栏(1)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、 QLitWidget概述

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

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

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

Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言

Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言

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

Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言

 二、实例演示和试用

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

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

Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言

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

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

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

Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言

 2.3、调整字体大小

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

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

Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言

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

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

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

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

Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言

 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);
}

Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言

 2.6、解决左侧图标

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

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

Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言

Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言

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

Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言 Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言

Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言

 Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言

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

Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言

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

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

QWidget:focus{
outline: none;
}

Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言

2.8 最终编译演示

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

Qt6之QListWidget——Qt仿ToDesk侧边栏(1),Qt6,qt,开发语言

 总结,实际上Qt提供给我们的是小孩积木,到底堆成怎样效果,取决于想象力和熟练度。下篇将QStackedWidget很容易的实现切换页,相对于QFrame+QPushButton或者QToolButton这种造轮子组和,更加简洁、实用和易理解。文章来源地址https://www.toymoban.com/news/detail-635570.html

到了这里,关于Qt6之QListWidget——Qt仿ToDesk侧边栏(1)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • windows11下Qt6.5开发环境安装及QT for Android环境搭建(含虚拟机的创建)

    最近想升级Qt6.5及顺便配置Android开发环境。于是在网上找了各种教程,结果在配置Android开发环境都以失败告终。最终花了很长时间才搞掂。接下来分享比较好的安装方法以及安装注意事项。 建议用中科大或清华的镜像下载在线安装器,官网的很慢。链接如下: 下载在线安装

    2024年02月13日
    浏览(67)
  • Qt6.5.1+WebRTC学习笔记(十一)开发环境搭建(ubuntu22.04)

    win10开发测试已经一段时间了,最近将程序移植到ubuntu测试了下,改动不是很大,本教程记录下环境搭建过程 1.操作系统ubuntu22.04 64位 x86架构(建议更新到最新) 2.合理的上网方式,需要正常访问google,最好有40G以上流量 3.安装git,并设置代理 4.安装depot_tools depot_tools是包含下载

    2024年02月09日
    浏览(57)
  • QT的QListWidget使用

     本文进行的了QListWidget的使用,设计了如上所示的UI界面信息,具有以下几个功能: 添加,插入,删除,显示模式调整等功能 初始化 模式确定 双击显示处理 具体处理的信号槽函数 结果显示

    2024年02月16日
    浏览(47)
  • 【QT】——QListWidget的使用

    目录 1.QListWidget和QListWidgetItem 2.外观 2.1列表模式 2.2图标模式 3.常用接口 4.示例 删除列表项 添加列表项 QListWidget 是qt中的列表框控件,它用于显示多个列表项, 列表项 对应的类是 QListWidgetItem . QListWidgetItem可以只包含文字 QListWidgetItem 中可以同时包含 图片和文字 。 列表框控

    2024年02月16日
    浏览(50)
  • Qt QListWidget列表框控件

    Qt中的列表框控件,对应的类是 QListWidget 它用于显示多个列表项,列表项对应的类是 QListWidgetitem QListWidget 有很多属性和方法,完整的可查看帮助文档。这里列出常用的属性和方法: 列表框控件,支持两种显示模式:列表模式和图标模式 其中, QListView::ViewMode 是一个枚举,有

    2024年02月02日
    浏览(41)
  • Qt6.5.1+WebRTC学习笔记(十)开发环境搭建(win10+vs2022)

    1.操作系统win10 64位 2.合理的上网方式,需要正常访问google,最好有40G以上流量 3.安装VS2022,笔者使用的是社区版,并选中C++相关,笔者设置如下        注意,win10的sdk需要是10.0.22621.0,其他版本可能导致编译不通过,而且这个版本会根据webrtc源码的更新而发生变化  4.安装

    2024年02月08日
    浏览(51)
  • Qt中QListWidget/QListWidgetItem详解

    QListWidget是一个方便类,它提供了一个类似于QListView提供的列表视图,但具有一个经典的基于项目的界面,用于添加和删除项目。QListWidget使用一个内部模型来管理列表中的每个QListWidgetItem。 QListWidget - QListView - QAbstractItemView - QAbstractScrollArea - QFrame - QWidget 要获得更灵活的列表

    2024年02月01日
    浏览(42)
  • QT基础:遍历QListWidget,及QListWidget简单演示,适合初学者食用

    QListWidget 是一个列表框,关于它的详细介绍可以参考:Qt QListWidget详解 初学者如果只是想在短时间内了解 QListWidget 的话,可以参考这里 1、打开QT,创建一个 widget 项目,在UI中加入 QListWidget 和一个 PushButton(等会备用) 可以双击 QListWidget 小部件 , 点左下角的 + 可以在里

    2024年02月12日
    浏览(47)
  • 【QT基础教程 十二】QListWidget类解析

    概要:本期介绍QListWidget类的使用,包含QListWidget如何添加项、删除项、遍历等操作。 头文件:#includeQListWidget 模块:QT += widgets 父类:QListView QListWidget类提供了一个基于项(QListWIdgetItem)的列表控件 ,它拥有属于自己的界面。当然,照我们之前说的,它也继承与QWidget类。 其

    2024年02月13日
    浏览(42)
  • Qt中设置QListWidget滑动条滚动速度

    QListWidget继承QListView控件,Qt帮助文档中说 QAbstractItemView::ScrollPerPixel 和QAbstractItemView::ScrollPerItem分别可以实现按item滚动和像数点滚动,但是好像都没效果。还有就是说通过创建QScrollBar有用,但是也没效果。 亲测还是这样有用,记录一下,记录一下!!!

    2024年02月11日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包