如何评价QML

QML (Qt Markup Language）是基于JavaScript、宣告式编程的编程语言，用于设计用户界面为主的应用程序。它是Qt Quick，诺基亚开发的用户界面创建包的一部分。

QML 主要用于移动应用程序，注重于触控输入、流畅的动画（60张/秒）和用户体验。QML documents 描述元素的对象树。

Qt 附带的QML 模块包括原始图形构建块（例如，矩形、图像）、建模组件；行为组件（例如，TapHandler、DragHandler、State、Transition、Animation）以及更复杂的组件控件（例如，按钮、滑块、抽屉、菜单）。

这些元素可以组合起来构建从简单的按钮和滑块到完整的支持 Internet 的程序的复杂组件。

QML 元素可以通过标准JavaScript内联和通过包含的 js 文件进行扩充。元素也可以通过使用 Qt 框架的C++组件无缝集成和扩展。

QML 是语言；它的 JavaScript 运行时是自定义的 V4 引擎，自 Qt 52 起；而Qt Quick是2D场景图和基于它的UI框架。这些都是 Qt Declarative 模块的一部分，而该技术不再称为 Qt Declarative。

QML 和 JavaScript 代码可以使用 Qt Quick Compiler 编译成原生 C++ 二进制文件。或者，还有一种 QML 缓存文件格式，它动态存储 QML 的编译版本，以便在下次运行时更快地启动。

开发工具

由于 QML 和 JavaScript 非常相似，几乎所有支持 JavaScript 的代码编辑器都可以使用。

但是，自 21 版以来的免费跨平台 IDEQt Creator和许多其他 IDE 中都提供了对语法突出显示、代码完成、集成帮助和所见即所得编辑器的全面支持。

qml 可执行文件可用于将 QML 文件作为脚本运行。如果 QML 文件以shebang开头，则它可以直接执行。为部署打包应用程序（尤其是在移动平台上）通常涉及编写一个简单的 C++ 启动器并将必要的 QML 文件打包为资源。

import QtQuickControls 25

>

使用Ubuntu SDK来打开我们已经创建好的应用。然后再打开文件“MyLightqml”。在文件的开始部分加入如下的语句：

[cpp] view plain copy

Item {

<strong>id: root</strong>

width: unitsgu(100)

height: unitsgu(75)

signal redLightOn

signal greenLightOn

signal yellowLightOn

Rectangle {

id: background

anchorsfill: parent

color: "black"

property int size: width07

我们可以看到我们已经定义了三个信号。它们分别是"redLightOn", "greenLightOn"及“yellowLightOn”。我们定义这三个信号的目的是为了当红色，**及绿色的灯亮的时候，我们用这些信号来发送一个通知。这样只要有兴趣的代码可以对它进行截获，并处理。这里必须注意的是信号的第一个字母为小写！

接下来，我们在我们的JS代码中来发送这些信号。代码如下：

[cpp] view plain copy

Timer {

interval: 1000

running: true

repeat: true

property int count: 0

onTriggered: {

if (parentstate == "red_on" && count >= 5)

{

parentstate = "red_yellow_on"

<strong> rootredLightOn();

rootyellowLightOn();</strong>

count = 0

}

else if ( parentstate == "red_yellow_on" )

{

parentstate = "green_on"

<strong>rootgreenLightOn();</strong>

count++

}

else if ( parentstate == "green_on" && count >= 5 )

{

parentstate = "yellow_on"

<strong> rootyellowLightOn();</strong>

count ++

}

else if ( parentstate == "yellow_on" ) {

parentstate = "red_on"

redLightOn();

count = 0

}

else {

count++

}

}

}

发送信号其实非常简单。直接发送，就像调用一个方法一样。

为了在我们的代码部分截取这个应用，我们可以使用如下的方法。在“TrafficLightqml”中，修改代码为：

[cpp] view plain copy

import QtQuick 20

import UbuntuComponents 01

import "ui"

MainView {

// objectName for functional testing purposes (autopilot-qt5)

objectName: "mainView"

// Note! applicationName needs to match the "name" field of the click manifest

applicationName: "comubuntudeveloperliu-xiao-guoTrafficLight"

/

This property enables the application to change orientation

when the device is rotated The default is false

/

//automaticOrientation: true

width: unitsgu(120)

height: unitsgu(80)

Page {

id:main

anchorsfill: parent

Row {

id: myrow

anchorshorizontalCenter: parenthorizontalCenter

anchorsverticalCenter: parentverticalCenter

spacing: unitsgu(5)

MyLight {

id:light

width: mainwidth/5

height: width3

onRedLightOn: {

consolelog("red light is on")

}

}

Connections {

target: light

onYellowLightOn: {

consolelog("yellow light is on")

}

}

}

function greenLightOn() {

consolelog("green light is on")

}

ComponentonCompleted: {

lightgreenLightOnconnect(greenLightOn);

}

}

}

为了说明清楚，我写了三种方法。一种是直接把信号的第一个字母变为大写， 并同时在前面加上"on“。第二种方法使用”Connections"来实现槽的连接。第三种方法，我们可以直接 把信号连接到一个JS的函数上。运行程序，我们可以在应用的输出窗口看到如下的输出：

[cpp] view plain copy

green light is on

yellow light is on

red light is on

red light is on

yellow light is on

green light is on

yellow light is on

red light is on

red light is on

yellow light is on

事实上所有的控件的property都可以发出一个信号。让我们来看一下我们先前完成的“color” property。

[cpp] view plain copy

void TrafficLight::setColor(const QColor &color)

{

if ( color == m_color )

return;

else {

m_color = color;

update(); // repaint with the new color

emit colorChanged();

}

}

从这里可以看出，每当property的值发生改变时，就会发生一个叫做“colorChanged”的信号。我们可以在我们的QML中截获这个信号。比如在我们的代码中，我们可以使用如下的代码：

[cpp] view plain copy

TrafficLight{

id: redlight

width: backgroundsize

height: backgroundsize

color:"red"

onColorChanged: {

consolelog("Color is changed to " + color);

}

}

当我们运行时，我们可以看到好多的颜色变化的事件。这是由于颜色在transition时发生很多的颜色的变化。同样我们也可以对任何一个property进行事件的捕获。比如：

[cpp] view plain copy

TrafficLight{

id: redlight

width: backgroundsize

height: backgroundsize

color:"red"

onColorChanged: {

consolelog("Color is changed to " + color);

}

onWidthChanged: {

consolelog("width is changed to " + width);

}

}

这段代码可以对"width"的变化进行捕获！

详细一点想要怎么交互你可以用qmlRegisterType在QML启动之前(maincpp中)把C++的类注册成为一个QML类型,在C++里面定义好你的属性信号方法之类的,在QML页面上调用这些东西就可以或者你可以在maincpp中定义上下文 mlContextconte

以上就是关于如何评价QML全部的内容，包括:如何评价QML、【QML】复选框 CheckBox、在QML语言中怎么定义signal并怎么正确使用它等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！