QML編碼的一些好的作法

Qt快速佈局要求

Qt自己提供Qt Quick快速佈局, 以可視化方式在佈局中排列Qt Quick Item. 與anchors不一樣，Qt Quick Layouts能夠根據窗口大小調整其子項的大小以便佈局. 需注意如下事項:

提倡作法

• 使用 anchors, width, height 等屬性來肯定佈局相對於其非佈局父Item的大小.
• 使用Layout附加屬性設置佈局的直接子元素的大小和對齊屬性.

不提倡作法

• 不要提供Item的implicitWidth和implicitHeight(自定義首選大小), 除非提供的隱含大小不使人滿意.
• 不要在做爲佈局的直接子項的項目上使用anchors, 但能夠使用Layout.preferredWidth和Layout.preferredHeight:

RowLayout {
    id: layout
    anchors.fill: parent
    spacing: 6
    Rectangle {
        color: 'azure'
        Layout.fillWidth: true
        Layout.minimumWidth: 50
        Layout.preferredWidth: 100
        Layout.maximumWidth: 300
        Layout.minimumHeight: 150
        Text {
            anchors.centerIn: parent
            text: parent.width + 'x' + parent.height
        }
    }
    Rectangle {
        color: 'plum'
        Layout.fillWidth: true
        Layout.minimumWidth: 100
        Layout.preferredWidth: 200
        Layout.preferredHeight: 100
        Text {
            anchors.centerIn: parent
            text: parent.width + 'x' + parent.height
        }
    }
}

注意:Layout和anchors都是佔用更多內存和實例化時間的對象. 當簡單地綁定到x、y、width和height屬性就足夠時, 避免使用它們(尤爲是在列表和表格委託以及控件的樣式中)

類型安全

QML中使用var既簡單又方便, 但也有幾個缺點需注意:

property var name
property var size
property var optionsMenu

• 若是賦值類型錯誤, 則報告的錯誤將指向屬性聲明的位置, 而不是屬性被賦值的位置. 這使得跟蹤錯誤變得更加困難, 從而減慢了開發過程.
• 沒法進行靜態分析來捕獲上述錯誤.
• 屬性的實際基礎類型並不老是能當即爲讀者所清楚.
  在這種狀況下, 咱們儘量的使用實際類型:

property string name
property int size
property MyMenu optionsMenu

更提倡聲明式綁定，而不是命令式賦值

在QML中, 能夠使用命令式JavaScript代碼執行諸如響應輸入事件, 經過網絡發送數據等任務. 命令式代碼在QML中佔有重要地位, 但重要的是要知道什麼時候不使用它

例如, 如下命令賦值:

Rectangle {
    Component.onCompleted: color = "red"
}

有如下缺點:

• 它太慢了, 首先用默認值來運算, 而後又用red去求值來替換.
• 若是有錯誤, 他將構造時就能發現的錯誤, 延遲到了運行時.
• 它會覆蓋已存在的聲明式綁定, 一般它是有意的, 但也多是無心的.
  上述代碼徹底能夠改寫爲聲明式綁定:

Rectangle {
    color: "red"
}

DPI可擴展的用戶界面

隨着顯示分辨率的提升，可伸縮的應用程序UI變得愈來愈重要。實現這一點的方法之一是爲不一樣的屏幕分辨率維護UI的幾個副本，並根據可用的分辨率加載適當的副本。儘管這工做得很好，但它增長了維護開銷。

Qt爲這個問題提供了更好的解決方案，建議採用:

• 使用anchors或Qt Quick Layout模塊來佈局可視Items。
• 不要爲可視Item指定顯式的width和height。
• 爲應用程序支持的每一個顯示分辨率提供諸如圖像和圖標等UI資源。Qt Quick Controls gallery示例經過爲@2x、@3x和@4x分辨率提供Qt-logo.png很好地演示了這一點，使應用程序可以知足高分辨率顯示。若是顯式啓用了高DPI縮放特性，Qt會自動選擇適合於給定顯示的適當圖像.
• 將SVG圖片用於小圖標。 雖然較大的SVG渲染速度可能較慢，但較小的SVG效果很好。 矢量圖像避免了像位圖圖像那樣須要提供圖像的多個版本。
• 使用基於字體的圖標，例如Font Awesome。 這些能夠縮放到任何顯示分辨率，而且還能夠着色。 Qt快速控件文本編輯器示例很好地說明了這一點。

有了這些，應用程序的UI就能夠根據所提供的顯示分辨率進行縮放。

以上文章參考自Qt官方文檔: https://doc.qt.io/qt-5/qtquick-bestpractices.html
依我的理解, 簡要翻譯, 若有錯漏, 歡迎指正.