C++界面开发程序Qt使用教程:Qt 5.15中新的QML语言特性

翻译|使用教程|编辑:吴园园|2020-06-05 09:44:27.550|阅读 88 次

概述:随着Qt 6.0即将带来的重大变化,QML已在5.15中加入了一些新的语言特性。

# 正版采购狂欢节,企业采购正当时 #

相关链接:

Qt是目前最先进、最完整的跨平台C++开发工具。它不仅完全实现了一次编写,所有平台无差别运行,更提供了几乎所有开发过程中需要用到的工具。如今,Qt已被运用于超过70个行业、数千家企业,支持数百万设备及应用。

点击下载Qt最新试用版

必需属性(必备属性)

有时,您的组件需要设置一些属性,但没有合适的替代值。例如,您可能关心按钮的易访问性(Accessibility),因此当您创建了一个AccessibleButton控件时,它至少应该有一个描述属性。

// AccessibleButton.qml
Button {
    property string description
    Accessible.description: description
}

但是,按钮具有描述属性这一事实并不意味着任何人都会设置它。所以您或您的同事可能会在某个时候用以下代码实例化组件:

AccessibleButton {
    onClicked: (mouse)  => { /* fancy business logic here */ }
}

关于易访问性就讲到这里:现在描述属性只是一个空字符串!当然,您可以为属性设置一个位置值,但是用其中呢?“ Button”基本没用。“您不应该听到这个”?好吧,至少QA现在可能会针对它。但是,如果QML引擎知道需要设置此属性,不是更有用吗?

不幸的是,在Qt 5.15之前没有办法强制设置描述属性。但从Qt 5.15开始,这就可能:

Button {
    required property string description
    Accessible.description: description
}

现在,如果创建一个AccessibleButton,但没有设置描述属性,那么整个应用程序将无法启动。但如果该组件是动态创建的(例如通过Loader加载),则无法做到这一点。这种情况下,将仅出现运行时警告。

我们还计划为qmllint和QtCreator添加更多的工具支持,踩在未设置必需的属性时显示警告。

必需的属性和代表

此外,Required Properties在Delegates中扮演着特殊角色。。您可能知道的,Delegates可以通过名称以及其他属性,如model和index,直接访问所提供的模型角色。

ListView {
    model: root.myModel
    delegate: Text {
        id: delegate
        color: index % 2 ? "gray" : "black"
        text: description
    }
}

如果,您的代表不包含必需属性,则此处不会发生任何更改。但是,如果它们包含至少一个必需属性,那么这些名称就不能再访问了。相反,您必须将其显式的指定为必需属性。

ListView {
    model: root.myModel
    delegate: Text {
        id: delegate
        required property int index
        required property string description
        color: index % 2 ? "gray" : "black"
        text: description
    }
}

然后请注意,如您的模型是可编辑的,新方法和旧方法之间有一个重要的区别:使用旧方法,您可以这样写代码:

Text {
    id: delegate
    Component.onCompleted: description = "My fancy new text"
}

模型也会相应更新。但如果你这样写代码

Text {
    id: delegate
    required property string description
    Component.onCompleted: delegate.description = "My fancy new text"
}

然后,说明的绑定将被破坏(QML引擎将会打印警告),模型将不会被更新。我们决定采用这种行为,以确保无论在delegates中还是在delegates以外使用,组件的行为不会还有,我们也不鼓励任何人对属性执行命令式赋值(因为这通常会破坏绑定)。

如果您确实想要更新模型的值,当然还有一种方法可以实现:将模型设置为必需的属性并用以下代码

Component.onCompleted: model.description= "My fancy new text"

我们建议您始终在Delegates中使用必选属性。这避免了非限定查找,少数对工具来说是个问题,并经常会降低处理速度。

内联组件

Qt 5.15中的另一个新特性是内联组件。顾名思义,它们允许您在文件中定义一个新组件。基本语法是

  component <component name> : BaseType {
    // declare properties and bindings here
}

在我们内部,您可以通过名称引用新组件,就像在其自己的文件中定义的一样。让我们以LabeledImage组件为例来说明其工作原理:

// Images.qml
import QtQuick 2.15

Item {
    component LabeledImage: Column {
        property alias source: image.source
        property alias caption: text.text

        Image {
            id: image
            width: 50
            height: 50
        }
        Text {
            id: text
            font.bold: true
        }
    }

    Row {
        LabeledImage {
            id: before
            source: "before.png"
            caption: "Before"
        }
        LabeledImage {
            id: after
            source: "after.png"
            caption: "After"
        }
    }
    property LabeledImage selectedImage: before
}

您也可以在其他文件中引用该组件。在这种情况下,您需要在其名字之前加上其组件的名称:

// LabeledImageBox.qml
import QtQuick 2.15

Rectangle {
    property alias caption: image.caption
    property alias source: image.source
    border.width: 2
    border.color: "black"
    Images.LabeledImage {
        id: image
    }
}

您可能会想,既然QML已经有了组件类型,为什么还要使用内联组件呢?查看前面的示例,我们可以看到,内联组件使您可以执行组件无法执行的以下操作:

  • 您可以在没有Loader规模的情况下创建组件实例。
  • 您可以在属性声明中使用组件类型。
  • 您可以在定义组件的文件之外的其他文件中引用该组件。

希望您能和我们一样方便地找到内联组件!

空值合并

虽然QML通常只支持EcmaScript 6,但是Maximilian为一个即将推出的语言特性增加了支持,该特性正在被添加到最新的EcmaScript标准中:空。最后一个新语言特性是由我们的实习生Maximilian Goldstein实现的。值合并。引用MDN:

空值合并操作符(??)是一个逻辑操作符,当其顶端操作数为空或未定义时,返回其右侧操作数,否则返回其开头操作数。

下面是一个示例,演示如何在QML中使用它来设置JSON中的属性,并在未提供属性的情况下提供合理的替代值。

Item {
    property var settings
    property int brightness: settings.brightness ?? 100
    property color color: settings.color ?? "blue"
    Component.onCompleted: settings = JSON.parse(settingsString)
}

注意我们在设置brightness时不能用“ ||”代替“ ??”。因为settings.brightness可能已经是0,在这种情况下,我们将获取替换值。


想要购买Qt正版授权的朋友可以点击"咨询在线客服"哦~~~



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:Qt

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Qt

一个跨平台的C++图形用户界面应用程序开发框架。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat