QML基础语法2

函数

函数格式:

function关键字 函数名(参数名1:参数类型,参数名2:参数类型,...):返回值类型{}

其中:

  • 函数名必须以小写字符开头,后面驼峰
  • 可以有多个参数或者没有参数
  • 参数类型可以不写
  • 返回值类型也可以不写

如何调用:通过id点出来

举例:

Rectangle {
    id: rect

    //显示指定参数类型和返回值类型
    function getWidth(num1: int, num2: int): int {
        return num1 + num2;
    }

    //不显示指定
    function getHeight(num1, num2) {
        return num1 * num2;
    }

    //调用
    width: rect.getWidth(10, 20)
    height: rect.getHeight(1, 20)
}

信号

信号格式:

signal关键字 信号名(参数名1:参数类型,参数名2:参数类型...)

其中:

  • 信号名仍然要首字母小写,后面驼峰
  • 参数可以有多个或没有
  • 若有参数则参数类型必须要写
  • 同一个作用域内信号名要唯一,不能多个信号重名

举例:

Rectangle {
    id: rect2
    width: 100
    height: 50
    color: "red"

    //声明1个信号
    signal testSignal(num: int)
}

自动绑定信号的槽函数

定义一个信号号,同时可以定义一个自动绑定信号的槽函数

自己发出信号,自己接收信号然后处理

格式为:

on信号名(参数列表){}

其中:

  • 信号名的首字母要变成大写
  • 参数的个数可以少于信号的个数,也可以多于信号的参数
  • 参数不能加参数类型,只需要参数名

举例:

Rectangle {
    id: rect2
    width: 100
    height: 50
    color: "red"

    //声明1个信号
    signal testSignal(num: int)

    //on+信号名首字母大写
    //信号处理函数中打印这个参数
    onTestSignal: (num) => {
        print(num);
    }
    //槽函数参数可以没有,也可以多与信号
    // onTestSignal:(num1,num2)=>{

    //     print(num1);
    // }
    // onTestSignal:{
    //     //没有参数时,即忽略信号里的参数,不使用
    //     print("----");
    // }

    //点击这个矩形,发射信号
    MouseArea {
        anchors.fill: parent
        onClicked: rect2.testSignal(10)
    }

}

属性改变信号处理器

自定义一个属性后,qml会自动生成这个属性改变的处理器(槽函数)

同样是自己发出属性改变信号,自己接受信号处理

格式:

on属性名Changed:{}

其中:

  • 属性名要变成大写开头

举例:

Rectangle {
    id: rect3
    width: 100
    height: 50
    color: "red"

    //声明属性num
    property int num: 10

    //自动生成的属性变化处理器
    onNumChanged: {
        print("num属性变化了,num:" + rect3.num)
    }

    //点击后修改这个属性,对应的处理器就会自己调用
    MouseArea {
        anchors.fill: parent
        onClicked: rect3.num++
    }
}

connect函数

可以 将自己的信号 连接到 在其他元素中定义的槽函数

自己发出信号,由其他对象接受信号进行处理

通常会在元素创建完成后Component.onCompleted中,将信号和槽函数进行连接

此方法连接信号和槽,对槽函数的名称没有要求

举例:

Rectangle {
    id: rect4
    width: 100
    height: 50
    color: "red"

    //定义信号
    signal testSignal(w: int)

    MouseArea {
        anchors.fill: parent
        onClicked: rect4.testSignal(rect4.width)
    }

    //通常在元素创建完成之后将信号与对应的槽函数进行连接
    Component.onCompleted: {
        //信号调用connect方法连接到其他元素中的槽函数
        rect4.testSignal.connect(rect5.doSomething)
    }
}
Rectangle {
    id: rect5
    width: 100
    height: 50
    color: "yellow"

    //定义槽函数
    function doSomething(w: int) {
        print("4号矩形的宽度是:" + w)
    }
}

Connections元素

可以 将其他元素中的信号自己的槽函数进行连接

Connections元素的写法:

Connections {
    //需要指定target,即连接谁的信号
    target: 某个元素的id

    //可以在Connections同时连接多个信号
    function on信号名(){}
}

槽函数格式为:

和普通函数一样,只是名称有要求

function关键字 on信号名(参数名1:参数类型,参数名2:参数类型,...):返回值类型

其中:

  • 信号名的首字母要变成大写

举例:

Rectangle {
    id: rect6
    width: 100
    height: 50
    color: "red"

    signal mySignal1(info: string)
    signal mySignal2()

    //点击发射信号
    MouseArea {
        anchors.fill: parent
        onClicked: {
            rect6.mySignal1("你好")
            rect6.mySignal2()
        }
    }
}
Rectangle {
    id: rect7
    width: 100
    height: 50
    color: "blue"

    //连接rect6中的信号
    Connections {
        //需要指定target,即连接谁的信号
        target: rect6

        //可以在Connections同时连接多个信号
        //连接rect6中的mySignal1信号
        function onMySignal1(info: string) {
            print(info)
        }
        //连接rect6中的mySignal1信号
        function onMySignal2() {
            print("响应rect2中的mySignal2信号")
        }

    }
}

