QT中QML学习笔记2

  1. 默认属性:对象定义可以具有单个default属性,指在另一个对象的定义中声明某个对象而未将其声明为特定属性的值时为其赋值的属性。
    使用optional关键字声明属性可将其标记为默认属性。例如:
cpp 复制代码
// MyLabel.qml
import QtQuick
Text {
    default property var someText	//someText具有默认属性
    text: `Hello, ${someText.text}`
}
//该值可在对象定义中赋值
MyLabel{
	Text{text:"world!"}
	}
	//等价于
MyLabel{
	someText:Text{text:"world!"}
	}
  1. 必需属性:对象声明可以使用关键字根据需要定义属性。语法为required:
    required property
    以下自定义Rectangle组件,始终需要指定color属性:
cpp 复制代码
Rectangle {
		required color
}
//注意:不能从QML为required属性分配初始值,因为会直接违背其属性的预期用途
  1. 只读属性 :对象声明可以使用关键字定义只读属性,语法如下:readonly
    readonly property :
    注意:初始化时,必须为只读属性分配静态值或绑定表法式。初始化只读属性后将无法更改其静态值或绑定表达式。
    Property Modifier 对象:属性可具有与之关联的属性值修饰符对象。声明与特定属性关联的属性修饰符类型实例语法如下:
    on {
    // attributes of the object instance
    }
  2. 信号属性 :信号是来自对象的通知,表明发生了某些事件:如属性更改,动画已启动或停止,下载图像等 当发出特定信号时,可以通过signal
    handler通知对象。信号处理程序使用语法on声明,其中是信号的名称,第一个字母大写。必须在发出信号的对象定义中声明信号处理程序且处理程序应包含调用信号处理程序时要执行的javascript代码块
    例如:onClicked信号处理程序在对象定义中声明并在单击时调用,打印控制台信息:
cpp 复制代码
import QtQuick
Item {
    width: 100; height: 100
    MouseArea {
        anchors.fill: parent
        onClicked: {
            console.log("Click!")
        }//点击鼠标控制台输出信息
    }
}
  1. 定义信号属性:可通过注册类为C++中的类型定义信号,然后向QML类型系统注册;或可使用以下语法在QML文档的对象声明中定义对象类型的自定义信号:
    signal [([: [, ...]])]
cpp 复制代码
//信号声明
import QtQuick
Item {
    signal clicked//信号无参数可不使用()
    signal hovered()
    signal actionPerformed(action: string, actionResult: int)
}
  1. 信号处理程序属性:信号处理程序是一种特殊的方法属性,每当发出相关信号时,QML引擎会调用方法实现,默认情况下该对象定义具有空实现。客户端可提供implementation以实现程序逻辑:
cpp 复制代码
//考虑以下类型,其定义在文件中提供,如下所示,其中包含 signals 和 :SquareButtonSquareButton.qmlactivateddeactivated
// SquareButton.qml
Rectangle {
    id: root
    signal activated(xPosition: real, yPosition: real)
    signal deactivated
    property int side: 100
    width: side; height: side
    MouseArea {
        anchors.fill: parent
        onReleased: root.deactivated()
        onPressed: mouse => root.activated(mouse.x, mouse.y)
    }
}
//信号处理程序的实现:SquareButton
// myapplication.qml
SquareButton {
    onDeactivated: console.log("Deactivated!")
    onActivated: (xPosition, yPosition) => {
        console.log(`Activated at ${xPosition}, ${yPosition}`)
    }
}
  1. 属性更改信号处理程序:采用语法形式onChanged,编写一个信号处理程序以便此属性更改时调用:textChangedonTextChanged
cpp 复制代码
import QtQuick
TextInput {
    text: "Change this!"
    onTextChanged: console.log(`Text has changed to: ${text}`)
}

8.函数属性:对象类型的方法是可以调用以执行某些处理或触发更多事件的函数。方法可以连接到信号,以便在发出信号时自动调用该方法。

9.定义函数属性:通过标记一个类的函数来为一个类型定义一个方法,该函数随后被注册到QML类型系统中,或者将其注册为该类的一个;也可使用以下语法将自定义方法添加到QML文档中的对象声明中:

