Qt Quick Layouts responsivos

Los diseños son una buena técnica para crear interfaces de usuario redimensionables. Sin embargo, este enfoque tiene sus limitaciones, ya que no podemos contraer y expandir elementos ilimitadamente sin sacrificar la usabilidad y la estética. En algún momento, tiene más sentido reorganizar, eliminar o añadir determinados elementos. La adaptación a distintos dispositivos (por ejemplo, teléfonos y mesas) y orientaciones de pantalla (horizontal o vertical) puede aplicarse de forma similar. Esto es lo que solemos entender por maquetación adaptativa y Qt Quick Layouts proporciona varias API para implementarla.

Jerarquía estática, diseño adaptable

Los layouts tienen una jerarquía, que suele estar definida por el código declarativo QML. Para algunos diseños adaptativos sencillos, es suficiente con no modificar la jerarquía y, en su lugar, modificar algunas de las propiedades que afectan al diseño.

Descripción declarativa

El método más sencillo para cambiar la maquetación es modificar las propiedades de la maquetación y las propiedades adjuntas de Layout con pequeñas expresiones. Por ejemplo, puede utilizar operadores ternarios para modificar el diseño en función de su anchura. Las propiedades de Item, como Item.visible, ocultar o mostrar varias partes de la interfaz, pueden modificarse del mismo modo.

En el siguiente fragmento, este concepto se utiliza para cambiar un diseño de dos columnas a uno de una sola columna si la anchura de la ventana es inferior a un valor determinado.

GridLayout {
    columns: width < 300 ? 1 : 2
    anchors.fill: parent

    Rectangle {
        id: rectangle1
        color: "tomato"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Rectangle {
        id: rectangle2
        color: "lightskyblue"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }
}

Las maquetaciones resultantes tienen este aspecto, en función de la anchura de la ventana.

Se pueden anidar varios niveles de maquetaciones y elementos, pero Items sólo se puede mover dentro de su Item.parent.

Estados

Se puede conseguir el mismo resultado con Qt Quick Estados. La ventaja de utilizar estados es que las propiedades de Layout para un diseño específico se recogen en un único punto del archivo QML (al menos las que cambian). El ejemplo mostrado anteriormente se puede implementar de la siguiente manera y el resultado se ve y se comporta exactamente igual.

GridLayout {
    anchors.fill: parent

    Rectangle {
        id: rectangle1
        color: "tomato"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Rectangle {
        id: rectangle2
        color: "lightskyblue"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    states: [
        State {
            when: width < 300
            PropertyChanges { target: rectangle2; Layout.row: 1 }
            PropertyChanges { target: rectangle2; Layout.column: 0 }
        },
        State {
            when: width >= 300
            PropertyChanges { target: rectangle2; Layout.row: 0 }
            PropertyChanges { target: rectangle2; Layout.column: 1 }
        }
    ]
}

LayoutItemProxy

Un tercer enfoque es la aplicación de LayoutItemProxy. La implementación del ejemplo minimalista mostrado anteriormente se puede encontrar en la documentación del tipo. A diferencia de las soluciones mostradas anteriormente, LayoutItemProxy permite la declaración de diseños completamente independientes para varios factores de forma. Especialmente con diseños más complejos, esto puede ser útil para mejorar y mantener una estructura de código fuente razonable.

Tenga en cuenta que la API LayoutItemProxy se encuentra en un estado de avance tecnológico y podría estar sujeta a cambios o a su eliminación en futuras versiones de Qt.

Jerarquía adaptable, diseño adaptable

Las reconstrucciones más complejas del diseño pueden requerir cambios en la jerarquía. Un pequeño botón independiente en un diseño pequeño puede combinarse con otros botones y colocarse en una caja de un diseño más grande. Un elemento totalmente visible en una maqueta puede requerir un Flickable en otra más pequeña. En este caso, lo mejor es utilizar LayoutItemProxy. LayoutItemProxy permite mover Items a través de varios niveles jerárquicos y entre diferentes Item.parent.

El Qt Quick Layouts - Responsive Layout Example muestra un caso en el que un elemento se mueve entre distintos niveles jerárquicos, colocándose en un Flickable en un caso y en el nivel superior en otro layout. Las dos maquetaciones resultantes tienen el siguiente aspecto.

Enlaces útiles: Consulte sus directrices de diseño

Muchas directrices de diseño ofrecen ayuda y consejos para crear maquetaciones con capacidad de respuesta. La aplicación de las técnicas correspondientes es posible con las API mencionadas anteriormente. Para más información, recomendamos los siguientes enlaces:

• Directrices de interfaz humana de Apple
• Diseños Material3
• Técnicas de diseño adaptativo de Microsoft Fluent