注意connect函数Connections元素区别

  • 前者是将自己的信号连接其他元素的槽函
  • 后者是将自己的槽函数连接到其他元素中的信号 

基本数据类型

其中:

color,font,rect,point如何赋值:

property color c: "#FF112233" //ARGB,前面两位那个是透明度
property point p: Qt.point(50, 100)
property rect r: Qt.rect(50, 50, 100, 100)
property font f: ({
    family: "微软雅黑"
}) //js对象
property font ff: Qt.font({
    family: "微软雅黑",
    bold: true
})

枚举类型注意点:

  • 自定义的qml文件的名称需要首字母大写,定义的枚举无法在当前qml文件中使用和访问
  • 当前qml文件中只能使用其他qml文件中定义的枚举
  • 枚举名需要首字母大写,枚举值也要首字母大写
  • 访问格式:qml文件名.枚举类型名.枚举值

举例:

MyItem.qml文件中定义了枚举Week

Item {
    width: 100
    height: 100
    
    enum Week{
        Mon=1,
        Tue=2
    }
}

在另一个qml文件中使用

Rectangle{
    width:100    
    height:100
    //定义了一个属性,并赋枚举值
    property int week:MyItem.Week.Mon
}

其他类型

qml自带的或者自己定义的这些元素类型

Rectangle {
    width: 100
    height: 100

    //定义了一个属性,属性的类型是自己定义的元素
    property MyItem myitem: MyItem {
        width: 100
    }

    //定义了一个属性,属性的类型是qml自带的Button
    property Button btn: Button {
        text: "按钮"
    }
}

js对象

Rectangle {
    width: 100
    height: 100

    //js里的日期
    property
    var datee: new Date()
}

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Qt自定义控件:汽车速度表

1、功能 制作一个汽车速度表 2、实现 从外到内进行绘制,初始化画布,画渐变色外圈,画刻度,写刻度文字,画指针,画扇形,画内圈渐变色,画黑色内圈,写当前值 3、效果 4、源…

Rust 力扣 - 1461. 检查一个字符串是否包含所有长度为 K 的二进制子串

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 长度为k的二进制子串所有取值的集合为[0, sum(k)]&#xff0c;其中sum(k)为1 2 4 … 1 << (k - 1) 我们只需要创建一个长度为sum(k) 1的数组 f &#xff0c;其中下标为 i 的元素用来标记字符串中子串…

【2024年11月高质量国际学术会议推荐1】拓展学术视野,点亮学术之路!开启科研新征程!——数学|物理|电离|能源|遥感|交通各大领域...

【2024年11月高质量国际学术会议推荐1】拓展学术视野&#xff0c;点亮学术之路&#xff01;开启科研新征程&#xff01;——数学|物理|电离|能源|遥感|交通各大领域… 【2024年11月高质量国际学术会议推荐1】拓展学术视野&#xff0c;点亮学术之路&#xff01;开启科研新征程&…

沪深A股上市公司数据报告分析

数据分析报 目录 数据分析报告 1.引言 1.1 背景介绍 1.2 报告目的 1.3 报告范围 1.4 关键术语定义 2. 数据收集与预处理 2.1 数据来源概述 2.2 数据收集过程 2.3 数据预处理步骤 3. 数据可视化 3.1分析地区对公司数量的影响 3.2分析行业分类是否影响公…

ImportError: Install xlrd >= 1.0.0 for Excel support

文章目录 一、报错问题二、问题解释三、解决方法 一、报错问题 问题描述&#xff1a; python2.7使用pandas读取excel文件时报错ImportError: Install xlrd > 1.0.0 for Excel support。 问题代码&#xff1a; # codingutf-8import pandas as pddata pd.read_excel(D:\Wo…

【Linux】make/makefile/gdb调试技巧/进度条小程序

目录 一、sudo提权&#xff1a; 二、自动化构建工具make与Makefile makefile&#xff1a; make&#xff1a; 是否重新执行make&#xff1a; 伪目标&#xff1a; 三、进度条小程序&#xff1a; 四、Linux调试器gdb&#xff1a; 1.、前景提要&#xff1a; 2、进入与退出…

Flutter实战短视频课程

1、课程导学 一套代研运行多蜡 体州一致&#xff0c;目胜能优昇 未来大趋势 不改交原生项目的基础上&#xff0c;扩展Flutter能力 Flutter原生灵话切涣 0入侵 最简单、最通用 最新Flutter 3,x新特性讲解 大量flutter官方组件和api学习 最常用的第三方库使用及原理解析 自研组…

程序员的新电脑到手后应该做哪些必要设置?

吃水果要剥皮&#xff0c;用 Windows 也一样&#xff0c;如果是 Win 10 的话&#xff0c;刚装完系统就需要屏蔽一些功能&#xff0c;才能更顺畅快速&#xff1a; 隐藏任务栏上的搜索框和小娜&#xff0c;需要搜索时wins就会出现禁用开始目录的app自动推荐删除人脉图标删除任务…

