github原始仓库https://github.com/jaredtao/TaoQuick
gitee镜像仓库https://gitee.com/jaredtao/TaoQuick
这是一个QtQuick/Qml组件库,集成了常用的QtQuick组件,并做了适当的属性封装、功能扩展,以方便开发Qml程序。
实现原理可以参考《玩转Qml》系列教程,以下网站都有收录:
最佳实践计划 | 许可 |
---|---|
TaoQuick项目已同步在Qt官方商城上架
https://marketplace.qt.io/collections/newest/products/taoquick
Windows | Ubuntu | MacOS | Android | IOS |
---|---|---|---|---|
已发布 | 下载 | 下载次数 |
---|---|---|
最新标签 | 用到的编程语言数量 | 用最多的编程语言 | 代码大小 | 仓库大小 |
---|---|---|---|---|
Issues | 关掉的issue | pull请求 | 关掉的pull |
---|---|---|---|
提交频率 | 最后一次提交 | 发布时间 | forks | stars |
---|---|---|---|---|
-
Qt 5.9.0 以上
-
已兼容Qt5.15
项目结构如下
各目录说明如下表:
目录 | 说明 | 备注 |
---|---|---|
src | TaoQuick核心库 | 主要是qml代码和图片资源,以及designer支持相关的配置和脚本,不包含c++代码 |
exampes | 各种示例程序 | 演示如何使用TaoQuick核心库,其中TaoQuickShow比较全面地展示TaoQuick的各项功能 |
3rdparty | 第三方库 | |
mkspecs | qmake功能的扩展 | |
.github | github-actions配置 | 持续集成相关配置,用于自动化构建、发布 |
核心库目录为
src/TaoQuick/Qml
核心库结构如下
为了避免与Qt默认组件混淆,组件名称全部以Cus开头 (Custom的缩写)
CusConfig是核心库的全局配置,主要包括字体、颜色等,所有组件都按照此配置显示
其它各目录说明如下表:
目录 | 说明 | 备注 |
---|---|---|
Basic | 基础的组件,诸如文本、悬浮提示等 | 用于统一整个工程中的基础组件,方便在工程变的庞大时,做全局替换 |
CusBackground | 一个简单的背景框 | 一般放在程序的最开始,用来吸收空白区域的鼠标焦点 |
CusButton | 按钮 | 已封装一部分经常用到的按钮,也可以二次定制各种效果 |
CusCheckBox | 勾选 | |
CusComboBox | 下拉框 | |
CusImage | 基础的图像 | |
CusInput | 输入框 | |
CusLabel | 文本标签 | |
CusListView | 列表 | 简单的定制了滚动条 |
CusPopup | 弹出框 | |
CusScroll | 滚动条 | |
CusSlider | 可拖动进度条 | |
CusSpinBox | 调节框 | |
CusTable | 表格 | 需要配合特定的C++ model使用,支持以行为单位的选中、打勾、鼠标框选、反选、连选、全选等 |
Effect | 特效 | 动画、页面切换效果、ShaderToy等 |
Misc | 其它杂项 |
详细的使用方法,可以阅读 入门指南
使用核心库,只需要在项目中导入'.pri'文件,并将qml路径加入到QmlEngine即可。
TaoQuick组件将以本地文件或qrc资源的方式被引用。
此种用法, 与Qml模块、Qml C++插件等方式相比,有以下优势:
-
导入pri后, 不需要额外编译、生成dll或插件
-
发布程序时不需要额外拷贝资源
-
导入pri后, Qt Creater即可支持TaoQuick的Qml代码高亮、双击跳转
-
导入pri后,在Qml中导入模块(import TaoQuick 1.0),即可在Qt Creater 的 designer模式中,通过拖拽使用TaoQuick组件、可视化开发UI (原理: 通过脚本生成designer需要的metainfo)
具体使用步骤:
-
将src文件夹拷贝到你的项目中,任意位置
-
在你的项目pro文件中,导入对应的src文件夹中的pri文件即可
include(src/TaoQuick.pri)
说明:此pri文件定义两个宏:TaoQuickImportPath 和 TaoQuickImagePath。
debug模式都以本地文件的方式使用,release模型则以qrc资源文件的方式使用。
另外, 这几个变量用来支持QtCreator的语法高亮
QML_IMPORT_PATH = $$PWD
QML2_IMPORT_PATH = $$PWD
QML_DESIGNER_IMPORT_PATH = $$PWD
(如果你的语法高亮有问题,但是程序能运行,可以先不管它。
毕竟QtCreator的bug也不是一天两天了)
-
在CPP代码中,增加导入路径。
需要在QmlEngine加载source之前,增加importPath,并把imagePath设置为上下文。
如果主窗口是由QQuickView加载的,则:
view.engine()->addImportPath(TaoQuickImportPath);
view.rootContext()->setContextProperty("taoQuickImagePath", TaoQuickImagePath);
如果主窗口是由QQmlEngine加载的,则:
engine.addImportPath(TaoQuickImportPath);
engine.rootContext()->setContextProperty("taoQuickImagePath", TaoQuickImagePath);
详细的使用方法,可以阅读 入门指南
TaoQuick 0.5.0以后的版本,增加了cmake支持。
原理和qmake一样,只不过换成了cmake的语法规则。
用法如下:
-
将src文件夹拷贝到你的项目中,任意位置
-
将cmake/TaoQuick.cmake文件拷贝到你的项目中,任意位置,并且
确保TaoQuick.cmake文件中,第一行的TaoQuickPath指向正确的src路径
- 导入TaoQuick
先在你的项目CMakeLists.txt文件中, 增加cmake扩展路径
SET(CMAKE_MODULE_PATH ${CMAKE_CURRENT_SOURCE_DIR}/cmake)
我这里的扩展路径是仓库根目录下的cmake文件夹,其中包含了一些后缀名为 .cmake的文件。
加载好扩展路径,用incude指令导入TaoQuick.cmake即可
include(taoQuick)
说明:taoQuick.cmake会定义两个宏:TaoQuickImportPath 和 TaoQuickImagePath。
debug模式以本地文件的方式使用,release模型则以qrc资源文件的方式使用, 将qrc文件路径定义在了宏TaoQuickRes中。
因此release模式,要在add_executable中增加TaoQuickRes, 例如
if (CMAKE_BUILD_TYPE MATCHES "Release")
add_executable(MyApp ${someSource} ${TaoQuickRes})
else()
add_executable(MyApp ${someSource})
endif()
-
在CPP代码中,增加导入路径。
需要在QmlEngine加载source之前,增加importPath,并把imagePath设置为上下文。
如果主窗口是由QQuickView加载的,则:
view.engine()->addImportPath(TaoQuickImportPath);
view.rootContext()->setContextProperty("taoQuickImagePath", TaoQuickImagePath);
如果主窗口是由QQmlEngine加载的,则:
engine.addImportPath(TaoQuickImportPath);
engine.rootContext()->setContextProperty("taoQuickImagePath", TaoQuickImagePath);
作者:武威的涛哥
欢迎联系我,乐于提供技术咨询服务,可洽谈技术支持、商业合作。
QQ: 759378563
欢迎加入涛哥的QQ群: Qt进阶之路
此群是高质量群,Qt界大佬众多,不灌水闲聊,日常交流技术、分享书籍、帮助解决实际问题。
1群:734623697
2群:342341405
觉得分享的内容还不错, 就请作者喝杯奶茶吧~~
感谢以下网友的赞助与支持(排名不分先后):
hxhlb (花心胡萝卜工作室)
咸鱼猴
Qt侠-刘典武
一去、二三里
大樹
丝绸-郑天佐
寒山-居士
小风电子
Qt君
海盗船
雨田哥
游龙
Rj
重庆-胡某某
Ivy
孙十一少
田宇
power
敢敢
扣脚翁
白菜豆腐
甜不辣
Mr.Hu
秾芳教主
焖哥
蓝色幻想
Martin Zuo
windsmoon
小手冰凉
永远=没有终点
我是王大狗
米粒旅行
...