29. QML实现抽屉式选项窗口

已于 2023-04-24 14:48:16 修改
阅读量1.0k 收藏 2
点赞数
分类专栏： QT_QML自封装控件库 QML / QT常用技巧汇总 文章标签： QML 抽屉式窗口设计
于 2023-04-20 14:20:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FY_13781298928/article/details/130264637
版权
本文记录了如何使用QML语言模仿Unity的可视化编程组件，设计一个抽屉式的选项窗口。通过ListView展示内容并利用动态加载与动画过渡实现无限嵌套的页面切换。代码已上传至Gitee仓库。
摘要由CSDN通过智能技术生成

1. 说明

最近使用Unity中的可视化编程组件Visual Scripting时，发现在组件设计窗口的鼠标右键菜单项效果很好，在有限的区域内能够展示很多内容，所以突发奇想使用QML语言自己大致实现了一下，效果还行，特记录在此，方便以后使用。
Unity本身效果：

unity中的右键菜单窗口


自己实现的效果：
<
了解本专栏 订阅专栏 解锁全文
Qt Quick 可伸展菜单和抽屉栏示例 - 创建通用的 QML 界面
CodeVorter的博客
09-04 528
菜单栏包含一个名为 “文件” 的菜单，其中包含三个菜单项：“打开”、“保存” 和 “退出”。抽屉栏包含一个列表视图，显示了三个项目：“主页”、“设置” 和 “帮助”。在 Qt Creator 中选择 “File” -> “New File or Project”，然后选择 “Qt Quick Application”。在本文中，我们将介绍如何使用 Qt Quick 创建一个可伸展菜单和抽屉栏的示例应用程序。以上就是使用 Qt Quick 创建可伸展菜单和抽屉栏的示例应用程序的方法。希望本文能对您有所帮助！
Qt/QML编程之路：一个.qml文件调用另一个.qml文件（17）
码农17年的博客
12-24 3390
比如有个main.qml和mainWidget.qml，mainWidget.qml为整个main.qml的一部分，且占满整个界面，或者说ApplicationWindow啥也没干，是个“虚”的窗口，就是把主界面MainWidget装在了进来，所有的界面组件都在MainWidget这个.qml中定义。在下面的示例中，comp1是在MyItem.qml的根上下文中创建的，从该组件实例化的任何对象都可以访问该上下文中的id和属性，如internalSettings.color。Component（组件）
Qt 实现抽屉式菜单
10-26
可以正常编译，编译器是Qt4版本，很适合开发界面使用；代码可以直接拿过来使用。非常好用。
QML之侧滑抽屉（菜单）
画茧自缚
07-17 5472
可以用两种方式实现抽屉效果，一种是使用动画，一种是直接使用抽屉控件（Drawer）。 效果 区别 1、使用动画更加灵活，更方便自定义动画效果 2、使用动画实现的抽屉需要依靠其Z属性确定其所在哪一层，Drawer弹出时在最上层 3、Drawer继承自Popup，可以设置为模态和非模态，可以方便设置其关闭方式 4、动画使用start()和stop()打开关闭，Drawer使用ope...
QQHideWnd：掌握抽屉式窗口界面设计技术
最新发布
weixin_35982453的博客
09-14 1025
本文还有配套的精品资源，点击获取 简介：QQHideWnd提供了一个编程示例，用于实现类似QQ的抽屉式弹出和收起界面效果，增强用户界面的交互性与灵活性。该项目源码设计清晰、注释详尽，特别适合对抽屉式效果感兴趣的开发者进行学习。开发者需要掌握事件监听、坐标计算、动画效果、布局管理、用户交互以及源码注释等关键知识点，以实现自然流畅的界面交互体验。 1. QQHideW...
QML 抽屉效果例子
caicai_xiaobai的博客
08-03 327
Overlay.modal: 去掉抽屉阴影有效。
qml 菜单按钮Menu 弹出窗口Popup 侧滑抽屉Drawer
qq_33373173的博客
11-22 4916
菜单按钮 Menu 有两种使用方法：1）上下文的菜单，即右键单击显示的菜单 2）弹出菜单，即单击按钮后显示的菜单 菜单种显示一个项目，用到MenuItem：提供一种熟悉的方式来响应被触发的菜单项。它有一个触发信号triggered()。 Menu的属性及方法大部分是Qt5.10引入的 属性 cascade : 保存菜单是否级联其子菜单 contentData : 保存内容数据列表 contentModel : 保存用于显示菜单项的模型 count : 保存项目数 currentIndex : 保存当前突出
Chart.qml:Chart.qml 类似于 Chart.js
06-06
图表.qml // draw a bar object bar(data,option) // draw a doughnut object doughnut(data,option) // draw a line object line(data,option) // draw a pie object pie(data,option) // draw a polarArea ...
QML+Chart.js 实现图表显示
10-26
本文将深入探讨如何利用`QML`（Qt Quick）和`Chart.js`来实现图表显示，以及它们各自的特点和优势。 首先，让我们了解一下`QML`。`QML`是Qt框架的一部分，它是一种声明式语言，用于构建用户界面。它的设计使得UI的...
SelectListView.qml (QML ListView 多选)
10-16
Qml 中的listview 默认不提供多选 Ctrl + A 全选， Shift +点击 范围选择， Ctrl+ 点击 多选 ，这个资源中实现了这几种选择，除了框选。
71.qt quick-可伸展菜单-抽屉栏示例 通用QML界面(一键换肤)
抵抗时间扭曲，坚持做一件有意义的事
12-10 4351
特点: 支持动态添加item、删除item、自适应界面 附带添加删除、展开等动画 同时支持qwidget、qml加载 支持number提示(比如消息数量等) 侧边抽屉栏支持动画伸展 支持换肤、拖拽、最大化等
QT实现抽屉效果
09-16
QToolBox很好的实现了抽屉效果还有唯美的扁平化设置风格。
qtquick-navigationdrawer:适用于QtQuick的android风格的导航抽屉
05-04
qtquick-navigationdrawer 适用于QtQuick的android风格的导航抽屉
QML自定义菜单样式
05-04
利用QML写的菜单样式，适合项目中用，定义了MenuItem和MenuBar的样式。实现是在Qt5.12.0中，应该是Qt5.10及以上都可以的。
qml弹出自定义窗口
07-16
该代码包含窗口自定义窗口，自定义信号等内容
QML弹出窗口组件，灯箱效果、动画效果，可拖拽
09-28
QML弹出窗口组件，灯箱效果、动画效果，可拖拽 核心思路：一个mask层，一个最顶层，都用rectangle，禁止事件穿透，动画效果 http://www.cnblogs.com/surfsky/p/3998391.html
QML 导航栏
小黄的博客
02-14 561
QML 导航栏
QML窗口
tang063的专栏
08-13 659
Qt Quick 提供了QML API 和 C++ API，也就是这个包里既有QML脚本语言的对象，方法，属性，也有C++语言可以调用的方法，还有QML和C++是交互的机制。Qt::WindowModal ：表示该窗口是单个窗口层次结构的模态，会阻止输入到其父窗口、所有祖父窗口以及其父窗口和祖父窗口的所有同级窗口。Qt::FramelessWindowHint：生成无边框窗口。去掉了包括最大化，最小化，关闭的标题栏，并且这时的窗口不可以拖动，不可调整大小，相当于是一个固定死的窗口。
qt之简单抽屉(QWidget编写)
tangyoha
03-08 2157
抽屉效果在qml里面有个自带的，但是Qwidget并没有自带，于是直接写一个。 使用QWidget 初始化draw里面的东西 显示 效果
QML A.qml加载B.qml文件 A.qml要怎么通知B.qml的自定义函数
05-11
要通知B.qml的自定义函数，可以使用Qt的信号和槽机制。在A.qml中定义一个信号，当需要通知B.qml时，发射该信号，B.qml中连接该信号到其自定义函数即可。 下面是示例代码： A.qml文件中： ``` import QtQuick 2.0 Item { signal mySignal(string message) function notifyB() { mySignal("Hello from A.qml!") } } ``` B.qml文件中： ``` import QtQuick 2.0 Item { function myFunction(message) { console.log(message) } A { onMySignal: myFunction(message) } } ``` 在B.qml中，定义了一个名为myFunction的自定义函数，它会打印接收到的消息。然后，在A.qml中创建了一个A对象，并定义了一个名为mySignal的信号。在需要通知B.qml时，调用notifyB函数，发射mySignal信号，并传递消息"Hello from A.qml!"。在B.qml中，通过连接onMySignal信号到myFunction函数，实现了A.qml通知B.qml的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

山间点烟雨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值