QML適配不同裝置

2021-07-27 07:58:19 字數 869 閱讀 8396

做嵌入式和移動開發,不同的裝置,不同的解析度需要ui能夠適配,這是乙個很現實的問題。qml作為qt中為ui而生的,使用qml一定要解決適配的問題。

現在同一尺寸的螢幕,其解析度也是不同,在qml中使用 anchors 進行相對的布局時,其是以畫素為單位。現在有乙個概念,叫做每英吋畫素數目。當裝置的ppi不同時,控制項的大小不同,這可能導致,如果設計是在乙個尺寸小ppi低的螢幕上設計,將程式放到乙個尺寸大ppi高的裝置上,那麼控制項看上去就更小了,所以在qml中直接使用畫素布局是不可取的。

qml中提供的screen為我們提供了裝置相關的資料,其中很重要的是dpi(devices per mm pixel),裝置每公釐的畫素點,通過這個我們就可以以mm為標準來做布局,這樣我們就不會出現,在高解析度的裝置上,控制項變得很小。

property real dpi: screen.pixeldensity.tofixed(2)
裝置乙個屬性,取兩個小數點。那麼可以這樣設定

anchors
這個控制項離parent上部 2mm,不管在那個裝置上,其表現都是一樣的,那麼對於控制項的長和寬表現也是一樣的。

我們設計介面的時候肯定在乙個尺寸上設計,那麼如果換了乙個很大的裝置,那麼控制項就不適合了,那麼我們需要有一點伸縮性。

screen.height和screen.width為當前的顯示裝置的長和寬,但是他們是畫素,得到實際的尺寸,需要除以dpi。 

假設我們設計的時候的長和寬為a和b,執行時得到的長和寬為c和d。 

那麼在布局的時候就應該是這樣的

anchors
那麼對於控制項的長和寬也是一樣的,這樣我們就實現了在不同的裝置上實現控制項和控制項間隔隨尺寸大小不同伸縮。

QML怎麼適配不同的裝置

做嵌入式和移動開發,不同的裝置,不同的解析度需要ui能夠適配,這是乙個很現實的問題。qml作為qt中為ui而生的,使用qml一定要解決適配的問題。現在同一尺寸的螢幕,其解析度也是不同,在qml中使用anchors進行相對的布局時,其是以畫素為單位。現在有乙個概念,叫做每英吋畫素數目。當裝置的ppi不...

CSS 適配裝置

375 x 667 iphone 6 media screen and max width 375px and min width 320px 寬度小於500px時用以下樣式覆蓋原樣式以達到適配手機 414 x 736 iphone 6p media screen and max width 500...

iOS不同螢幕適配字型大小

直接上demo define ios version 10 or later uidevice currentdevice systemversion floatvalue 10.0 yes no define adapationlabelfont n ios version 10 or later...