unocss 添加支持使用本地 svg 预设图标,并支持更改大小

安装 pnpm install iconify/utils 在配置文件 unocss.config.ts&#xff1a; presets > presetIcons 选项中 通过 FileSystemIconLoader 加载本地图标&#xff0c;并指定目录。 import presetWeapp from unocss-preset-weapp import { extractorAttributify, transformer…

Zig 语言通用代码生成器:逻辑,发布冒烟测试版二之二

Zig 语言通用代码生成器&#xff1a;逻辑&#xff0c;发布冒烟测试版二之二 Zig 语言通用代码生成器&#xff1a;逻辑&#xff0c;已发布冒烟测试版二。此版本完善了代码生成物。支持多对多关系。修复了所有单域动词。并有更多缺陷修复。暂时不支持图片类型。暂时不支持日期和…

Vue3的router和Vuex的学习笔记整理

一、路由的基本搭建 1、安装 npm install vue-router --registryhttps://registry.npmmirror.com 2、配置路由模块 第一步&#xff1a;src/router/index.js创建文件 第二步&#xff1a;在src/view下面创建两个vue文件&#xff0c;一个叫Home.vue和About.vue 第三步&#x…

远程连接服务

目录 一、远程连接服务器简介 二、连接加密技术简介 三、认证阶段 四、ssh实验 1.修改ssh服务器的端口号 2.拒绝root账户远程登录 3.允许特定用户ssh登录&#xff0c;其他用户无法登录 4.ssh-keygen 一、远程连接服务器简介 概念&#xff1a; 远程连接服务器通过文字或…

JS中面向对象

一、对象 1.认识对象 在JavaScript中&#xff0c;对象&#xff08;Object&#xff09;是一种复合数据类型&#xff0c;它允许你存储键值对。对象的属性是连接到对象的变量&#xff0c;而函数或方法是属于对象的函数。 JavaScript中的对象类似于哈希表&#xff0c;其中键可以是…

【工具变量】“宽带中国”试点城市名单匹配数据集(2000-2023年)

参照秦文晋&#xff08;2022&#xff09;的《网络基础设施建设对数字经济发展的影响研究——基于"宽带中国"试点政策的准自然实验》一文中的做法&#xff0c;将选为“宽带中国”试点城市的虚拟变量作为核心解释变量&#xff0c;当一个城市被批复成为“宽带中国”试点…

Matlab车牌识别课程设计报告(附源代码)

Matlab车牌识别系统 分院&#xff08;系&#xff09; 信息科学与工程 专业 学生姓名 学号 设计题目 车牌识别系统设计 内容及要求&#xff1a; 车牌定位系统的目的在于正确获取整个图像中车牌的区域&#xff0c; 并识别出车牌号。通过设计实现车牌识别系…

基于OSS搭建在线教育视频课程分享网站

OSS对象存储服务是海量、安全、低成本、高持久的存储服务。适合于存储大规模非结构化数据&#xff0c;如图片、视频、备份文件和容器/虚拟机镜像等。 安装nginx wget https://nginx.org/download/nginx-1.20.2.tar.gz yum -y install zlib zlib-devel gcc-c pcre-devel open…

Edit Data. Create Cell Editors. Validate User Input 编辑数据。创建 Cell Editors。验证用户输入

Goto Data Grid 数据网格 Edit Data. Create Cell Editors. Validate User Input 编辑数据。创建 Cell Editors。验证用户输入 Get and Modify Cell Values in Code 在代码中获取和修改单元格值 仅当 Grid 及其列已完全初始化时&#xff0c;才使用以下方法。如果需要在表单仍…

【JavaEE初阶 — 多线程】Thread的常见构造方法&属性

目录 Thread类的属性 1.Thread 的常见构造方法 2.Thread 的几个常见属性 2.1 前台线程与后台线程 2.2 setDaemon() 2.3 isAlive() Thread类的属性 Thread 类是JVM 用来管理线程的一个类&#xff0c;换句话说&#xff0c;每个线程都有一个唯一的Thread 对象与之关联&am…

【设计模式】如何用C++实现依赖倒置

【设计模式】如何用C实现依赖倒置 一、什么是依赖倒置&#xff1f; 依赖倒置原则&#xff08;Dependency Inversion Principle&#xff0c;DIP&#xff09;是SOLID面向对象设计原则中的一项。它的核心思想是&#xff1a; 高层模块不应该依赖于低层模块&#xff0c;两者都应该…

【文献及模型、制图分享】中国城市家庭食物浪费行为及减量对策——以郑州市为例

文献介绍 减少食物浪费是保障粮食安全的重要途径。家庭是社会的基本单元&#xff0c;不仅是产生食物浪费的主要场景&#xff0c;也是开展反食品浪费教育的重要场所。本文以河南省郑州市为例&#xff0c;基于1315份城市家庭食物浪费一手调查数据&#xff0c;首次将城市家庭食物…