2011-08-16 12 views
7

QMLを初めて使用しています。 私が理解するように、すべての要素には、そのサイズを決める関連する幅と高さがあります。 ユーザーが画面の解像度を変更すると、最終出力が奇妙に見えます。 画面の解像度に基づいて要素のサイズを動的に制御できる方法はありますか?QMLの要素のサイズ

答えて

8

固定値を使用する代わりに、ルート要素のサイズに比例した要素のサイズを決定する係数によって、ルート要素のheightとを取得することができます。さらにQML anchorsを使用することもできます。これを使用すると、完全にスケーラブルなGUIを作成することができます

import QtQuick 1.0 

Item { 
    id: root 

    // default size, but scalable by user 
    height: 300; width: 400 

    Rectangle { 
     id: leftPanel 

     anchors { 
      top: parent.top 
      left: parent.left 
      bottom: parent.bottom 
     } 
     width: root.width * 0.3 
     color: "blue" 
    } 

    Rectangle { 
     id: topPanel 

     anchors { 
      top: parent.top 
      left: leftPanel.right 
      right: parent.right 
     } 
     height: root.height * 0.2 
     color: "green" 
    } 


    Rectangle { 
     id: contentArea 

     anchors { 
      top: topPanel.bottom 
      left: leftPanel.right 
      right: parent.right 
      bottom: root.bottom 
     } 
     color: "white" 

     Text { 
      text: "Hi, I'm scalable!" 
      anchors.centerIn: parent 
      font.pixelSize: root.width * 0.05 
     } 
    } 
} 

は、私はすべての環境で利用可能である純粋なQMLで画面の解像度を取得する方法を知りません。

モバイルデバイスの画面解像度を確認するには、QML Screen Elementを使用します。

デスクトップアプリケーションでは、C++(たとえばQDesktopWidget)で画面解像度を取得し、available in QMLにすることができます。

+0

完璧、ありがとう。私はこれを試してみる。 – Groovy

+1

[QML Screen Element](http://qt-project.org/doc/qt-5/qml-qtquick-window-screen.html)は、QML 5でも利用できます。 – rmoestl

関連する問題