QT之QML学习五：添加自定义Qml组件，以及组件管理

已于 2024-09-12 15:26:01 修改
阅读量876 收藏 7
点赞数 4
分类专栏： Pyside QML/C++ Python 文章标签： qt 学习 开发语言
于 2024-09-11 20:41:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u014627020/article/details/142138281
版权

开发环境：

在这里插入图片描述

1、Qt 6.7.2
2、Pyside6
3、Python 3.11.4
4、Windows 10

重要的事情说三遍，使用自定义qml参考链接： Qt官网参考网址！！！
重要的事情说三遍，使用自定义qml参考链接： Qt官网参考网址！！！
重要的事情说三遍，使用自定义qml参考链接： Qt官网参考网址！！！

前言：
这里参考了官网，主要是同级别目录以及子目录下qml文件的使用
新建一个工程，然后添加下图两个文件作为演示，
最终效果如下：
在这里插入图片描述

QT之QML学习五：添加自定义Qml组件，以及组件管理

参考工程地址 :

最低0.47元/天 解锁文章
Qt Quick qml自定义控件：qml实现电池控件
琅嬛福地
07-14 741
电量条使用矩形Rectangle来表示，用Repeater重复绘制10个矩形即可。在main.qml中使用定时器模拟电量数值，在实际开发中，需要接入实际的数值。以上代码在Qt6.7.1通过测试测试。
QML自定义组件显示在QT Designer库面板中的方法
11-03
使用QtQuick做开发，会大量使用自定义的组件，但自定义组件如何在QtCreate的designer的库面板中显示并使用？本人查阅了大量资料，并摸索后将实现过程详细记录，通过一个小工程来做一示范
qml使用c++自定义类作为组件
qqwangfan的专栏
03-15 590
【代码】qml使用c++自定义类作为组件。
【Qt6 QML Book 基础】04：QML组件（含完整可运行代码）
binary0010的博客
04-22 524
本文聚焦 QML 组件化开发，详解如何封装可复用按钮组件。通过文件级组件Button.qml实现中文交互界面，解析根元素选择、属性导出及信号机制等核心技术，强调以Item封装内部逻辑、通过alias暴露必要接口的设计原则。通过组件化实现代码复用与逻辑解耦，为 QML 开发者提供标准化组件设计思维，适用于构建复杂 UI 组件库，提升项目开发效率与维护性。
11 QML之自定义QML组件
2303_77955821的博客
01-16 237
定义对象类型自定义类型的可访问特性代码运行结果必须以大写字母开头，不能包含除字母、数字、下划线以外的字符，这个.qml文件被引擎识别为一个QML类型的定义同一目录的其他QML文件会被自动设置为可用。
【QML】在main.qml 文件中引入自定义 qml 文件
challenglistic的博客
05-06 1343
【QML】在main.qml 文件中引入自定义 qml 文件
qml-自定义组件
LIJIWEI0611的博客
02-10 617
新建DateTimeLabel.qml 填写内容： import QtQml 2.12 import QtQuick.Controls 2.0 import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Layouts 1.12 Item { Timer { interval: 500; running: true; repeat: true onTriggered: time.text
QML自定义组件（基于qt5.6ming的）
01-16
ML 可以由这些基本元素组合成一个复杂的元素，方便以后我们的重用。这种组合元素就被称为组件。组件就是一种可重用的元素。QML 提供了很多方法来创建组件。不过，本章我们只介绍一种方式：基于文件的组件。基于文件的组件将 QML 元素放置在一个单独的文件中，然后给这个文件一个名字。
【QML笔记】在QtCreator中添加自定义QML组件方法
疯花正猫的博客
01-12 2709
介绍在QtCreator中添加自定义组件的方法
QML 导入自定义模块（CMAKE管理）
qq_41852768的博客
06-21 1746
qml自定义模块导入
QML项目实战：自定义Combox
11-06
同时，我们还可以通过编写自定义的QML组件来实现更复杂的行为，比如在用户选择一个选项后执行一些特定的逻辑。 自定义控件的一个关键优势在于能够提高用户界面的可用性和访问性。通过精心设计的交互和视觉效果，...
【Qt6 QML 基础】04：QML组件（含完整可运行代码）
04-22
此外，该文件还提供了Main.qml主程序的实现，这是QML程序的入口点，它加载并展示了一个或多个QML组件。在本例中，Main.qml加载了Button组件，并将其集成到用户界面中，以提供完整的交互体验。 为了使组件能够在不同...
QML-自定义模块
QtCompany的博客
06-14 813
使用情景就是不可再修改的QML或者js文件，可定义成模块，分为如下情况1、自定义控件这里的自定义控件可以理解为最小单位控件，不可再修改，与QML的Button、Text等有同样的地位；不要与能够修改或者带逻辑的控件混淆；2、存放公共变量、函数的JS如某个JS文件里存放工程所需的公共函数；3、字体库等如FontAwesome。本文以自定义公共控件为例。
QML——添加自定义模块
hw5230的博客
02-22 1335
通过这些import语句，我们就能使用QML中的相关控件了。其实这就是导入模块的意思，它包括3个部分：import关键字、模块名称、版本号。模块是一种封装的方式，设计它的人可以单独更新模块内容，然后更新版本号，对使用模块的人没有影响。在项目中，不同窗口可以使用同一模块中的一些类型。Qt中已经有很多封装好的模块，我们可以在安装目录里找到：模块是由一个名为 qmldir 的文件指定的，我们可以打开Qt中模块所在的文件夹看看，每个模块都对应一个qmldir文件：为了便于理解，我举一个非常简单的例子——
qml 加载自定义qml组件的方法
Zlb2214的博客
04-03 286
【代码】qml 加载自定义qml组件的方法。
QML基于文件的自定义组件
papership的博客
07-24 1331
QML基于文件的自定义组件 概念：QML可以由基本元素组合成一个复杂的元素，这种组合后的复杂元素就被称为组件。 作用：组件可以重用，减少代码的冗余。 建立步骤： 1、在一个“.qml”文件中建立组件，“.qml”文件名为组件的名字。 2、在使用组件的“.qml”文件中引用组件，形式：“import 组件名” 3、通过组件名字使用自定义的组件。 实例：QT有多个页面，...
QML中的自定义组件与模块
夏天的狂风的专栏
03-31 647
要创建自定义组件，您需要将QML元素组合成一个新的QML文件，并为组件指定一个根元素。例如，我们可以创建一个名为Button {id: rootid: labelradius: 5在上述示例中，我们创建了一个自定义的按钮组件，该组件基于Button元素，并自定义了其内容和背景。我们还为自定义组件定义了两个属性别名，以便在使用此组件时轻松地设置文本和背景颜色。要在其他QML文件中使用自定义组件，您需要在文件中导入组件所在的目录，并使用组件的文件名作为元素类型。例如，要在名为Main.qml。
QT 如何在 QListWidget 的选项中插入自定义组件
qq_36500197的博客
06-02 1614
有时我们需要QListWidget 完成更复杂的操作，而不仅限于添加文本或者图标，那么就会使用到setItemWidget 函数
QML之自定义QML组件
最新发布
05-24
### 如何在QML中创建和使用自定义组件 #### 创建自定义QML组件 在QML中，可以通过编写一个新的`.qml`文件来定义自定义组件。这种组件本质上是一个新的QML类型，可以在其他QML文件中实例化并使用。 1. **定义自定义组件** 首先，在项目的某个目录下创建一个新的`.qml`文件，例如 `MyButton.qml`。在这个文件中，定义一个基于现有QML类型的组件，并为其添加特定的属性、信号或行为逻辑。 下面是一个简单的按钮组件示例： ```qml // MyButton.qml import QtQuick 2.15 Rectangle { width: 100; height: 50 color: mouseArea.pressed ? "lightgray" : "white" border.color: "black" Text { anchors.centerIn: parent text: label font.pixelSize: 18 } MouseArea { id: mouseArea anchors.fill: parent onClicked: console.log("Button clicked!") } property string label: "Click Me" // 自定义属性 } ``` 上述代码定义了一个名为 `MyButton` 的矩形按钮组件[^1]。 2. **注册自定义组件（可选）** 如果希望将自定义组件作为全局可用的类型，可以将其放置在一个专门的目录中，并通过 `qmldir` 文件注册它。这样，就可以像使用标准QML类型一样导入和使用该组件。 假设我们将 `MyButton.qml` 放置在 `CustomComponents` 目录下，则需要创建一个 `qmldir` 文件，内容如下： ``` module CustomComponents MyButton 1.0 MyButton.qml ``` 接下来，在主QML文件或其他地方导入此模块即可： ```qml import CustomComponents 1.0 ``` --- #### 使用自定义QML组件 一旦定义好自定义组件，便可以在任何支持它的上下文中使用它。 1. **直接引用本地组件** 如果未进行模块化注册，可以直接通过 `.qml` 文件名引用组件。例如： ```qml import QtQuick 2.15 import QtQuick.Window 2.15 Window { visible: true width: 640 height: 480 title: "Using Custom Component" MyButton { // 调用位于同一路径下的 MyButton.qml 组件 x: 50; y: 50 label: "Press Me!" } } ``` 2. **通过模块导入组件** 若已将组件注册为模块的一部分，则需按照模块名称导入并使用。例如： ```qml import QtQuick 2.15 import QtQuick.Window 2.15 import CustomComponents 1.0 // 导入自定义模块 Window { visible: true width: 640 height: 480 title: "Using Module-based Component" MyButton { x: 50; y: 50 label: "Module Button" } } ``` 3. **动态加载组件** 可以利用 `Loader` 动态加载组件，从而延迟初始化资源或有条件地渲染某些部分。例如： ```qml Loader { sourceComponent: myButtonComponent active: showButton } Component { id: myButtonComponent MyButton { label: "Dynamic Button" } } PropertyChanges { target: loaderItem property: "visible"; value: false when !showButton } ``` --- #### 结合C++扩展自定义组件 如果需要更复杂的功能，还可以结合C++开发自定义组件。以下是基本流程： 1. 编写C++类继承 `QQmlExtensionPlugin` 并导出为共享库； 2. 注册C++类型以便在QML中访问； 3. 修改环境变量 `QML2_IMPORT_PATH` 指向生成的DLL/SO文件位置； 4. 在QML中导入对应的命名空间并使用。 具体步骤参见相关内容说明[^3]。 --- ### 总结 在QML中创建和使用自定义组件是一项常见且强大的功能。无论是简单封装还是复杂的跨语言集成，都可以借助这一机制提升代码复用性和灵活性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

YZW0123

谢谢大家的支持，请关注我哦！！

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

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

打赏作者

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

抵扣说明：

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

余额充值