本系列所有文章可以在这里查看[http://blog.csdn.net/cloud_castle/article/category/2123873](http://blog.csdn.net/cloud_castle/article/category/2123873) 接上文[Qt5官方demo解析集32——Qt Quick Examples - Threading](http://blog.csdn.net/cloud_castle/article/details/39251931) 来到我们Qt Quick Examples的第二个例子了，之所以挑这个demo，主要是我们使用Qt开发界面（尤其是跨平台界面）时，本地屏幕信息与窗口调用是不可避免的课题。 这个例子便向我们展示了在QML中获取本地屏幕信息的方法。  项目树如图，其中shared.qrc是很多QML示例共享的一些资源，包括按钮，滑块等。 此外，为了良好的跨平台，demo中添加了两种格式的图标文件(MAC支持的icns, 以及其他平台通用的png)。  程序运行如图，我们可以调用一个子窗口，以窗口化或最大化形式显示。下方是我的笔记本屏幕的一些信息，包括分辨率，像素密度，方向等等。   由于使用到图标，我们有必要将pro文件拿出来看看： window.pro: ~~~ TEMPLATE = app QT += quick qml SOURCES += main.cpp RESOURCES += \ window.qrc \ ../shared/shared.qrc EXAMPLE_FILES = \ window.qml target.path = $$[QT_INSTALL_EXAMPLES]/quick/window INSTALLS += target ICON = resources/icon64.png // 设置ICON 图标 macx: ICON = resources/icon.icns // MAC平台额外定义图标 win32: RC_FILE = resources/window.rc ~~~ main.cpp： ~~~ #include <QtGui/QGuiApplication> // 个人比较推荐的头文件包含方式 #include <QtQml/QQmlEngine> #include <QtQml/QQmlComponent> #include <QtQuick/QQuickWindow> #include <QtCore/QUrl> #include <QDebug> int main(int argc, char* argv[]) { QGuiApplication app(argc, argv); QQmlEngine engine; // 注意到在5.3以后我们大多使用QQmlApplicationEngine来加载qml文件 // 它实际也就是封装了这里QQmlEngine + QQmlComponent，并提供了一些其他的便利函数 QQmlComponent component(&engine); QQuickWindow::setDefaultAlphaBuffer(true); // 如果我们需要应用透明窗体，需要在第一个QQuickWindow出现前设置该函数为true component.loadUrl(QUrl("qrc:///window/window.qml")); if ( component.isReady() ) component.create(); else qWarning() << component.errorString(); return app.exec(); } ~~~ 我们随着加载的顺序来看第一个qml文件 window.qml: ~~~ import QtQuick 2.0 import QtQuick.Window 2.1 import "../shared" as Shared QtObject { // 非可视化的轻量顶层对象 property real defaultSpacing: 10 // 各对象间隔 property SystemPalette palette: SystemPalette { } // SystemPalette可以很方便地提供本地化的控件样式 property var controlWindow: Window { // 主窗口 width: visibilityLabel.implicitWidth * 1.2 height: col.implicitHeight + defaultSpacing * 2 color: palette.window title: "Control Window" Column { id: col anchors.fill: parent anchors.margins: defaultSpacing spacing: defaultSpacing property real cellWidth: col.width / 3 - spacing // Grid 单元格宽度 Text { text: "Control the second window:" } Grid { id: grid columns: 3 spacing: defaultSpacing width: parent.width Shared.Button { // 来自Shared 控件包的Button id: showButton width: col.cellWidth text: testWindow.visible ? "Hide" : "Show" onClicked: testWindow.visible = !testWindow.visible } //! [windowedCheckbox] Shared.CheckBox { // CheckBox text: "Windowed" height: showButton.height width: col.cellWidth Binding on checked { value: testWindow.visibility === Window.Windowed } // 注意Binding是一个QML类型，而不是关键字。这个语句等于Binding{target: checked; value: testWindow.visibility === Window.Windowed}。相对于checked: XXX 的属性绑定方式，这种方式更适用于var 类型的属性绑定。因此对于bool 型的checked 而言，checked: testWindow.visibility === Window.Windowed 也可行 onClicked: testWindow.visibility = Window.Windowed } //! [windowedCheckbox] Shared.CheckBox { height: showButton.height width: col.cellWidth text: "Full Screen" Binding on checked { value: testWindow.visibility === Window.FullScreen } onClicked: testWindow.visibility = Window.FullScreen } Shared.Button { // Window.AutomaticVisibility 根据所在平台调整显示方式，比如在Windows 上为窗口，Android 则为全屏 id: autoButton width: col.cellWidth text: "Automatic" onClicked: testWindow.visibility = Window.AutomaticVisibility } Shared.CheckBox { height: autoButton.height text: "Minimized" Binding on checked { value: testWindow.visibility === Window.Minimized } onClicked: testWindow.visibility = Window.Minimized } Shared.CheckBox { height: autoButton.height text: "Maximized" Binding on checked { value: testWindow.visibility === Window.Maximized } onClicked: testWindow.visibility = Window.Maximized } } function visibilityToString(v) { // 状态转换String 函数 switch (v) { case Window.Windowed: return "windowed"; case Window.Minimized: return "minimized"; case Window.Maximized: return "maximized"; case Window.FullScreen: return "fullscreen"; case Window.AutomaticVisibility: return "automatic"; case Window.Hidden: return "hidden"; } return "unknown"; } Text { id: visibilityLabel text: "second window is " + (testWindow.visible ? "visible" : "invisible") + " and has visibility " + parent.visibilityToString(testWindow.visibility) } Rectangle { id: horizontalRule color: "black" width: parent.width height: 1 } ScreenInfo { } // 屏幕信息获取，实现代码在下方 } } // !controlWindow property var testWindow: Window { // 子窗口 width: 320 height: 240 color: "#215400" // 窗口背景色，但我们看到的颜色只在周围一圈，是因为中间为Rectangle，那一圈为间隔defaultSpacing title: "Test Window with color " + color flags: Qt.Window | Qt.WindowFullscreenButtonHint Rectangle { anchors.fill: parent anchors.margins: defaultSpacing // 矩形与窗口间隔 Text { anchors.centerIn: parent text: "Second Window" } MouseArea { // 点击切换颜色 anchors.fill: parent onClicked: testWindow.color = "#e0c31e" } Shared.Button { anchors.right: parent.right anchors.top: parent.top anchors.margins: defaultSpacing text: testWindow.visibility === Window.FullScreen ? "exit fullscreen" : "go fullscreen" width: 150 onClicked: { if (testWindow.visibility === Window.FullScreen) testWindow.visibility = Window.AutomaticVisibility else testWindow.visibility = Window.FullScreen } } Shared.Button { anchors.left: parent.left anchors.top: parent.top anchors.margins: defaultSpacing text: "X" width: 30 onClicked: testWindow.visible = false // 窗口隐藏 } } } // !testWindow property var splashWindow: Splash { // 启动窗口 onTimeout: controlWindow.visible = true // 自定义信号处理函数，显示主窗口 } } ~~~ 为了在QML获取屏幕信息，Qt为我们提供了Screen类型，它可以作为其他可视的QML类型的附加对象，指向该对象所显示的设备： ScreenInfo.qml: ~~~ import QtQuick 2.1 import QtQuick.Window 2.1 Item { id: root width: 400 height: propertyGrid.implicitHeight + 16 function orientationToString(o) { // 状态转string 函数 switch (o) { case Qt.PrimaryOrientation: return "primary"; case Qt.PortraitOrientation: return "portrait"; case Qt.LandscapeOrientation: return "landscape"; case Qt.InvertedPortraitOrientation: return "inverted portrait"; case Qt.InvertedLandscapeOrientation: return "inverted landscape"; } return "unknown"; } Grid { id: propertyGrid columns: 2 spacing: 8 x: spacing y: spacing //! [screen] Text { text: "Screen \"" + Screen.name + "\":" // 显示设备名称 font.bold: true } Item { width: 1; height: 1 } // 设备名称右方的占位器 Text { text: "dimensions" } // 分辨率 Text { text: Screen.width + "x" + Screen.height } Text { text: "pixel density" } // 像素密度 Text { text: Screen.pixelDensity.toFixed(2) + " dots/mm (" + (Screen.pixelDensity * 25.4).toFixed(2) + " dots/inch)" } Text { text: "logical pixel density" } // 逻辑像素密度 Text { text: Screen.logicalPixelDensity.toFixed(2) + " dots/mm (" + (Screen.logicalPixelDensity * 25.4).toFixed(2) + " dots/inch)" } Text { text: "available virtual desktop" } // 可用虚拟桌面，比分辨率的高度少了30 是因为Windows底下的状态栏 Text { text: Screen.desktopAvailableWidth + "x" + Screen.desktopAvailableHeight } Text { text: "orientation" } // 屏幕方向 Text { text: orientationToString(Screen.orientation) + " (" + Screen.orientation + ")" } Text { text: "primary orientation" } // 优先方向 Text { text: orientationToString(Screen.primaryOrientation) + " (" + Screen.primaryOrientation + ")" } //! [screen] } } ~~~ 最后是启动画面的实现 Splash.qml: ~~~ import QtQuick 2.0 import QtQuick.Window 2.1 //! [splash-properties] Window { id: splash color: "transparent" title: "Splash Window" modality: Qt.ApplicationModal // 应用窗口模式 flags: Qt.SplashScreen // 启动画面 property int timeoutInterval: 2000 signal timeout // 自定义溢出信号 //! [splash-properties] //! [screen-properties] x: (Screen.width - splashImage.width) / 2 // 居中 y: (Screen.height - splashImage.height) / 2 //! [screen-properties] width: splashImage.width // 窗口大小与图片大小一致 height: splashImage.height Image { id: splashImage source: "../shared/images/qt-logo.png" MouseArea { anchors.fill: parent onClicked: Qt.quit() // 点击退出 } } //! [timer] Timer { interval: timeoutInterval; running: true; repeat: false onTriggered: { visible = false // 2秒后隐藏，并发出timeout信号，以显示主窗口 splash.timeout() } } //! [timer] Component.onCompleted: visible = true } ~~~