Qt Quick Controls - Estilo plano

Flat Style muestra cómo integrar controles personalizados en Qt Quick Designer. El ejemplo utiliza un módulo QML puro para definir constantes en un singleton. Para las partes declarativas de la interfaz de usuario, se utilizan archivos .ui.qml. Estos pueden ser editados visualmente en Qt Quick Designer.

Módulo QML para la tematización

El ejemplo contiene un módulo QML llamado Theme, que consiste en un singleton QML con el mismo nombre. Para asegurar que el módulo es encontrado por QML, añadimos el directorio de importación a las rutas de importación del motor en main.cpp.

...
engine.addImportPath(":/imports");
...

Para garantizar que el modelo de código y Qt Quick Designer puedan encontrar el módulo, añadimos la siguiente línea a flatstyle.pro.

QML_IMPORT_PATH = $$PWD/imports

Todos los colores, parámetros de fuente y constantes de tamaño que se utilizan en este ejemplo se definen como propiedades en el singleton llamado Theme.qml. Normalmente los valores de estos atributos se definen como constantes ya que no se supone que cambien en tiempo de ejecución. En este ejemplo, permitimos al usuario cambiar algunos atributos como el color principal, el parámetro de tamaño y algunos parámetros de fuente mientras la aplicación se está ejecutando.

Definir los valores de estos atributos en un singleton facilita su mantenimiento y modificación. Este patrón facilita la implementación de la tematización.

Módulo QML para controles personalizados

El módulo Flat contiene un estilo para un par de controles que implementan un aspecto personalizado. Este estilo se establece como el estilo de la aplicación en qtquickcontrols2.conf.

El ejemplo utiliza los estados de un elemento de Qt Quick para implementar los diferentes estados de un control. Esto tiene la ventaja de que podemos definir el aspecto personalizado en Qt Quick Designer y podemos verificar fácilmente los diferentes estados de un control. Para editar el indicador de un interruptor en Qt Quick Designer podemos abrir Switch.qml y luego introducir la implementación del indicador llamado switchHandle utilizando el cuadro combinado de la parte superior junto al cuadro combinado de los documentos abiertos.

La aplicación en sí no es más que un simple formulario que permite al usuario ajustar un par de parámetros de los controles personalizados. El usuario puede elegir otro color principal, poner la fuente en negrita o subrayada, y aumentar el tamaño de los controles mediante un interruptor.

MainForm.ui.qml es sólo la definición declarativa pura del formulario, mientras que flatstyle.qml instanciará el formulario e implementará la lógica.

Ejecutar el ejemplo

Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Proyecto de ejemplo @ code.qt.io