Tamaño de elementos en QML

Question

Soy nuevo en QML. Según tengo entendido, todos los elementos tienen un ancho y una altura asociados que determinan su tamaño. Si el usuario cambia la resolución de la pantalla, la salida final se ve extraña. ¿Existe alguna manera de controlar dinámicamente el tamaño de los elementos en función de la resolución de la pantalla?

Answer 1

En lugar de usar valores fijos, puede multiplicar height y width del elemento raíz por factores que determinan el tamaño de los elementos proporcionalmente al tamaño de los elementos raíz. Además, puede usar QML anchors. Con esto se puede crear interfaces gráficas de usuario completamente escalables:

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 
     } 
    } 
} 

que no sé una manera de conseguir la resolución de la pantalla con QML pura que está disponible en todos los ambientes.

Para determinar la resolución de pantalla en dispositivos móviles puede usar el QML Screen Element.

En aplicaciones de escritorio puede obtener la resolución de pantalla en C++ (por ejemplo, con QDesktopWidget) y hacer que available in QML.