本系列所有文章可以在這里查看[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 } ~~~