什么是QML
?
QML是一种描述应用程序UI的声明式语言,包括应用程序的外观(菜单、按钮、布局等)以及行为(点击事件)的描述。在QML中,UI界面被描述成一种树状的带属性对象的结构(类似于DOM)
JavaScript
JavaScript: The Definitive Guide
)。如果对HTML和CSS等Web技术有所理解是会有帮助的,但不是必需的。
上面是官方介绍的前两段,具体中文教程可以看看Qt技术分享博客的系列教程
,QML实际上是Qt Quick
(Qt4.7.0中的新特性)核心组件之一:Qt Quick是一组旨在帮助开发者创建在移动电话,媒体播放器,机顶盒和其他便携设备上使用越来越多的直观、现代、流畅UI的工具集合。Qt Quick包括一组丰富的用户界面元素,一种用于描述用户界面的声明性语言(QML)及运行时,一组用于将这些高层次特性集成到经典的Qt应用程序的 C++ API。
从官方的介绍可以看出,Qt Quick是为移动平台快速开发所量身打造的,先看一个实际例子:在MeeGo上运行的MeeNotes,除了业务逻辑,界面UI都是使用QML实现的
MeeNotes运行效果
横竖屏幕切换(点击那个星号~)
在模拟器中运行效果
MeeNotes可以在这里
找到:使用git把& lt;font color="#ff0000">qt-components和meenotes clone
下来,然后先编译qt-components,这个依赖于qt4.7,是使用QML快速开发meego应用程序的关键,它实现了一套meego的QML Module,之后可以编译运行下MeeNotes,如果运行不了,请检查Qt安装目录里是否有 com.nokia.meego这个module(我的位于/usr/local/Trolltech/Qt-4.7.0/imports/com /meego)如果没有,则需要在qt-components解压目录下的 src/MeeGo 手动执行qmake/make/make install,进行编译安装。
简单看看MeeNotes下的实际代码
src目录下的src.pro
,红色部分即是与使用libmeegotouch开发所不同之处 :
TEMPLATE = app
TARGET = ../MeeNotes
LIBS += -lQtComponents
HEADERS += models/meenotesmodel.h /
models/notemodel.h
SOURCES += main.cpp /
models/meenotesmodel.cpp /
models/notemodel.cpp
QT += declarative
再看主入口main.cpp:
#include "models/meenotesmodel.h"
#include <QApplication>
#include <QDeclarativeContext>
#include <QDeclarativeComponent>
#include <QDir>
#include <QtComponents/qdeclarativewindow.h>
int main(int argc, char **argv)
{
QApplication app(argc, argv);
app.setApplicationName("MeeNotes");
//MeeNotesModel 是Model类
qmlRegisterType<NoteModel>();
MeeNotesModel model;
model.setSource("notes/");
//在哪查找main.qml
#ifndef MEENOTES_RESOURCE_DIR
const QDir dir(QApplication::applicationDirPath());
const QUrl qmlPath(dir.absoluteFilePath("resource/default/main.qml"));
#else
const QDir dir(MEENOTES_RESOURCE_DIR);
const QUrl qmlPath(dir.absoluteFilePath("main.qml"));
#endif
//创建能够解释qml运行的window
QDeclarativeWindow window(qmlPath);
window.rootContext()->setContextProperty("meenotes", &model);
window.window()->show();
return app.exec();
}
查看main.qml:
import Qt 4.7
import com.meego 1.0
Window {
id: window
Component.onCompleted: {
window.nextPage(Qt.createComponent("NoteList.qml"))
}
}
查看NoteList.qml:
import Qt 4.7
import com.meego 1.0
Page {
title: "MeeNotes"
actions: [
Action {
iconId: "icon-m-toolbar-add" //新建note按钮的处理
onTriggered: {
var note = meenotes.newNote();
note.title = (Math.random() > 0.5) ? "Cool title!" : "";
viewNote(note);
}
},
Action {
iconId: "icon-m-toolbar-favorite-mark" //横竖屏切换的按钮处理
onTriggered: {
screen.orientation = screen.orientation == Screen.Portrait ? Screen.Landscape : Screen.Portrait;
}
}
]
Component {
… … …//省略
}
Rectangle {
color: "white"
anchors.fill: parent
}
GridView {
id: grid
anchors.fill: parent
model: meenotes
cellWidth: 250
cellHeight: 210
delegate: noteDelegate
}
function viewNote(note) {
window.nextPage(Qt.createComponent("Note.qml"));
window.currentPage.note = note;
}
}
鉴于QML类似于web网页css的编写方式,效率已经很高了,但是似乎Qt Designer被我们忽视了,其实2.01版的Desinger已经可以使用meegotouch风格进行预览了,效果如下图:
目前Designer并不能直接生成QML文件,下一个版本的Desinger以及在计划之中了,可以叫他Qt Quick Designer,在Qt Roadmap中已经可以体现出来了:
分享到:
相关推荐
Developing MeeGo apps with Python and QML
利用QT5的qml实现android和ios的tabhost效果,可以直接运行。 包含四个tab
qml应用程序开发之中英文翻译
此文档是公司级培训的专门介绍qml语言开发教程的PPT文档资料,笔者可以选择自行下载学习,或直接作为qml培训的PPT文档,如果有任何不懂得问题可私信我火信账号10146725,并给我留言。
使用QML开发的2048,界面比较流程,相对使用QTWidget开发的效果好很多
QML 实现anroid风格的界面 主要是通过添加google的Material QML实现的类 通过Qt 编译 从而变成QML的第三方类
Qt6 QML Book/Qt C++/样板应用程序 示例源码 CSDN审核可能较慢,如无法下载,可以过段时间再回来看下 仅供相关爱好者交流使用,请于下载24小时内删除
qml通过动画实现倒计时程序,支持Qt5.5及其以上,可以直接用qmlscene运行
Windows版本的可执行程序及其依赖的...在使用补天云QML源码保护工具之后,使得编译后的QML应用程序的可执行文件中在不包含QML和JavaScript源码的明文形式的前提下,QML应用仍然能够正常运行。 操作介绍技术文章: ...
Qt5开发及实例,实例CH1901,这里先由一个最简单的QML程序入手,介绍QML的基本概念。创建QML应用程序,步骤如下。 (1)启动Qt Creator,单击主菜单“文件”→“新建文件或项目…”项,弹出“New File or Project”...
在许多情况下基于QML开发的漂亮的界面想将他设计成组件提供给其他人使用,又不想让别人看到QML源码,另外如果其他人是基于vc环境又如何使用你的QML界面呢?本例子代码实现将基于QT.6 QML开发的模块编译成可以在VS...
QML开发的图像轮播界面,利用PathView做的,下载编译可以直接用,无bug
qml 一个实例程序,鼠标在4个按钮间移动,改变按钮颜色和按钮标题
一种基于qml加载集成vue构建跨平台应用程序的方法,利用qml作为UI框架的优势,结合vue实现更加灵活和便捷的开发,为开发者提供更多的选择和方便
用QML编写界面以及动画效果,然后在CPP里实现扫雷的功能。
ESM6802支持Qt5.8版本,支持使用QML进行界面开发,而且能够利用硬件图像加速处理模块优化QML构建的图像界面的渲染。QML是Qt提供的一种描述性的脚本语言,类似于CSS(CascadingStyleSheets),可以在脚本里创建图形对象...
基于QML2的计时程序,可以直接用qmlscene运行
如果你是重新改进使用QML的Qt应用程序,请参阅 整合QML到现有的Qt UI代码。 基本用法 每个应用程序至少需求一个QDeclarativeEngine。QDeclarativeEngine允许配置全局设置应用到所有的QML组件实例中,例如...
现在做开发越来越多地使用qml语言进行ui开发了,因为qml可以快速简单地进行开发。qml其实也是基于qt框架上的,所以很多地一些知识都是从C++哪里可以找得到原型的。在使用qml开发界面就会少不了要与从qt进行数据的...