【Qt】QML-04:自定义变量(属性)property

这篇具有很好参考价值的文章主要介绍了【Qt】QML-04:自定义变量(属性)property。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、property

1.1 介绍

property用来自定义属性。
什么是属性?面向对象中,类由方法和属性构成。对于从C语言的过来人,更喜欢称之为变量。

之所以说“自定义”,是因为QML语言本身已有默认定义好的属性,这些属性不可以重新定义或者覆盖。比如id属性,每一种 QML 对象类型都只有一个id属性,用来被其他对象识别和引用。

1.2 定义

1)方法1
先在C++中使用Q_PROPERTY来定义属性,然后将这个类注册到QML系统中
2)方法2
在QML中直接定义,完整的定义格式如下

[default] [required] [readonly] property <propertyType> <propertyName>

属性名称必须以小写字母开头,并且只能包含字母、数字和下划线。

1.3 默认属性-default

什么是默认属性?给属性赋值时,不需要指定属性名称,直接将“值”赋值给包含属性的“类”。当然了,默认只能有一个,如果多了,“类”就不知道将“值”赋值给谁了。

例如,在一个对象声明中,如果“值”也是一个对象(子对象),并且没有显示的将一个子对象赋值给某个属性,则这个子对象会被赋值给默认属性。

1.4 必要属性-required

创建对象实例时必须设置使用required标记的属性。
如果可以静态检测到,违反此规则将导致 QML 应用程序无法启动。
如果是动态实例化的 QML 组件(例如通过Qt.createComponent()),违反此规则会导致警告和空返回值。

1.5 只读属性-readonly

只能在初始化时为只读属性分配一个值。只读属性初始化后,无论是通过命令性代码还是其他方式,都无法再为其赋予值。

注意:只读属性不能再设置为默认属性

1.6 内置信号

QML可以通过定义相应的“槽函数”来处理内置信号,定义时,有语法要求

on<Signal>

其中“Signal”是信号的名称,第一个字母大写。示例如下:

import QtQuick 2.0

Item {
    width: 100; height: 100

    MouseArea {
        anchors.fill: parent
        onClicked: {
            console.log("Click!")
        }
    }
}

1.7 定义信号

自定义信号的语法如下:

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

示例如下:

import QtQuick 2.0

Item {
    signal clicked
    signal hovered()
    signal actionPerformed(string action, var actionResult)
}

1.8 连接信号和槽-Connections

使用Connections属性来连接信号和槽,在Connections中使用target来标记信号源,使用on“Signal”来处理信号

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    id: rect
    width: 250; height: 250

    Button {
        id: button
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        text: "Change color!"
    }

    Connections {
        target: button
        function onClicked() {
            rect.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1);
        }
    }
}

1.9 属性更改信号

当 QML 属性的值发生变化时,会自动发出信号,格式为:

on<Property>Changed

示例如下:

import QtQuick 2.15

Rectangle {
    id: rect
    width: 100; height: 100

    TapHandler {
        onPressedChanged: console.log("taphandler pressed?", pressed)
    }
}

1.10 信号连接到信号

使用signal定义一个信号,使用connect将信号连接到这个信号

import QtQuick 2.15

Rectangle {
    id: forwarder
    width: 100; height: 100

    signal send()
    onSend: console.log("Send clicked")

    TapHandler {
        id: mousearea
        anchors.fill: parent
        onTapped: console.log("Mouse clicked")
    }

    Component.onCompleted: {
        mousearea.tapped.connect(send)
    }
}

1.11 信号连接到方法

信号对象可以使用connect()将信号连接到方法文章来源地址https://www.toymoban.com/news/detail-680052.html

import QtQuick 2.15

Rectangle {
    id: relay

    signal messageReceived(string person, string notice)

    Component.onCompleted: {
        relay.messageReceived.connect(sendToPost)
        relay.messageReceived("Tom", "Happy Birthday")
    }

    function sendToPost(person, notice) {
        console.log("Sending to post: " + person + ", " + notice)
    }
}

