QML笔记整理——QML高级特性

一、扩展QML的类型
QML很多核心的类型和元素都是由C++实现的,然而,用纯QML对这些类型扩展也是可以的
1、添加新属性
开发者可以添加新的属性properties、添加新的信号signals、添加新的方法methods和定义新的QML控件
1)每个属性都必须有一个类型,QML有很多已经定义好的类型,它们都有对应的C++类型,如下图示:


示例程序:
// Syntax of adding a new property to an element
// [default] property <type> <name> [: defaultValue]
import QtQuick 2.0

Rectangle {
    property color innerColor: "black"
    color: "red"
    width: 100; height: 100
    Rectangle {
        anchors.centerIn: parent
        width: parent.width - 10
        height: parent.height - 10
        color: innerColor
    }
}
2)新的属性也可以是现有的属性的别名。新的属性不会被分配新的存储控件,他的类型是由alias属性决定的。
示例程序:
// Syntax of creating a property alias
// [default] property alias <name> : <alias reference>
import QtQuick 2.0

Rectangle {
    property alias innerColor: innerColor.color
    color: "red"
    width: 100; height: 100
    Rectangle {
        anchors.centerIn: parent
        width: parent.width - 10
        height: parent.height - 10
        color: "black"
    }
}
3)在定义新的组件时,属性的别名是非常有用的。然而对于别名有一些限制,只有在控件完全实例化的时候才能使用别名,在这个控件里面不能使用别名,在同一个控件中,不能在别名上再建立别名
示例如下:
    // Does not work:
    property alias innerColor: innerRect.color
    innerColor: "black"
    // ...and neither does this:
    id: root
    property alias innerColor: innerRect.color
    property alias innerColor2: root.innerColor
4)除了上面的限制,别名提供了很多的灵活性,可以重定义已经存在的属性的行为,并在控件内部仍然使用这个属性。
比如下面的例子,定义color属性,外面的矩形总是红色,且用户只能修改里面的矩形的颜色
Rectangle {
    property alias color: innerRect.color
    color: "red"
    width: 100; height: 100
    Rectangle {
        id: innerRect
        ...;
        color: "black"
    }
}

2、添加新的信号
QML中可以定义自己的信号,这些信号可以在QML中直接使用。在C++端,它们是普通的Qt信号。自定义信号可以有参数
示例如下:
Item {
    signal hovered()// A signal without arguments
    signal click // The same as above, empty argument list can be emited
    signal performAction(string action, var actionArgument)
}

3、添加新的方法
已有的类型也可以添加新的方法。可以使用JavaScript实现。在QML端可以直接使用,在C++端是槽函数。新添加的方法要使用没有类型的参数(JavaScript本身是弱类型,在C++端,它的类型为QVariant)
示例如下:
// Define a method
Item {
    id: myItem
    function say(text) {
        console.log("You said " + text)
    }
}
// Use the method
myItem.say("Hello")
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值