【QML笔记】在QtCreator中添加自定义QML组件方法

疯花正猫

已于 2024-01-12 14:14:11 修改

阅读量2.8k

点赞数 25

CC 4.0 BY-SA版权

分类专栏： Qt开发 QML 文章标签： qt ui c++

于 2024-01-12 11:50:29 首次发布

本文链接：https://blog.csdn.net/qq_19647107/article/details/135547306

本文介绍了如何在QtCreator5.9.6中为QML开发添加自定义组件，包括创建模块、导入设置、代码配置和解决组件关联与设计视图问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、引言

目前为止，在QtCreator上进行QML开发是体验最好的，包括语法高亮、代码提示以及组件关联，其他IDE上对QML的支持还不够全面。本文介绍在QtCreator添加自定义QML组件的方法，以实现自定义组件关联、语法高亮以及自定义组件可视化编辑。

本文Qt版本为5.9.6，相关代码链接稍后上传…

二、工程设置

使用QtCreator新建一个QtQuick工程，本文中工程名为QMLConfigTest，其目录如下

project
├─ main.cpp
├─ main.qml
├─ qml.qrc
├─ QtConfigTest.pro
└─ QtConfigTest.pro.user

三、自定义QML文件导入

此章节建议在系统文件夹中直接操作，而不是在QtCreator的管理器中

创建自定义QML模块文件夹MyModule，并在其内部添加qmldir和自己的qml组件
(本文为TestComponent.qml和SubModule/SubComponent.qml)，现在工程目录如下

project
├─ MyModule
│	├─ qmldir
│	├─ TestComponent.qml
│	└─ SubComponent
│		└─ SubComponent.qml
├─ main.cpp
├─ main.qml
├─ qml.qrc
├─ QtConfigTest.pro
└─ QtConfigTest.pro.user

其中 MyModule/qmldir 文件用于提供自定义QML组件的加载名称以及版本，具体形式如下：

module <模块名>
[singleton] <组件名> <版本号> <组件qml文件路径>
[singleton]

最低0.47元/天解锁文章

200万优质内容无限畅学