当前位置： 首页 > news >正文

QML组件

news 2025/11/9 10:36:01

一个QML文件定义了一个独立的、顶级的QML组件。

一个QML组件就是一个模板，被QML运行环境解释来创建一个带有一些预定义行为的对象。

一个独立的QML组件可以运行多次来禅城多个对象，每个对象都可以称为该组件的实例。

例子：

在项目中添加一个Mywidget.qml文件

添加以下代码：

import QtQuick 2.9Rectangle{width: 100height:100Text{anchors.fill:parentfont.bold: truefont.pixelSize: 20text: "矩形"}
}

在main.qml中添加以下代码：

Column{spacing: 20//创建了3个Mywidget组件Mywidget{id:widget1}Mywidget{id:widget2}Mywidget{id:widget3}}

任意的QML代码片段都可以称为一个组件，只需要将它放入一个 Xxxx.qml文件中，但必须以大写字母开头。

内联组件：

 内联组件使用Component元素声明，拥有常规顶级组件的所有特性。

内联组件并不会自动呈现和显示 ：

Rectangle{width: 300height: 300color: "lightblue"Component{id:component1Rectangle{width: 100height: 100color: "green"}}}

 使用加载器加载：

Rectangle{width: 300height: 300color: "lightblue"Component{id:component1Rectangle{width: 100height: 100color: "green"}}}Loader{sourceComponent: component1}

 也可以为视图提供图形组件：

例如：使用ListView 中的delegate 来获取Component

Rectangle{width: 300height: 300color: "lightblue"Component{id:component1Rectangle{width: 100height: 100color: "green"}}ListView{anchors.fill:parentmodel: contactModel//显示的模型delegate:component1//代理}}

相当于：

Rectangle{width: 300height: 300color: "lightblue"ListView{anchors.fill:parentmodel: contactModel//显示的模型delegate:Rectangle{width: 100height: 100color: "green"}}}

在组件中添加属性、函数和信号

添加属性：

属性：可以在外部进行访问来修改一个对象，如Rectangle的width属性

  1. 一个属性就是一个QML组件中的一个值，可以被其他对象读取和修改
  2. 属性可以用于属性绑定，可以和其他属性同步修改

定义一个新属性的语法：

[default] property<type><name>[:defaultValue]
Rectangle{id:rect1property string image1: "qrc:/pix/ggg.png" //创建一个新属性width:200height: 200color: "lightBlue"Image {anchors.fill:parentsource: rect1.image1//使用新属性}}

 QML常见的属性类型：

QML类型默认值C++(Qt)
int0int
boolfalsebool
double0.0double
real0.0double
string""QString
url""QUrl
color#000000(黑色)QColor
date未定义QDateTime
variant未定义QVariant

默认属性：

  1. 可以在声明属性时选default，可以使该属性成为默认属性
  2. 允许其他对象来指定默认属性值来作为子元素

Item元素默认属性为children属性：

Item{Rectangle{}Rectangle{}}

 如果children属性不是Item的默认属性的话，需要使用children[ ]

Item{children: [Rectangle{},Rectangle{}]}

属性的别名：

属性别名是更高级的属性声明形式，属性别名不需要分配新的存储空间，可以通过别名来对属性进行操作。

别名的格式：类型被省略，但一定要加上alias关键词。

[dafault] property alias <name> :<alias reference>alias关键字允许我们转发一个属性或者转发一个属性对象自身到另一个作用域

使用的注意事项： 

  1. 只有在指定它们的部件创建完时，别名才可用，在组件本身创建时不能直接使用别名属性
  2. 别名引用不能使用在同一个部件中声明的另一个别名属性
  3. 一个别名属性可以和现有的属性使用相同的名称
//只有在指定它们的部件创建完时，别名才可用，在组件本身创建时不能直接使用别名属性property alias label:text1.text
alis:"GGGGG"//使用时text1.text还没定义//别名引用不能使用在同一个部件中声明的另一个别名属性id:root
property alias buttonText:textItem.text
property alias buttonText2:root.buttonText//一个别名属性可以和现有的属性使用相同的名称
Rectangle{property alias color:childRect.colorcolor:"red"Rectangle{id:childRect}
}
在这里color操作的都是childRect的color

例子：（添加一个Mywidget.qml文件）

import QtQuick 2.9
Rectangle{property alias label:text1 //起别名，使得另一个qml文件也可以访问width: 100height:100Text{id:text1anchors.fill:parentfont.bold: truefont.pixelSize: 20text: "矩形"}
}

在main.qml中创建一个Mywidget对象:

Rectangle{Mywidget{id:mywidget1label.text:"ppppppp"//通过别名访问Text中的内容}   }

添加函数

QML中可以使用JavaScript代码的函数，这些函数可以在内部调用，也可以被其他对象调用。

函数格式：

function <name>([<parameter name][,...])
{<body>}
  1. 声明可以出现在任何地方，但一般出现在顶部，方便查看
  2. 函数的参数类型为variant，所以不需要函数参数类型

无参函数 ：

function fun1(){console.log("无参函数")}

有参函数：

function fun1(s1,s2){console.log("s1+s2为",s1+s2)}

有返回值的函数：

function fun1(s1,s2){return Math.max(s1,s2)//返回这两个的最大值}

常用的数学函数：格式：Math.xxx

添加信号

当一个事件发生时可以发射信号。信号的声明可以放到任意位置，但一般放置在开头。

信号格式为： 

signal <name>[([<type> <parameter name>[,...]])]

信号没有参数的话可以省略（）

例子：

Item{signal clicksignal hovered()signal performAction(string action,variant actionArgument)}

连接的创建：on<SignalName>来命名，信号名的第一个字母要大写

//上面对应的槽函数
onClicked
onHovered
onPerformAction

 触发信号：直接调用函数即可

例子：创建一个Mywidget.qml

import QtQuick 2.9Rectangle{id:rect1signal buttonClicked(int X,int Y)width: 100height:100MouseArea{anchors.fill:parentonClicked: {rect1.buttonClicked(mouse.x,mouse.y)//鼠标点击后，触发信号}}
}

 main.qml中添加

Mywidget{width: 100height: 100//槽函数onButtonClicked: { console.log("鼠标位置为："+X+","+Y);}}

将信号关联到其他函数和信号上

使用connect（）函数，可以将一个信号关联到一个函数或者其他信号上

 创建一个Mywidget.qml：

import QtQuick 2.9Rectangle{id:rect1signal buttonClicked(int X,int Y)width: 100height:100MouseArea{anchors.fill:parentonClicked: {rect1.buttonClicked(mouse.x,mouse.y)//鼠标点击后，触发信号}}
}

main.qml中添加：

Item{anchors.fill:parentid:item1function text1(){  //创建一个函数console.log("新的函数运行")}Mywidget{width: 100height: 100Component.onCompleted: buttonClicked.connect(item1.text1)//将信号关联到text1上}}

使用connections连接

on<SignalName>无法使用的情况：

  1.  需要对同一信号进行多次连接
  2. 在信号发送方范围之外创建连接
  3. 连接到QML未定义的目标

例子：Mywidget.qml

import QtQuick 2.9Rectangle{id:rect1signal buttonClicked(int X,int Y)width: 100height:100MouseArea{anchors.fill:parentonClicked: {rect1.buttonClicked(mouse.x,mouse.y)//鼠标点击后，触发信号}}
}

main.qml

Item{anchors.fill:parentid:item1function text1(){  //创建一个函数console.log("新的函数运行")}Mywidget{id:my1width: 100height: 100}Connections{target: my1//关联到该控件onButtonClicked:{item1.text1()}}}

 

相关文章：

QML组件

一个QML文件定义了一个独立的、顶级的QML组件。 一个QML组件就是一个模板&#xff0c;被QML运行环境解释来创建一个带有一些预定义行为的对象。 一个独立的QML组件可以运行多次来禅城多个对象&#xff0c;每个对象都可以称为该组件的实例。 例子&#xff1a; 在项目中添加一…...

编程日记 2023/5/25 18:55:16

canvas 学习指南

canvas 学习指南 创建一个 canvas <! DOCTYPE html><html xmlns"http://www.w3.org/1999/xhtml"><head><title></title><meta charset"utf-8" /><script type"text/javascript">window.onload fun…...

编程日记 2023/5/25 16:22:29

【华为OD机试2023】开心消消乐 C++

【华为OD机试2023】开心消消乐 C++ 前言 如果您在准备华为的面试，期间有想了解的可以私信我，我会尽可能帮您解答，也可以给您一些建议！ 本文解法非最优解（即非性能最优），不能保证通过率。 Tips1：机试为ACM 模式 你的代码需要处理输入输出，input/cin接收输入、print/cou…...

编程日记 2023/5/26 19:40:12

学历？能力？

一个面试官愿意看一张有形的总结报告&#xff0c;还是愿意相信看不到的人品&#xff1f;...

编程日记 2023/5/26 19:40:11

使用ECharts打造一个数据可视化面板

使用ECharts打造一个数据可视化面板1. 使用技术2. 案例适配方案3. 基础设置4. header 布局5. mainbox 主体模块6. 公共面板模块 panel7. 柱形图 bar 模块&#xff08;布局&#xff09;8. 中间布局9. ECharts 介绍10. ECharts 体验11. ECharts 基础配置12. 柱状图图表&#xff0…...

编程日记 2023/5/26 19:40:09

【论文简述】PVSNet: Pixelwise Visibility-Aware Multi-ViewStereo Network（arxiv 2020）

一、论文简述 1. 第一作者&#xff1a;Qingshan Xu 2. 发表年份&#xff1a;2020 3. 发表期刊&#xff1a;arxiv 4. 关键词&#xff1a;MVS、3D重建、可见性、代价体、训练策略 5. 探索动机&#xff1a;ETH3D基准测试提供的图像包含强烈的视图变化&#xff0c;这就要求MVS…...

编程日记 2023/5/26 19:40:07

CSS隐藏元素的几种方式以及display、visibility、opacity的区别

CSS隐藏元素的方式首先最通用且最易想到的方法肯定是display、visibility和opacity这三种了display:none设置元素不可见并且连盒模型也不生成&#xff0c;一般用于不占空间的隐藏元素。display属性规定元素应该生成的框的类型&#xff0c;当其值为“none”时可以规定元素不生成…...

编程日记 2023/5/26 19:40:06

【Java|golang】1487. 保证文件名唯一---golang中string方法的坑

给你一个长度为 n 的字符串数组 names 。你将会在文件系统中创建 n 个文件夹&#xff1a;在第 i 分钟&#xff0c;新建名为 names[i] 的文件夹。 由于两个文件 不能 共享相同的文件名&#xff0c;因此如果新建文件夹使用的文件名已经被占用&#xff0c;系统会以 (k) 的形式为新…...

编程日记 2023/5/26 19:40:04

flstudio21水果language选项中文设置方法教程

编曲是通过DAW&#xff08;数字音频工作站软件&#xff09;完成的&#xff0c;也就是我们常说的宿主软件。现在有很多优秀的宿主软件&#xff0c;例如Cubase、Studio One、FL Studio等。 FL Studio是一款功能强大的音乐制作软件&#xff0c;也被称为FruityLoops。目前已经推出…...

编程日记 2023/5/26 19:40:02

Ubuntu中安装StaMPS

Ubuntu中安装StaMPS0 StaMPS简介1 首先安装好MATLAB&#xff0c;安装一些依赖工具包2 安装StaMPS2.1 下载StaMPS安装包2.2 安装2.3 配置环境2.4 matlab中的路径设置0 StaMPS简介 官网&#xff1a;https://homepages.see.leeds.ac.uk/~earahoo/stamps/ A software package to e…...

编程日记 2023/5/26 19:40:00

Spring Security 实现自定义登录和认证（1）

1 SpringSecurity 1.1 导入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId> </dependency>1.2 编写配置类 在spring最新版中禁用了WebSecurityConfigurerAdapter…...

编程日记 2023/5/26 19:39:59

Linux 进程：辨析wait与waitpid

目录一、wait二、waitpid(1)参数&#xff1a;pid(2)参数&#xff1a;status(3)参数&#xff1a;options(4)返回值wait 与 waitpid 这两个函数的作用是&#xff1a;等待子进程退出&#xff0c;在子进程退出后释放子进程资源&#xff0c;防止子进程变成僵尸进程。但准确的说&…...

编程日记 2023/5/26 19:39:57

移除元素（每日一题）

目录 一、题目描述 二、题目分析 2.1 方法一 2.1.1 思路 2.1.2 代码 2.2 方法二 2.2.1 思路 2.2.2 代码 一、题目描述 题目链接&#xff1a;27. 移除元素 - 力扣&#xff08;LeetCode&#xff09; 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数…...

编程日记 2023/5/26 19:39:55

打印名片-课后程序(Python程序开发案例教程-黑马程序员编著-第一章-课后作业)

实例2&#xff1a;打印名片 名片是标示姓名及其所属组织、公司单位和联系方法的纸片&#xff0c;也是新朋友互相认识、自我介绍的快速有效的方法。本实例要求编写程序&#xff0c;模拟输出效果如图1所示的名片。 图1 名片样式 实例目标 掌握print()函数的用法 实例分析 名片…...

编程日记 2023/5/26 19:39:54

为啥预编译SQL能够防止SQL注入

前言之前我一个搞网络安全的朋友问了我一个的问题&#xff0c;为啥用 PreparedStatement 预编译的 SQL 就不会有被 SQL 注入的风险&#xff1f;第一时间我联想到的是八股文中关于 Mybatis 的脚本 ${} 和 #{} 的问题&#xff0c;不过再想想&#xff0c;为啥 ${} 会有 SQL 注入的…...

编程日记 2023/5/26 19:39:52

IGKBoard（imx6ull）-SPI接口编程-回环测试

文章目录1- 使能imx6ull开发板SPI驱动2- 回环测试imx6ull开发板物理连接3- 编程SPI回环测试4- 代码重难点分析&#xff08;1&#xff09;spi_device结构体&#xff08;2&#xff09;spi_ioc_transfer结构体&#xff08;3&#xff09;ioctl函数对于SIP不了解的可以参考这篇文章&…...

编程日记 2023/5/26 19:39:50

Python基础学习10——类

基本概念 面向对象编程是最有效的软件编写方法之一。理解面向对象编程可以让你像程序员那样从一个更加宏观的角度去理解代码&#xff0c;并大大提高程序员之间的合作效率。面向对象编程的两个核心概念是对象和类 **对象&#xff1a;**对象是能帮助我们解决问题的具体东西。比如…...

编程日记 2023/5/26 19:39:49

项目实战典型案例14——代码结构混乱 逻辑边界不清晰 页面美观设计不足

代码结构混乱 逻辑边界不清晰 页面美观设计不足一&#xff1a;背景介绍问题1 代码可读性差&#xff0c;代码结构混乱问题2 逻辑边界不清晰&#xff0c;封装意识缺乏示例3.展示效果上的美观设计二&#xff1a;思路&方案问题一&#xff0c;代码可读性差&#xff0c;代码结构混…...

编程日记 2023/5/27 3:30:30

SpringBoot 读取自定义Properties参数

目录 1. 概述 2. 实现方式 2.1 Value方式 2.2 PropertySource与ConfigurationProperties相结合 3. 结束 1. 概述 最近想尝试写一个定时任务管理&#xff0c;相关参数不想在Spring的配置文件Application.yml或者Application.properties获取。想自己新建一个properties文件。顺…...

编程日记 2023/5/27 3:30:20

机器学习100天（三十七）：037 朴素贝叶斯-挑个好西瓜！

《机器学习100天》完整目录：目录 机器学习100天，今天讲的是：朴素贝叶斯-挑个好西瓜！ 红色石头已经了解了贝叶斯定理和朴素贝叶斯法，接下来已经可以很自信地去买瓜了。买瓜之前，还有一件事情要做，就是搜集样本数据。红色石头通过网上资料和查阅，获得了一组包含 10 组样…...

编程日记 2023/5/27 3:30:13

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2025/11/9 4:07:34

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2025/11/7 19:26:35

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2025/11/7 19:35:30

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

编程新知 2025/8/15 1:44:58

Java 与 MySQL 性能优化：MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...

编程新知 2025/7/24 5:10:25

对象回调初步研究

_OBJECT_TYPE结构分析 在介绍什么是对象回调前&#xff0c;首先要熟悉下结构 以我们上篇线程回调介绍过的导出的PsProcessType 结构为例&#xff0c;用_OBJECT_TYPE这个结构来解析它&#xff0c;0x80处就是今天要介绍的回调链表&#xff0c;但是先不着急&#xff0c;先把目光…...

编程新知 2025/11/7 19:03:00

麒麟系统使用-进行.NET开发

文章目录 前言一、搭建dotnet环境1.获取相关资源2.配置dotnet 二、使用dotnet三、其他说明总结 前言 麒麟系统的内核是基于linux的&#xff0c;如果需要进行.NET开发&#xff0c;则需要安装特定的应用。由于NET Framework 是仅适用于 Windows 版本的 .NET&#xff0c;所以要进…...

编程新知 2025/11/7 20:00:57

shell脚本质数判断

shell脚本质数判断 shell输入一个正整数,判断是否为质数(素数&#xff09;shell求1-100内的质数shell求给定数组输出其中的质数 shell输入一个正整数,判断是否为质数(素数&#xff09; 思路&#xff1a; 1:1 2:1 2 3:1 2 3 4:1 2 3 4 5:1 2 3 4 5-------> 3:2 4:2 3 5:2 3…...

编程新知 2025/10/21 18:57:29