function ([[: ][, ...]]) [: ] { }

注意:与signal不同,方法参数类型不必声明因为它们默认为该类型,但应该声明以帮助生成性能更高的代码并提高可维护性

  1. 在分配值时调用的方法:calculateHeight()height
cpp 复制代码
import QtQuick
Rectangle {
    id: rect

    function calculateHeight(): real {
        return rect.width / 2;
    }//无参函数
    width: 100
    height: calculateHeight()
}

11.如果函数有参数则可以在方法中按名称访问这些参数:

cpp 复制代码
import QtQuick

Item {
    width: 200; height: 200

    MouseArea {
        anchors.fill: parent
        onClicked: mouse => label.moveTo(mouse.x, mouse.y)
    }//点击时唤醒函数可重定位至此text中moveto的新的newX和newY

    Text {
        id: label

        function moveTo(newX: real, newY: real) {
            label.x = newX;
            label.y = newY;
        }

        text: "Move me!"
    }
}

12.附加属性和附加信号处理程序:使对象能够使用额外的属性或信号处理程序进行注释,引用语法:

.

.on

例如:

cpp 复制代码
//该类型具有一个附加属性,可用于每个单独的代理对象都可使用其来确定是否时视图中的当前选定项
import QtQuick
ListView {
    width: 240; height: 320
    model: 3
    delegate: Rectangle {
        width: 100; height: 30
        color: ListView.isCurrentItem ? "red" : "yellow"//附加属性
    }
}
cpp 复制代码
import QtQuick

ListView {
    width: 240; height: 320
    model: ListModel {
        id: listModel
        Component.onCompleted: {
            for (let i = 0; i < 10; i++) {
                append({ Name: `Item ${i}` })
            }
        }//附加的信号处理程序:Component.onCompleted
    }
    delegate: Text { text: index }
}

假设附加的属性和信号处理程序可以从这些属性已附加到的对象的子对象直接访问时错误的,attaching类型实例仅附加到特定对象而不附加到对象及其所有子对象:

cpp 复制代码
import QtQuick
ListView {
    width: 240; height: 320
    model: 3
    delegate: Item {
        width: 100; height: 30
        Rectangle {
            width: 100; height: 30
            color: ListView.isCurrentItem ? "red" : "yellow" // 这是错误的,它仅附加到根委托对象而不是子对象
        }
    }
}
//-----------------------------------------------------------
ListView {
    delegate: Item {
        **id: delegateItem**//特定对象
        width: 100; height: 30

        Rectangle {
            width: 100; height: 30
            color: delegateItem.ListView.isCurrentItem ? "red" : "yellow" // 这是正确的
        }
    }
}

13.枚举属性 :枚举提供一组固定的命名选项,可使用enum 关键字在QML中声明,枚举类型和值必须以大写字母开头:

cpp 复制代码
// MyText.qml
Text {
    enum TextType {
        Normal,
        Heading
    }

    property int textType: MyText.TextType.Normal

    font.bold: textType === MyText.TextType.Heading
    font.pixelSize: textType === MyText.TextType.Heading ? 24 : 12
}
相关推荐
爱吃西瓜的小菜鸡10 分钟前
【C语言】矩阵乘法
c语言·学习·算法
晓纪同学21 分钟前
QT创建一个模板槽和信号刷新UI
开发语言·qt·ui
西洼工作室43 分钟前
【java 正则表达式 笔记】
java·笔记·正则表达式
初学者7.1 小时前
Webpack学习笔记(2)
笔记·学习·webpack
爱码小白2 小时前
PyQt5 学习方法之悟道
开发语言·qt·学习方法
新手上路狂踩坑2 小时前
Android Studio的笔记--BusyBox相关
android·linux·笔记·android studio·busybox
创意锦囊3 小时前
随时随地编码,高效算法学习工具—E时代IDE
ide·学习·算法
stm 学习ing3 小时前
HDLBits训练3
c语言·经验分享·笔记·算法·fpga·eda·verilog hdl
尘觉4 小时前
算法的学习笔记—扑克牌顺子(牛客JZ61)
数据结构·笔记·学习·算法
1 9 J4 小时前
Java 上机实践11(组件及事件处理)
java·开发语言·学习·算法