QML语法基础一

import QtQuick
QML类型系统

1.基本类型:int bool real double string url list var enum
2.Quick类型:color font matrix4*4 quaternion vector2d vector3d vector4d date point size rect 等
3.javascripte类型:qml支持标准的javascript类型
4.对象类型:用于QML对象实例化

对象特性

1.id特性:每个qml对象都有一个唯一id
2.属性特性：属性是对象的一个值，可以是动态的，也可以是静态的
2.1声明:
C++中通过Q_PROPERTY宏:
QML中通过 property propertyType propertyName—>例子:property color nextColor
声明了一个color类型的nextColor属性,隐式为该属性创建了一个<信号处理器>onNextColorChanged,
如果nextColor值改变就会触发,即称之为<值改变信号>
例如
Rectangle
{
property color nextColor
onNextColorChanged:
doSomething()
nextColor:red
}
2.2对象类型也可以作为属性类型:property Rectangle someRectangle
2.3属性初始化:
property var someNumber:1.5
property var someString:“abc”
property var someBool:true
property var someList:[1,21,“three”,“four”]
property var someObj:Rectangle{width:100;height:100,color:“red”}
2.4属性赋值: id.propertyName = value

3.对象列表属性:可以将一个qml对象类型赋值给列表类型的属性

对象列表属性:可以将一个qml对象类型赋值给列表类型的属性
声明一个列表属性:property list propertyName
Rectangle
{
property list subRec //声明不初始化
//声明且初始化
property list subRec1:[Rectangle{width:100;height:100,color:“red”},Rectangle{width:100;height:100,color:“red”}]
//subRec1.length 是长度 访问通过subRec1[index]
}

4.属性组

属性可以包含子属性,子属性可以通过点标记或组标记赋值 Text {
font.pixelSize:12;font.bold:true //点标记
text:“123” } Text {
font{pixelSize:12;bold:true} //组标记
text:“123” }

5.属性别名

    5.1别名类似于引用, property alias propertyName : reference ------>property alias buttonText:textItem.text可以直接使用,上述buttonText就是属性别名,对其的修改都是作用的textItem.textRectangle{property alias buttonText:textItem.textwidth:100;height:100Text{id:textItem}}Button{buttonText:"click me"}5.2别名可以和现有属性同名但是会覆盖现有属性尽量避免.超过两层引用将失效

6.默认属性

默认属性至多只有一个 default property var name
当声明对象时，若其子对象没有明确指定要分配到的属性名，那么子对象就被赋值给默认属性 例子:
在一个Label.qml文件中
Text{
default property var someText
text:“Hello”+someText.text
}
在other.qml文件中
Rectangle
{
Label{Text{text:“world”}} //Text属性自动成为Label的默认属性,等价于Label{someText:Text{text:“World”}}
}

7.必须属性

required property propertyType propertyName
Rectangle{required color} //颜色属性必须进行设置，不然报错

8.只读属性

//只读属性必须给出初始值 readonly property propertyType propertyName:value

9.属性修饰符

属性可以拥有关联的属性修饰符对象, propertyModifierTypeName on propertyName
// 常用于动画类型
Rectangle{
NumberAnimation on x {to:50;duration:1000}
}

信号和信号处理器特性
1.声明信号特性

signal signalName() ,如果信号没有参数，括号可以省略,有参数，则必须声明
例子:
Rectangle{
signal clicked
signal actionPed(action:string,res: var) //参数action res string和var是参数类型
}

2.属性改变信号

属性值改变时会默认有一个属性值改变信号触发,
property color nextColor
onNextColorChanged:
doSomething()

3.信号处理器

    当信号被发射时，信号处理器会被qml引擎自动调用信号处理器可以通过分配函数访问信号中的参数方法一onSignalName:functiong(x,y){console.log(x+": "+y)}方法二onSignalName:(x)=>console.log(x+": "+y)onSignalName:(_,y)=>console.log(": "+y)         //只访问第二个参数，不访问第一个

4.connections类型
用于连接外部对象的信号

例子:
Rectangle
{
id:rect
MouseArea{
id:mouseArea
anchors.fill: parent
//信号处理器触发
onClicked: console.log(“mouseArea”)
}
//使用Connections连接mouseArea的clicked信号，通过信号处理器onClicked触发
Connections{
function onClicked(){rect.color = “red”}
target: mouseArea
}
//通过connect将信号msgRecved与函数func1、func2、func3链接
signal msgRecved(string per,string pos)
signal customSend()
Component.onCompleted:{
rect.msgRecved.connect(func1)
rect.msgRecved.connect(func2)
rect.msgRecved.connect(func3)
mouseArea.clicked.connect(customSend) //信号连接信号
}
function func1(per,pos){}
function func2(per,pos){}
function func3(per,pos){}
}

