`
xiaoheliushuiya
  • 浏览: 396792 次
文章分类
社区版块
存档分类
最新评论

用QML开发MeeGo应用程序

阅读更多

什么是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

    Developing MeeGo apps with Python and QML

    QML开发移动应用Tabhost

    利用QT5的qml实现android和ios的tabhost效果,可以直接运行。 包含四个tab

    qml应用程序开发之中英文翻译

    qml应用程序开发之中英文翻译

    QML技术应用开发培训教程.pptx

    此文档是公司级培训的专门介绍qml语言开发教程的PPT文档资料,笔者可以选择自行下载学习,或直接作为qml培训的PPT文档,如果有任何不懂得问题可私信我火信账号10146725,并给我留言。

    QML开发的2048

    使用QML开发的2048,界面比较流程,相对使用QTWidget开发的效果好很多

    QML Material 风格的界面

    QML 实现anroid风格的界面 主要是通过添加google的Material QML实现的类 通过Qt 编译 从而变成QML的第三方类

    Qt6 QML Book/Qt C++/样板应用程序示例源码

    Qt6 QML Book/Qt C++/样板应用程序 示例源码 CSDN审核可能较慢,如无法下载,可以过段时间再回来看下 仅供相关爱好者交流使用,请于下载24小时内删除

    QML实现倒计时程序

    qml通过动画实现倒计时程序,支持Qt5.5及其以上,可以直接用qmlscene运行

    补天云实用工具:QT6框架QML源码保护工具应用 QML和JavaScript源码隐藏工具:可执行程序

    Windows版本的可执行程序及其依赖的...在使用补天云QML源码保护工具之后,使得编译后的QML应用程序的可执行文件中在不包含QML和JavaScript源码的明文形式的前提下,QML应用仍然能够正常运行。 操作介绍技术文章: ...

    Qt5开发及实例-CH1901.rar,Qt5创建QML应用程序的代码

    Qt5开发及实例,实例CH1901,这里先由一个最简单的QML程序入手,介绍QML的基本概念。创建QML应用程序,步骤如下。 (1)启动Qt Creator,单击主菜单“文件”→“新建文件或项目…”项,弹出“New File or Project”...

    创建及调用基于QT5 QML的 DLL(举例QML中使用QZXing识别二维码)

    在许多情况下基于QML开发的漂亮的界面想将他设计成组件提供给其他人使用,又不想让别人看到QML源码,另外如果其他人是基于vc环境又如何使用你的QML界面呢?本例子代码实现将基于QT.6 QML开发的模块编译成可以在VS...

    QML开发的图像轮播界面

    QML开发的图像轮播界面,利用PathView做的,下载编译可以直接用,无bug

    qml 实力程序

    qml 一个实例程序,鼠标在4个按钮间移动,改变按钮颜色和按钮标题

    qt+qml+vue构建应用程序示例

    一种基于qml加载集成vue构建跨平台应用程序的方法,利用qml作为UI框架的优势,结合vue实现更加灵活和便捷的开发,为开发者提供更多的选择和方便

    用QT QML做的扫雷程序

    用QML编写界面以及动画效果,然后在CPP里实现扫雷的功能。

    使用QML进行界面开发

    ESM6802支持Qt5.8版本,支持使用QML进行界面开发,而且能够利用硬件图像加速处理模块优化QML构建的图像界面的渲染。QML是Qt提供的一种描述性的脚本语言,类似于CSS(CascadingStyleSheets),可以在脚本里创建图形对象...

    基于QML的计时程序

    基于QML2的计时程序,可以直接用qmlscene运行

    在C++程序中使用QML

    如果你是重新改进使用QML的Qt应用程序,请参阅 整合QML到现有的Qt UI代码。 基本用法 每个应用程序至少需求一个QDeclarativeEngine。QDeclarativeEngine允许配置全局设置应用到所有的QML组件实例中,例如...

    qml与Qt数据交互

    现在做开发越来越多地使用qml语言进行ui开发了,因为qml可以快速简单地进行开发。qml其实也是基于qt框架上的,所以很多地一些知识都是从C++哪里可以找得到原型的。在使用qml开发界面就会少不了要与从qt进行数据的...

Global site tag (gtag.js) - Google Analytics