内容

• 添加模块导入路径
• 加载翻译文件
• 采用 QML 查看器加载占位符数据
• 使用 runtime 对象

QML 查看器

The Declarative UI package includes Qt QML Viewer , a tool for loading QML documents that makes it easy to quickly develop and debug QML applications. It invokes the QML runtime to load QML documents and also includes additional features useful for the development of QML-based applications.

The QML Viewer is a tool for testing and developing QML applications. It is not intended for use in a production environment and should not be used for the deployment of QML applications. In those cases, the QML runtime should be invoked from a Qt application instead; see Qt Declarative UI 运行时 了解更多信息。

The viewer is located at QTDIR/bin/qmlviewer . To load a .qml file with the viewer, run the viewer and select the file to be opened, or provide the file path on the command line:

qmlviewer myqmlfile.qml
					

On Mac OS X, the QML Viewer application is named "QMLViewer" instead. You can launch the viewer by opening the QMLViewer application from the Finder, or from the command line:

QMLViewer.app/Contents/MacOS/QMLViewer myqmlfile.qml
					

The QML Viewer has a number of configuration options involving features such as fullscreen display, module import path configurations, video recording of QML animations, and OpenGL 支持。

要查看配置选项，运行 qmlviewer 采用 -help 自变量。

添加模块导入路径

Additional module import paths can be provided using the -I 标志。例如， QML plugins example creates a C++ plugin identified as com.nokia.TimeExample . Since this has a namespaced identifier, the viewer has to be run with the -I flag from the example's base directory:

qmlviewer -I . plugins.qml
					

This adds the current directory to the import path so that the viewer will find the plugin in the com/nokia/TimeExample 目录。

Note by default, the current directory is included in the import search path, but namespaced modules like com.nokia.TimeExample are not found unless the path is explicitly added.

加载翻译文件

When the QML Viewer loads a QML file, it installs a translation file from a "i18n" subdirectory relative to that initial file. This directory should contain translation files named "qml_<language>.qm", where <language> is a two-letter ISO 639 language, such as "qml_fr.qm", optionally followed by an underscore and an uppercase two-letter ISO 3166 country code, such as "qml_fr_FR.qm" or "qml_fr_CA.qm".

Such files can be created using Qt Linguist .

The actual translation file that is loaded depends on the system locale. Additionally, the viewer will load any translation files specified on the command line via the -translation 选项。

见 QML i18n example for an example. Also, the Qt Internationalization documentation shows how JavaScript code in QML files can be made to use translatable strings.

采用 QML 查看器加载占位符数据

Often, QML applications are prototyped with fake data that is later replaced by real data sources from C++ plugins. QML Viewer assists in this aspect by loading fake data into the application context: it looks for a directory named "dummydata" in the same directory as the target QML file, and any .qml files in that directory are loaded as QML objects and bound to the root context as properties named after the files.

For example, this QML document refers to a lottoNumbers property which does not actually exist within the document:

import QtQuick 1.0
ListView {
    width: 200; height: 300
    model: lottoNumbers
    delegate: Text { text: number }
}
					

If within the document's directory, there is a "dummydata" directory which contains a lottoNumbers.qml 文件像这样：

import QtQuick 1.0
ListModel {
    ListElement { number: 23 }
    ListElement { number: 44 }
    ListElement { number: 78 }
}
					

Then this model would be automatically loaded into the ListView in the previous document.

Child properties are included when loaded from dummy data. The following document refers to a clock.time 特性：

import QtQuick 1.0
Text { text: clock.time }
					

The text value could be filled by a dummydata/clock.qml file with a time property in the root context:

import QtQuick 1.0
QtObject { property int time: 54321 }
					

To replace this with real data, you can simply bind the real data object to the root context in C++ using QDeclarativeContext::setContextProperty (). This is detailed in 在 C++ 应用程序中使用 QML 绑定 .

使用 runtime 对象

QML applications that are loaded with the QML Viewer have access to a special runtime property on the root context. This property provides additional information about the application's runtime environment through the following properties:

Rectangle {
    width: 200; height: 200
    ColorAnimation on color {
        running: runtime.isActiveWindow
        loops: Animation.Infinite
        from: "green"; to: "blue"; duration: 2000
    }
}
								

Rectangle {
    id: window
    width: 640; height: 480
    states: State {
        name: "landscape"
        PropertyChanges { target: window; width: 480; height: 640 }
    }
    state: (runtime.orientation == Orientation.Landscape
            || runtime.orientation == Orientation.LandscapeInverted) ? 'landscape' : ''
}