到了这里,关于【Qt】QML-04:自定义变量(属性)property的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【五一创作】QML、Qt Quick /Qt中绘制圆形

    有多种方法可以在 Qt Quick 中绘制圆形。以下是一些主要方法: 使用 Canvas 元素 使用 Shapes 模块: a. 使用 PathArc 和 PathLine 元素组合绘制一个完整的圆形。 b. 使用 PathEllipse 元素绘制一个椭圆形,并将其设置为圆形。 使用 Rectangle 元素绘制圆角矩形并将圆角半径设置为宽度和高

    2024年02月03日
    浏览(38)
  • QML Qt4版本移植到Qt5概述

    在Qt5中,QML应用程序使用OpenGL场景图架构来渲染,而在Qt4中使用的是图形视图框架。这种结构上的变化导致C++接口进行了大量重构。QtDeclarative模块已被弃用,该模块的类被移动到新的QtQML和QtQuick模块中,名称有了变化,如表3-1所列。如果需要使用Qt5中新的QQml 和QQuick 等类,需

    2024年01月25日
    浏览(47)
  • Qml Qt程序 打包部署

    利用qtcreator安装目录下的命令行工具执行打包命令 1、Widget程序打包 // 将release模式下的exe文件放在单独的打包目录下 // 打开qt自带的命令行工具,执行下面的语句 windeployqt path-to-app-binary  // path-to-app-binary表示需要打包的二进制文件 2、Qml程序打包 // 延用Widget程序打包步骤,

    2024年02月09日
    浏览(53)
  • 【Qt- C++ & Qml 交互】

    2024年01月10日
    浏览(64)
  • Qt6 Qt Quick UI原型学习QML第六篇

    import QtQuick 2.12 :导入QtQuick模块的版本2.12,用于创建Qt快速应用程序的用户界面。 import QtQuick.Window 2.12 :导入QtQuick.Window模块的版本2.12,用于创建窗口对象。 import QtQuick.Controls 2.12 :导入QtQuick.Controls模块的版本2.12,用于创建用户界面控件。 Window {} :定义了一个窗口对象,

    2024年02月16日
    浏览(48)
  • Qt6 Qt Quick UI原型学习QML第二篇

    元素可以分为 视觉元素和非视觉元素 。视觉元素(如Rectangle)具有几何形状,并且通常在屏幕上呈现一个区域。非可视元素(如Timer)提供一般功能,通常用于操作可视元素。 目前,我们将关注基本的视觉元素,例如 Item, Rectangle, Text, Image和MouseArea 。但是,通过使用Qt Quick Contro

    2024年02月16日
    浏览(35)
  • Qt6 Qt Quick UI原型学习QML第七篇

    导入 QtQuick 2.12 导入 QtQuick.Window 2.12 导入 QtQuick.Controls 2.12 导入 QtQuick.Layouts 1.3 导入 Qt.labs.calendar 1.0 矩形 { id: root 属性 int duration: 3000 } 这段代码使用了QtQuick库来创建一个用户界面。其中的Rectangle是界面的根元素。 id: root : 为Rectangle元素指定唯一的标识符root。 property int durat

    2024年02月16日
    浏览(39)
  • Qt6 Qt Quick UI原型学习QML第三篇

    图像 Image(图片)元素 解释 这段代码是使用QtQuick 2.0库来创建一个Image(图片)元素的定义。以下是代码的解释: Image 元素是一个用于显示图像的控件。 id: root 是为Image元素指定了一个标识符,以便在代码中引用它。 signal clicked 定义了一个名为 clicked 的信号。信号用于在特

    2024年02月16日
    浏览(49)
  • Qt Quick程序的发布|Qt5中QML和Qt Quick 的更改

    # Quick程序的发布旧版做法 # Qt5中QML和Qt Quick 的更改 1.QML语言的更改(Qt4-Qt5)     在QML语言中,只有少量更改会影响QML代码的迁移:无法直接导入单独的文件(例如:import\\\"MyType.qml”),需要导人该文件所在的目录;     JavaScript文件中的相对路径被解析为相对于该JavaScrip

    2024年01月25日
    浏览(50)
  • QT C++类与QML交互

    C++方负责数据,QML负责显示,先准备工作如下: (1)新建一个数据类,继承至QObject class Cdata : public QObject (2)将有交互关系的数据,加入到类的私有成员中 private: int iNum; QString strEdit; (3)给此成员Q_PROPERTY和相应的函数实现(ALT+回车可自动创建) Q_PROPERTY(int iNum READ getINum W

    2024年02月04日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包