Tipos QML
El módulo de Qt Quick que incorpora Velneo incluye tipos de gráficos primitivos. Estos tipos están disponibles solamente en un script QML si en el script se importa el espacio de nombre de QtQuick.
La versión actual del módulo de QtQuick es la 2.9, así debe ser importada a través de la siguiente declaración:
A continuación enumeramos todos los módulos disponibles y sus versiones. Estos módulos, si no se indica lo contrario en su descripción, quiere decir que están disponibles para todas las plataformas (Windows, Linux, MacOS, Android e iOS):
QtQuick 2.9
QtQuick Controls 1.5 (se incluirá entre las funcionalidades obsoletas en próximas versiones).
QtQuick.Controls 2.2` que permite aplicar distintos estilos a los controles (ver el punto estilos disponibles en QtQuick.Controls 2.2 para ampliar información al respecto).
QtQuick.LocalStorage 2.0
QtGraphicalEffects 1.0
QtLocation 5.9
QtMultimedia 5.9
QtPositioning 5.8
QtQml.Models 2.3
QtQuick.Controls.Styles 1.4
QtQuick.Controls.Material 2.2
QtQuick.Controls.Universal 2.2
QtQuick.Dialogs 1.2
QtQuick.Extras 1.4
QtQuick.Layouts 1.3
QtSensors 5.9
QtWebChannel 1.0
QtWebSocket (requiere librería QtWebSocket.dll) 1.1
QtWebView 1.1 (solamente funcional en Android)
QtCharts 2.0
QtQuick.XmlListModel 2.0
QtQuick.Window 2.3
Submódulos
Qt Quick incluye varios submódulos que contienen tipos adicionales.
XML List Model: contiene tipos para crear modelos a partir de datos XML.
Almacenamiento local: un submódulo que contiene una interfaz de JavaScript para una base de datos SQLite.
Ventanas: contiene tipos para crear ventanas de nivel superior y para acceder a la información de pantalla.
Diálogos: contiene tipos para crear e interactuar con diálogos del sistema.
Controles: provee un conjunto de componentes UI reutilizables.
Layouts: contiene tipos que son usados para organizar los elementos en la interfaz de usuario.
Tipos básicos
Hay varios tipos básicos que están soportados por defecto en el lenguaje QML.
Además, el “import” de QtQuick proporciona los siguientes tipos básicos:
color: valor de color ARGB. El tipo se refiere a un valor de color ARGB. Puede ser especificado de diversas formas.
date: valor de fecha.
font: valor de fuente con las propiedades de QFont. El tipo se refiere a un valor de fuente con las propiedades de QFont.
matrix4x4: un tipo matriz de 4×4 es una matriz de 4 filas y 4 columnas.
point: valor con atributos x e y.
quaternion: un tipo quaternion tiene atributos de escalar x, y y z.
rect: valor con atributos de x, y, ancho y alto.
size: valor con atributos de ancho y de alto.
vector2d: un tipo de vector2d tiene atributos x e y.
vector3d: valor con atributos x, y y z.
vector4d: un tipo vector4d tiene atributos x, y, z y w.
Tipos objeto
Todos los tipos de objeto proporcionados por el import de QtQuick están basados en el tipo Item, que deriva de QtObject. Los tipos de objeto QML proporcionados por el módulo de QML (tales como QtObject y Component) están también disponibles cuando importamos QtQuick.
Accessible: habilita la accesibilidad del ítems QML.
AnchorAnimation: anima cambios en los valores de ancla.
AnchorChanges: especifica cuándo cambiar las anchas de un ítem en un estado.
AnimatedImage: muestra animaciones almacenadas como series de imágenes.
AnimatedSprite: dibuja una animación sprite.
Animation: es la base de todas las animaciones QML.
AnimationController: habilita controles manuales de animaciones.
Animator: es la base de todos los animadores QML.
Behavior: define una animación por defecto para un cambio de propiedad.
BorderImage: pinta un borde basado en una imagen.
Canvas: proporciona un ítem de lienzo 2D que permite dibujar vía JavaScript.
CanvasGradient: proporciona una interfaz de CanvasGradient opaco.
CanvasImageData: contiene datos de una imagen de píxels en orden RGBA.
CanvasPixelArray: proporciona acceso ordenado e indexado a los componentes de cada píxel en datos de imagen.
ColorAnimation: anima cambios en valores de color.
Column: posiciona sus hijos en una columna.
Context2D: proporciona un contexto 2D para formas en un ítem Canvas.
DoubleValidator: define un validador para números no enteros.
Drag: para especificar eventos de arrastrar y soltar (drag and drop) para elementos movidos.
DragEvent: proporciona información abore el evento de arrastrado.
DropArea: para especificar manipulación de arrastrar y soltar en un área.
EnterKey: proporciona una propiedad para manipular la apariencia de la tecla Intro de un teclado en pantalla.
Flickable: proporciona una superficie que puede ser “flickeada”
Flipable: Proporciona una superficie que puede ser volteada.
Flow: posiciona sus hijos uno al lado del otro, justificando si es necesario.
FocusScope: crea explícitamente un ámbito de foco.
FontLoader: permite cargar fuentes por nombre o URL.
FontMetrics: proporciona métricas para una fuente dada.
Gradient: define un relleno degradado.
GradientStop: define el color en una posición! en un Gradient.
Grid: posiciona sus hijos en formación de cuadrícula.
GridMesh: define una malla con vértices dispuestos en una cuadrícula.
GridView: para especificar una vista en cuadrícula de ítems proporcionados por un modelo.
Image: visualiza una imagen.
IntValidator: define un validador para valores enteros.
Item: un tipo visual básico de QML.
ItemGrabResult: contiene los resultados de una llamada a Item::grabToImage().
KeyEvent: proporciona información sobre un evento de tecla.
KeyNavigation: soporta navegación por teclado usando las teclas de movimiento del cursor.
Keys: proporciona control de teclas para Items.
LayoutMirroring: propiedad usada para espejar el comportamiento de un layout
ListView: proporciona una vista de lista de ítems proporcionados por un modelo.
Loader: permite la carga dinámica de un subárbol desde URL o Component.
Matrix4x4: proporciona una manera de aplicar la transformación de una matriz 4×4 a un Item.
MouseArea: habilita el manejo sencillo del ratón.
MouseEvent: proporciona información sobre un evento de ratón.
MultiPointTouchArea: habilita el manejo de múltiples puntos táctiles.
NumberAnimation: anima cambios en valores de tipo qreal.
OpacityAnimator: anima la opacidad de un Item.
OpenGLInfo: proporciona información sobre la versión usada de Open GL.
ParallelAnimation: habilita las animaciones para ser ejecutadas en paralelo.
ParentAnimation: anima cambios en valores padre.
ParentChange: especifica cómo re-parentar un Item en un cambio de estado.
Path: define un trazado para uso de ParthView.
PathAnimation: anima un ítem a lo largo del trazado.
PathArc: define un arco con el radio dado.
PathAttribute: especifica cómo establecer un atributo en una posición dada en un Path.
PathCubic: define una curva de Bezier cúbica con dos puntos de control.
PathCurve: define un punto en una curva Catmull-Rom.
PathElement: el tipo de trazado base.
PathInterpolator: especifica cómo animar manualmente a lo largo del trazado.
PathLine: define una línea recta.
PathPercent: manipula el modo en el que un trazado es interpretado.
PathQuad: define una curva de Bezier cuadrática con un punto de control.
PathSvg: define un trazado usando una cadena de datos de trayectoria SVG.
PathView: organiza los elementos proporcionados por el modelo un trazado.
PauseAnimation: proporciona una pausa para una animación.
PinchArea: habilita el manejo del gesto de pinchar con los dedos.
PinchEvent: para especificar información sobre un evento de “pinch”.
Positioner: proporciona propiedades adjuntas que contienen detalles sobre dónde existe un ítem en un posicionador.
PropertyAction: especifica cambios inmediatos de propiedad durante una animación.
PropertyAnimation: anima cambios en valores de propiedad.
PropertyChanges: describe nuevos vínculos de propiedades o valores para un estado.
Rectangle: pinta un rectángulo relleno con borde opcional.
RegExpValidator: proporciona un validador de cadenas.
Repeater: instancia un número de componentes basados en ítem usando el modelo proporcionado.
Rotation: proporciona una manera de rotar un Item.
RotationAnimation: anima cambios en valores de rotación.
RotationAnimator: tipo que anima la rotación de un Item.
Row: posiciona sus hijos en una fila.
Scale: proporciona una manera de escalar un Item.
ScaleAnimator: tipo que anima el factor de escala de un Item.
ScriptAction: define scripts para ser ejecutados durante la animación.
SequentialAnimation: permite ejecutar animaciones de forma secuencial.
ShaderEffect: aplica sobras personalizadas a un rectángulo.
ShaderEffectSource: representa a un ítem de Qt Quick en una textura y lo visualiza.
Shortcut: proporciona atajos de teclado.
SmoothedAnimation: permite a una propiedad realizar un seguimiento de un valor con suavidad.
SpringAnimation: permite a una propiedad realizar un seguimiento de un valor en un movimiento “spring-like”.
Sprite: específica animaciones de “sprites”.
SpriteSequence: dibuja una animación de “sprites”.
State: define configuraciones de objetos y propiedades.
StateChangeScript: especifica cómo ejecutar un script en un estado.
StateGroup: proporciona soporte de estados de tipos no-Item.
SystemPalette: proporciona acceso a las paletas de Qt.
Text: especifica cómo añadir texto formateado a una escena.
TextEdit: visualiza múltiples líneas de texto editable formateado.
TextInput: visualiza una línea de texto editable.
TextMetrics: proporciona métricas para una fuente y texto dados.
TouchPoint: describe un punto táctil un área táctil de múltiples puntos (MultiPointTouchArea).
Transform: para especificar transformaciones avanzadas en Items.
Transition: define transiciones animadas que tienen lugar en los cambios de estado.
Translate: proporciona una forma de mover un Item sin cambiar sus propiedades x e y.
UniformAnimator: tipo que anima un efecto de sobra (ShaderEffect) uniforme.
Vector3dAnimation: anima cambios en valores QVector3d.
ViewTransition: especifica los elementos incluidos en una transición en una vista.
WheelEvent: proporciona información sobre un evento de ruda del ratón.
XAnimator: tipo que anima la posición x de un Item.
YAnimator: tipo que anima la posición y de un Item.
Nota:el plugin para mapas de Here, que en versiones anteriores requería poner "nokia" como nombre, debe indicarse como "here". Además, se requiere poner el prefijo "here." a los parámetros del plugin para que funcione.
Estilos disponibles en QtQuick.Controls 2.2
QtQuick.Controls 2.2 está basada en plantillas de sistema flexibles, permiten escribir estilos personalizados y experiencias de usuario completas.
Tiene los siguientes estilos disponibles:
Default: Simple y minimalista, de formas redondeadas, ofrece el mejor rendimiento.
Material: Basado en la guía de estilo Google Material Design.
Universal: Basado en la guía de estilo Microsoft Universal Design.
Para configurar el estilo disponemos de los métodos siguientes:
Por línea de comandos
Se pasará el estilo con el parámetro -style al ejecutar el vClient. Ejemplo:
/senda/vClient.exe -style material
Configurando una variable de entorno del sistema operativo
Debemos configurar una variable de entorno llamada QT_QUICK_CONTROLS_STYLE con el valor deseado. Ejemplo:
QT_QUICK_CONTROLS_STYLE=universal
Mediante un fichero de configuración
Con la variable de sistema QT_QUICK_CONTROLS_CONF definimos la senda del fichero de donde ha de tomar la configuración.
En el fichero podemos configurar las siguientes secciones:
Sección Controls
Podemos especificar los valores siguientes en una Controls section del fichero de configuración:
Variable | Descripción |
Style | Especifica el estilo con el que ejecutar la aplicación. El valor puede ser el nombre de cualquiera de los estilos ya incluidos (default, material o universal) o el de un estilo propio. |
FallbackStyle | Especifica el estilo a usar para los controles que no están implementados. El estilo debe ser uno de los ya incluidos (default, material o universal). Usará el estilo default por defecto. |
Sección Material
En esta sección del archivo de configuración se pueden establecer los siguientes valores específicos del estilo del material:
Variable | Descripción |
Theme | Especifica el tema predeterminado (material). El valor puede ser uno de los temas disponibles, por ejemplo "Dark". |
Accent | Especifica el color de acento del material predeterminado. El valor puede ser cualquier color, pero se recomienda utilizar uno de los colores predefinidos del Material, por ejemplo "Teal". |
Primary | Especifica el color primario predeterminado del material. El valor puede ser cualquier color, pero se recomienda utilizar uno de los colores predefinidos del Material, por ejemplo "BlueGrey". |
Foreground | Especifica el color de primer plano predeterminado del material. El valor puede ser cualquier color, o uno de los colores predefinidos del Material, por ejemplo "Brown". |
Background | Especifica el color de fondo predeterminado del material. El valor puede ser cualquier color, o uno de los colores predefinidos del Material, por ejemplo "Grey". |
Sección Universal
Los siguientes valores específicos del estilo Universal se pueden especificar en una sección Universal del archivo de configuración:
Variable | Descripción |
Theme | Especifica el tema Universal predeterminado. El valor puede ser uno de los temas disponibles, por ejemplo "Dark". |
Accent | Especifica el color de acento Universal predeterminado. El valor puede ser cualquier color, pero se recomienda utilizar uno de los colores universales predefinidos, por ejemplo "Violet". |
Foreground | Especifica el color de primer plano Universal predeterminado. El valor puede ser cualquier color, o uno de los colores universales predefinidos, por ejemplo "Brown". |
Background | Especifica el color de fondo Universal predeterminado. El valor puede ser cualquier color, o uno de los colores universales predefinidos, por ejemplo "Steel". |
Ejemplo:
Nota: en Android y en iOS solo se puede aplicar el estilo por defecto.
Última actualización