5.方法特性

    类似于槽函数function functionName(param....)Rectangle{id:rectfunction calc():real{return rect.width/2}width:400;height:calc()}

6.附加属性和附加信号处理器

    ListView{delegate:Rectangle{width:100;height:100color:ListView.isCurrentItem?"red":"blue"   //附加类型的名称是ListView，附加相关的属性是isCurrentItem}}ListView{width:100;height:100model:ListModel{id:ListModelComponent.onCompleted{      //Component.onCompleted就是一个附加信号处理器for(var i =0;i<10;i++){ListModel.append({"name":"Item"+i})}}delegate:Text{text:index+" "+Name}}}

集成JavaScript

1.使用binding()绑定js

Rectangle{
keys.onSpacePressed:height= width3 //直接绑定
keys.onSpacePressed:height=Qt.binding(function(){return width3}) //动态绑定，执行了某个事情后重新对属性height进行一个新的绑定
}

2.自定义函数

Rectangle{
function factor(a){return (a<=1)?1:(a*factor(a-1))}
MouseArea{
anchors.fill:parent
onClicked:console.log(factor(10))
}
}

3.导入javascript文件中的函数

//假设XXX.js文件中有个factor函数
import “XXX.js” as MaFunc
Rectangle{
MouseArea{
anchors.fill:parent
onClicked:console.log(MaFunc.factor(10))
}
}

4.关联信号和js函数

import “XXX.js” as MaFunc
Rectangle{
MouseArea{
id:mouseArea
anchors.fill:parent
}
Component.onCompleted{mouseArea.clicked.connect(MaFunc.factor(10))}
}

5.启动时运行js函数

import “XXX.js” as MaFunc
Rectangle{
function startFucn(){ }
Component.onCompleted{
startFucn()
}
}

6.从js中动态创建QML对象

    6.1 Qt.createComponent() 创建一个Component对象,适用于从QML文档中使用定义的组件,动态创建该组件例子：XX.qml文件定义了一个Rectangle组件Rectangle{width:80;height:80;color:"red"}componentCCreate.js文件中的内容如下var component;var sprite;function createSpriteObj(){component=Qt.createCComponent("XX.qml");if(component.status === Component.Ready)finishCreate();elsecomponent.statusChanged.connect(finishCreate)}//安全处理function finishCreate(){if(component.status === Component.Ready){sprite = component.createObject(appWindow,{x:100,"y:100"}); //sprite是appWindow的子对象if(sprite === null){}}else if(component.status === Component.Error){console.log("")}}然后在主程序文件中main.qml 导入componentCCreate.js文件import "componentCCreate.js" as ScriptJsRectangle{id:appWindowwidth:80;height:80;Component.onCompleted{ScriptJs.createSpriteObj()}}6.2 Qt.createQmlObject() 从一个QML字符串中创建对象,适用于运行时产生的对象const newObj=Qt.createQmlObject('import QtQuick;Rectangle{color:"red";width:100;height:100}',parent,filepath)

7.共享js资源库

在js文件的头要声明 .progma library
例子:
在factor.js文件
var count=0;
function factor(a){(a>0)?a*factor(a-1):1;}
在main.qml中
import “factor.js” as faccFuncc
Text{
property int input:17
text:"aa "+faccFuncc.factor(input)
}

8.在js资源中进行导入

import * as MAthFunc from “XX.mjs”
例子:
在mm.qml文件中
import “script.mjs” as MySript
Item{
width:100;height:100;
MouseArea{
onClicked:{MySript.showFunc()}
}
}
在XX.mjs文件中
import {fator} from “factor.mjs”
export {fator}
export function showFunc(value){}
在factor.mjs
export function fator(a){
//…
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/311.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[Qt网络编程]之UDP通讯的简单编程实现

[Qt网络编程]之UDP通讯的简单编程实现

hello&#xff01;欢迎大家来到我的Qt学习系列之网络编程之UDP通讯的简单编程实现。希望这篇文章能对你有所帮助&#xff01;&#xff01;&#xff01; 本篇文章的相关知识请看我的上篇文章: http://t.csdnimg.cn/UKyeM 目录 UDP通讯 基于主窗口的实现 基于线程的实现 UDP通讯…
阅读更多...
【YOLO系列PR、F1绘图】更改v5、v7、v8（附v8训练、验证方式），实现调用val.py或者test.py后生成pr.csv，然后再整合绘制到一张图上（使用matplotlib绘制）

【YOLO系列PR、F1绘图】更改v5、v7、v8（附v8训练、验证方式），实现调用val.py或者test.py后生成pr.csv，然后再整合绘制到一张图上（使用matplotlib绘制）

目录 1. 前提 效果图2. 更改步骤2.1 得到PR_curve.csv和F1_curve.csv2.1.1 YOLOv7的更改2.1.1.1 得到PR_curve.csv2.2.1.2 得到F1_curve.csv 2.1.2 YOLOv5的更改&#xff08;v6.1版本&#xff09;2.1.3 YOLOv8的更改&#xff08;附训练、验证方式&#xff09; 2.2 绘制PR曲线 …
阅读更多...
【创建型模式】抽象工厂模式

【创建型模式】抽象工厂模式

一、抽象工厂模式概述 抽象工厂模式定义&#xff1a;提供一个创建一系列相关或相互依赖对象的接口&#xff0c;而无须指定它们具体的类。 模式动机&#xff1a; 1.当系统提供的工厂生产的具体产品并不是一个简单的对象&#xff0c;而是多个位于不同产品等级结构、属于不同类型的…
阅读更多...
HiveSql中的函数家族(一)

HiveSql中的函数家族(一)

一.内置函数 1-1 日期类型操作 -- 获取当前日期 select current_date(); -- 获取当前日期时间 select current_timestamp(); -- 获取unix时间&#xff08;时间戳&#xff09; 从1970年1月1号0时0分0秒 到现在过去了多少秒 select unix_timestamp();-- unix时间 和日期时间的转…
阅读更多...
41、二叉树-二叉树的层序遍历

41、二叉树-二叉树的层序遍历

思路&#xff1a; 层序遍历就是从左到右依次遍历。这个时候就可以使用队列的方式。例如先把头节点入队&#xff0c;然后遍历开始&#xff0c;首先计算队列长度&#xff0c;第一层&#xff0c;长度为了&#xff0c;遍历一次&#xff0c;依次出队&#xff0c;头结点出队&#xff…
阅读更多...
Tomcat和Spring Boot配置https

Tomcat和Spring Boot配置https

生成测试证书 生成证书前&#xff0c;先验证本地是否正确配置jdk环境变量&#xff0c;如果jdk环境变量配置正确&#xff0c;在命令行程序输入生成证书的命令。 keytool -genkey -alias tomcat -keyalg RSA -keystore "F:\job\apache-tomcat-8.5.29\key\freeHttps.keysto…
阅读更多...
微信小程序之图片上传并保存在服务器

微信小程序之图片上传并保存在服务器

先将图片上传到服务器&#xff0c;后端接口将保存好的图片地址返回给小程序&#xff0c;再将小程序中添加图像的图片的url替换为服务器中照片的存储地址&#xff08;使微信小程序中显示出上传的图片&#xff09;。 1、效果如下&#xff1a; 点击图像后选择图像&#xff1a; 结…
阅读更多...
Kafka不仅是消息队列而是一个分布式消息处理平台

Kafka不仅是消息队列而是一个分布式消息处理平台

目录 1. kafka架构图 2.关键概念解析 2.1 producer 2.2 consumer: 2.3 brkoer 2.4 Topic 与 Partition 2.5 AR (Assigned Replicas) 2.6 ISR（In-Sync Replicas） 2.7 OSR (Out-of-Sync Replicas) 2.8 HW (High Water-mark) 2.9 LEO (Log End Offset)
阅读更多...
搜维尔科技：【工业仿真】煤矿机械安全事故VR警示教育系统

搜维尔科技：【工业仿真】煤矿机械安全事故VR警示教育系统

产品概述 搜维尔科技 煤矿机械安全事故VR警示教育系统 系统内容&#xff1a; 系统采用虚拟现实技术模拟矿井井下机械安全技术及事故&#xff0c;展现井下常见机械伤害事故&#xff0c;表现伤害事故的隐患点&#xff0c;能够模拟事故发生和发展过程&#xff1b;营造井下灾害发…
阅读更多...
如何使用 Node.js 发送电子邮件全解和相关工具推荐

如何使用 Node.js 发送电子邮件全解和相关工具推荐

大多数Web应用程序都需要发送电子邮件。它可能用于注册、密码重置、状态报告&#xff0c;甚至是完整的市场营销活动&#xff0c;如新闻和促销。本教程解释了如何在Node.js中发送电子邮件&#xff0c;但其概念和挑战适用于您正在使用的任何系统。 你会在 npm 上找到大量与电子邮…
阅读更多...
详细UI色彩搭配方案分享

详细UI色彩搭配方案分享

UI 配色是设计一个成功的用户界面的关键之一。UI 配色需要考虑品牌标志、用户感受、应用程序的使用场景&#xff0c;这样可以帮助你创建一个有吸引力、易于使用的应用程序。本文将分享 UI 配色的相关知识&#xff0c;帮助设计师快速构建 UI 配色方案&#xff0c;以满足企业的需…
阅读更多...
windows10小皮安装不同版本composer，实现自由切换使用

windows10小皮安装不同版本composer，实现自由切换使用

1、使用phpstudy小皮面板安装composer1.8.5和composer2.5.8两个版本&#xff1b; 2、打开刚才安装的composer安装目录&#xff1a;D:\phpstudy_pro\Extensions 3、打开composer1.8.5版本&#xff0c;修改composer.bat名称为composer1.8.5.bat&#xff1a; 4、打开composer2.5.8…
阅读更多...
隐私计算DataTrust：从产品需求到工程架构实践

隐私计算DataTrust：从产品需求到工程架构实践

继上期介绍了新监管形势下的隐私技术及数据共享合规设计的思考，本期将接着为大家讲解，国内唯一一个获得工信部三项隐私计算测评的产品DataTrust，在隐私计算领域从产品需求到工程架构的实践之路。 随着数据作为第五大生产要素被提出，“数据流通”的社会价值已形成广泛共识，…
阅读更多...
Linux命令学习—Apache 服务器（下）

Linux命令学习—Apache 服务器（下）

1.7、访问控制、认证授权的综合指令 1.7.1、两种综合情况 1、满足一种条件即可访问 Satisfy any 或者满足访问控制的条件&#xff0c;或者满足认证授权的条件&#xff0c;就可以访问指定页面、目录 2、必须同时满足 2 个条件才能访问 Satisfy all必须同时满足访问控制和认…
阅读更多...
vue的实现八股

vue的实现八股

双向绑定原理 Vue的双向绑定原理是通过数据劫持和观察者模式实现的。 vue使用了响应式的对象&#xff0c;即当数据发生改变的时候&#xff0c;视图也会随之改变 数据劫持&#xff1a; vue2使用了object.definedproperty对数据的每个属性进行劫持&#xff0c;从而逐一对每个…
阅读更多...
【报错】Process finished with exit code 139 (interrupted by signal 11: SIGSEGV)

【报错】Process finished with exit code 139 (interrupted by signal 11: SIGSEGV)

在你检查完没有内存溢出等各种各种情况之后&#xff0c;仍然不知道该怎么解决&#xff0c;这里提供一个可能的解决办法。 如果你也用的是Mac M1芯片&#xff0c;在跑numpy的时候出现 Intel MKL Warning&#xff1b; 或在用pytorch训练模型的时候遇到segmentation fault。有可能…
阅读更多...
【机器学习300问】75、如何理解深度学习中Dropout正则化技术？

【机器学习300问】75、如何理解深度学习中Dropout正则化技术？

一、Dropout正则化的原理是什么&#xff1f; Dropout&#xff08;随机失活&#xff09;正则化是一种用于减少神经网络中过拟合现象的技术。Dropout正则化的做法是&#xff1a; 在训练过程中的每次迭代中&#xff0c;随机将网络中的一部分权重临时"丢弃"&#xff08;即…
阅读更多...
Java工具类：压缩图片至指定大小

Java工具类：压缩图片至指定大小

不好用请移至评论区揍我 原创代码，请勿转载，谢谢！ 一、介绍 接收File参数及目标大小，将自动递归压缩至指定大小已增加删除压缩产生的临时文件等逻辑处理传递的原文件将不会执行delete操作，而是在基础上返回压缩后的文件传递文件名示例（xxx.txt），压缩后文件名示例（xxx_…
阅读更多...
前端三大件速成 01 HTML

前端三大件速成 01 HTML

文章目录 一、前端基础知识二、标签1、什么是标签2、标签的属性3、常用标签&#xff08;1&#xff09;声明&#xff08;2&#xff09;注释&#xff08;3&#xff09;html 根标签&#xff08;3&#xff09;head标签&#xff08;4&#xff09;body标签 三、特殊字符四、其他标签1…
阅读更多...
web安全学习笔记（11）

web安全学习笔记（11）

记一下第十五节课的内容。 一、创建MySQL执行函数 我们在function.php中&#xff0c;自定义一个函数&#xff1a; #SQL查询函数 function Qurey($sql) {#连接数据库$db new mysqli(172.20.10.3, liuyan, 123456, liuyan, 3306);#判断是否连接成功if (mysqli_connect_errno(…
阅读更多...
最新文章

Copyright @ 2022~2023