用QML语言开发MeeGo应用程序在线开发教程 – MeeGo开发中文网

时间 2019-12-05

标签 qml 语言开发 meego 应用程序在线教程中文网繁體版

原文原文链接

用QML语言开发MeeGo应用程序在线开发教程 – MeeGo开发中文网

用QML语言开发MeeGo应用程序在线教程 – MeeGo开发中文网css

Qt Declarative UI 传得沸沸扬扬，却不多有中文资料介绍这是一个什么样的技术，以及如何使用它。偶尔能搜到几篇也是掐头去尾的，让人摸不着头脑。这个入门教程来自于Qt官方文档，更多的是语法性的介绍。html

什么是QML？

QML是一种描述应用程序UI的声明式语言、脚本语言，文件格式以.qml结尾包括应用程序的外观（菜单、按钮、布局等）以及行为（点击事件）的描述。在QML中，UI界面被描述成一种树状的带属性对象的结构。若是对HTML和CSS等Web技术有所理解是会有帮助的，但不是必需的。语法格式很是像CSS(参考后文具体例子)，但又支持javacript形式的编程控制。java

上面是官方介绍的前两段，QML其实是Qt Quick（Qt4.7.0中的新特性）核心组件之一：Qt Quick是一组旨在帮助开发者建立在移动电话，媒体播放器，机顶盒和其余便携设备上使用愈来愈多的直观、现代、流畅UI的工具集合。Qt Quick包括一组丰富的用户界面元素，一种用于描述用户界面的声明性语言（QML）及运行时，一组用于将这些高层次特性集成到经典的Qt应用程序的 C++ API。git

从官方的介绍能够看出，Qt Quick是为移动平台快速开发所量身打造的，先看一个实际例子：在MeeGo上运行的MeeNotes，除了业务逻辑，界面UI都是使用QML实现的web

MeeNotes运行效果编程

横竖屏幕切换app

在模拟器中运行效果dom

MeeNotes能够在这里找到：使用git把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: {
screenscreen.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中已经能够体现出来了：

Qt Quick Designer

这即是用QML语言开发MeeGo应用程序的教程。