用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;
}
}