QML(1): 什么是QML

文章目录

  • 前言
  • 一、QML 是什么?
  • 二、Qt Quick 又是什么?
  • 三、简单代码示例
  • 四、察看QML视图效果
  • 总结


前言

  QML 早已经不限于开发手机应用,也可以支持用户开发传统的桌面程序。Qt5 将 QML 脚本编程提到与传统 C++ 部件编程相同的高度,开始力推 QML 界面编程。
  使用 QML 开发界面主要有以下几个优点:
    1) QML 非常灵活,可以做出非常炫酷的效果,例如 QQ、360、迅雷等都不在话下。

    2) QML 是标记语言,见名知意,非常容易编写和阅读,大大提高了开发和维护效率。

    3) QML 界面简洁大气,有很多动画,适合移动端。

    4) 不同平台下的 QML 使用相同的渲染机制,界面效果一致,不会随操作系统的不同而变化。


一、QML 是什么?

  • QML是一种描述性的脚本编程语言 (什么东西长什么样子,可以干啥)

    文件格式以.qml结尾。语法格式类似于JSON的语法
    QML可以在脚本里创建图形对象,并且支持各种图形特效,以及状态机等

  • QML是一个用户接口规范

    支持与JavaScript表达式相结合来达到动态属性的绑定。
    支持JavaScript文件的导入,并使用这些导入的功能。
    支持与Qt写的C++代码进行方便的交互,使用起来非常方便。

二、Qt Quick 又是什么?

   Qt Quick是QML类型与功能标准库。它包括可视化类型,交互类型,动画。模型和视图。粒子效果和着色效果。
   Qt Quick之于QML,正如Qt 之于 C++,QML是Qt中开发的一个新的语言,而Qt Quick是这个语言的一个组件库,其中包含了很多用QML语言写的可以现成使用的组件。

三、简单代码示例

下面的代码使用JavaScript,实现了当方块颜色是黑色的时候点击就变红,反之变黑。

QML(1): 什么是QML_第1张图片

代码如下(示例):

来自百度百科——QML

import QtQuick 2.15

Rectangle { 
	id: rect 
	color: "black"

	MouseArea {
		id: mouse 
		anchors.fill:parent
		onClicked: {
			fun();
		}
	}
	// javascript代码
	function fun() { 
		if(rect.color == "#000000") { 
			rect.color = "red" 
		}
		else {
			rect.color = "black" 
		}
	}
}

四、察看QML视图效果

  要查看创建的内容,可以使用qmlscene工具(位于bin目录中),并以文件名作为第一个参数。 QML的基本学习可以用记事本来编写代码,并用qmlscene工具来察看效果,不必启用qcreator。

例如,在控制台输入:

qmlscene my.qml

QML(1): 什么是QML_第2张图片]


总结

QML 只能用来进行界面设计和人机交互,也就是只能胜任 UI 部分,在底层仍然需要调用 C++ 编写的组件来完善功能 。

你可能感兴趣的:(#,QML)