前言

接前一篇文章，QML 性能優化建議(一)，這里接著來介紹性能優化建議的第二部分：通用接口元素，在這里會介紹一些常見的元素，如：圖片、布局之類的寫法。

通用接口元素

圖片

圖片是任何用戶界面的重要組成部分，但是由于加載圖片所花費的時間以及內存占用問題，將會是影響性能的一個很大的因素。

異步加載

如果加載的圖片非常大，那么在加載的時候要保證不會阻止UI線程。可以將QML Image元素的“異步”屬性設置true，然后啟用從本地文件系統異步加載圖像（如果是網絡上的圖像始終是異步加載），這樣不會導致界面卡頓。

設置為“異步”屬性將在低優先級工作線程中加載圖像。

顯式來源大小

如果應用程序加載大圖像但是將其顯示在一個小尺寸元素中，可以將“sourceSize”屬性設置為要渲染的元素的大小，以確保圖像的較小比例版本保留在內存中，而不是原圖片尺寸大小，這樣可以節省內存消耗。

請注意，更改sourceSize將導致重新加載圖像。

避免運行時組合

這里需要注意的是，如果所最終呈現出來效果中需要有幾張圖片拼接的情況，那么可以在直接提供已經拼接好的圖片，這樣避免在運行時進行合成。（比如帶陰影效果的元素）

避免平滑圖像

image.smooth僅在需要時啟用。在某些硬件上速度較慢，如果圖像以其自然尺寸顯示，則沒有視覺效果。

繪畫

避免在同一個區域進行多次重復繪制。盡量使用Item作為根元素而不是Rectangle以避免多次繪制背景。

布局

在元素布局的時候盡量使用錨布局的方式，不要使用直接綁定固定位置，如設置 x 和 y 值。
看如下示例：

Rectangle {id: rect1x: 20width: 200; height: 200 } Rectangle {id: rect2x: rect1.xy: rect1.y + rect1.heightwidth: rect1.width - 20height: 200 }

可以替代成如下方式：

Rectangle {id: rect1x: 20width: 200; height: 200 } Rectangle {id: rect2height: 200anchors.left: rect1.leftanchors.top: rect1.bottomanchors.right: rect1.rightanchors.rightMargin: 20 }

使用綁定位置的方式（通過將綁定表達式分配給可視對象的x，y，width和height屬性，而不是使用錨點）相對較慢，盡管它允許最大的靈活性。

如果布局不是動態的，則指定布局的最佳方式是通過x，y，width和height屬性的靜態初始化。項目坐標始終相對于其父項，因此如果您想要與父項的0,0坐標成固定偏移，則不應該使用錨布局的方式。在下面的示例中，子Rectangle對象位于相同的位置，使用直接綁定位置的方式效率會更高：

Rectangle {width: 60height: 60Rectangle {id: fixedPositioningx: 20y: 20width: 20height: 20}Rectangle {id: anchorPositioninganchors.fill: parentanchors.margins: 20} }

總結

以上是生活随笔為你收集整理的QML 性能优化建议（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。