30
QML: tutor de vistas
EL objetivo de estos tutoriales es familiarizarse con la integración de objetos Lista QML en nuestras aplicaciones.
Todos los objetos de ambos ejemplos de este tutor los encontraremos en la carpeta tutores/qml/qml vistas del proyecto de aplicación de vTutor.
En este tutorial veremos las tres vistas básicas para mostrar elementos de un modelo, integrado con la base de datos de Velneo. Las vistas nos permiten posicionar y definir cómo se mostrarán los elementos de un modelo, en este caso registros provenientes de la base de datos de Velneo.
ListView GridView

ListView

El componente ListView de QML nos permite mostrar en una vista en forma de lista los elementos de un modelo. Se trata de un posicionador para elementos de un modelo, define cómo se pintan éstos.
En este ejemplo, el modelo lo proporciona Velneo a partir de una tabla ART_M y se mostrará por cada elemento cierta información y una imagen.
El objeto QML permite definir dos elementos estándar para mostrar la información en QML, Contenido y URL imagen, que en el código QML se indican con las etiquetas display y decoration respectivamente.
Para incluir más información hacemos uso de los UserRoles, que permiten definir tantas etiquetas como queramos, y que se definen como una fórmula que puede hacer uso de campos, funciones, etc. En este caso, y sólo como ejemplo, hemos creado dos, fecha y hora que mostrarán el dato actual haciendo uso de las funciones correspondientes.
Comenzamos con la declaración de la importación de QtQuick 1.0, ya que usaremos sus componentes.
1
import QtQuick 2.6
Copied!
Definimos el rectángulo que contendrá el interfaz QML.
1
Rectangle {
2
3
width: parent.width;
4
5
height: parent.height
Copied!
A continuación definimos un componente Component. Esto permite definir un componente propio que puede ser reutilizado. Muchas veces se definirá en un fichero aparte, con el fin de poder ser usado desde múltiples ficheros QML.
En este caso creamos un componente que denominamos delegado que nos permitirá pintar cada elemento que esté en la lista del modelo. Los delegados son un elemento del ListView y otras vistas que definen cómo se muestran elementos que contienen.
En el componente usamos los componentes posicionadores Column y Row. Se denominan posicionadores porque permiten definir cómo se van a colocar los elementos que contienen.
1
Component {
2
3
id: delegado
4
5
Item {
6
7
id: item
8
9
width: parent.width; height: 90
10
11
12
13
Row {
14
15
id: row
16
17
width: parent.width
18
19
20
21
anchors.margins: 10
22
23
spacing: 5
24
25
26
27
Image {
28
29
source: decoration; width: 160; height: 90
30
31
asynchronous: true
32
33
}
Copied!
Un detalle importante: si queremos mejorar la usabilidad de nuestras aplicaciones debemos aprovechar todas las posibilidades que nos brinda QML para optimizar. En este caso usamos la propiedad asynchronous: true, para hacer que la carga de las imágenes sea en diferido, es decir, que se muestre el interfaz tan pronto como se cree y que las imágenes se vayan cargando en segundo plano, a fin de no paralizar el interfaz al usuario final.
1
Column {
2
3
width: parent.width - 260
4
5
Text {
6
7
text: display;
8
9
color: item.ListView.isCurrentItem ? "red" : "black"
10
11
font.bold: true
12
13
}
14
15
Text {
16
17
width: parent.width
18
19
text: "<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing <b>elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
20
21
wrapMode: Text.Wrap
22
23
color: item.ListView.isCurrentItem ? "red" : "black"
24
25
}
26
27
}
28
29
30
31
Column {
32
33
width: 100
34
35
Text {
36
37
text: fecha;
38
39
color: "black"
40
41
font.bold: item.ListView.isCurrentItem ? true : false
42
43
}
44
45
Text {
46
47
text: hora;
48
49
color: "black"
50
51
font.bold: item.ListView.isCurrentItem ? true : false
52
53
}
54
55
}
56
57
58
59
}
Copied!
El componente MouseArea no permiten definir un área en el que el usuario podrá interaccionar. En este caso, cuando el usuario haga clic sobre el elemento llevaremos haremos que se seleccione.
Si el usuario hace doble clic, en ese caso no sólo llevamos la selección si no que emitimos una señal de activado. Veremos en la vista ListView como la señal de activado se envía para que la detecte Velneo y muestre un formulario correspondiente al registro seleccionado.
1
MouseArea {
2
3
id: mouseArea
4
5
anchors.fill: parent
6
7
focus: true
8
9
onClicked: {
10
11
listView.currentIndex = index
12
13
}
14
15
onDoubleClicked: {
16
17
listView.currentIndex = index
18
19
listView.itemActivated(index)
20
21
}
22
23
}
24
25
26
27
}
28
29
}
Copied!
Creamos otro componente que será el que usemos para la selección (highlight). Es el que define cómo se pinta la selección de un elemento de la vista ListView. Además, le incluimos una animación.
1
Component {
2
3
id: seleccion
4
5
Rectangle {
6
7
width: parent.width; height: 90
8
9
color: "lightsteelblue"; radius: 5
10
11
y: listView.currentItem.y
12
13
Behavior on y {
14
15
SpringAnimation {
16
17
spring: 3
18
19
damping: 0.2
20
21
}
22
23
}
24
25
}
26
27
}
Copied!
Por último definimos la vista ListView que definimos por medio de los componentes que hemos ido creando.
1
ListView {
2
3
id: listView
4
5
anchors.fill: parent
6
7
model: theListModel
8
9
objectName: "theListView"
Copied!
Para que la vista se alimente del origen que viene de Velneo (la lista de registros de entrada), definimos el modelo theListModel como aquél que alimenta la vista usando el elemento model.
Además, para que esta lista pueda ser gestionada también desde Velneo la definiremos como un objeto y le daremos el nombre theListView: objectName: “theListView”. En un objeto QML podemos tener muchas vistas, pero ésta será la que se gestione desde Velneo.
Para que las señales de Activado y Cambio de selección se envíen a Velneo, además de asignarles el nombre de objeto debemos definirlas en la vista que queremos que las dispare. Podemos gestionar desde Velneo el cambio de selección con la señal correspondiente y lanzar un evento. La señal de activado permite mostrar el formulario correspondiente al registro en curso que esté definido en el objeto QML.
1
signal itemActivated(int index)
2
3
signal selectionChanged(int index)
Copied!
Tendremos que gestionar qué registro es el seleccionado y lanzar la señal correspondiente. Por ejemplo, en este caso, queremos que cada vez que se cambie la selección en el interfaz, este cambio de selección quede reflejado en la vista. Para ello usamos la señal de QML onCurrentIndexChanged que se dispara cuando hay un cambio para lanzar hacia Velneo la señal selectionChanged.
1
onCurrentIndexChanged:
2
3
{
4
listView.selectionChanged( listView.currentIndex )
5
}
Copied!
El delegado, como habíamos comentado antes, permite definir la forma en que se mostrará cada elemento de la lista. En este caso hacemos uso de un componente previamente definido. Podríamos programarlo aquí, pero es aconsejable encapsular el código y dividirlo para que sea más sencillo y reutilizable.
1
delegate: delegado
Copied!
De igual forma hemos hecho la definición de la selección (highlight), en la que indicamos que hacemos uso del componente creado anteriormente.
1
highlight: seleccion
2
3
highlightFollowsCurrentItem: false
4
5
focus: true
6
7
8
}
9
10
}
Copied!

GridView

Esta vista funciona de igual modo que ListView, pero posiciona los elementos en un casillero, del que podemos gestionar orientación, etc.
A efectos prácticos, podemos sustituir uno por otro y configurar las características propias de de cada vista, sin necesitar realizar más cambios ver la misma lista de otra forma.
Por tanto, para aprovechar mejor el ejemplo, hemos incluido la sincronización de un GridView con un ListView que usaremos para mostrar un único elemento de la lista, haciendo una transición animada desde el GridView al elemento seleccionado que será visible en el ListView.
1
import QtQuick 2.6
2
3
Rectangle {
4
5
id:root
6
7
width: parent.width
8
9
height: parent.height
10
11
color: "black"
Copied!
Aquí definimos el delegado, es decir, cómo se pintará cada elemento de la lista en el GridView.
Usaremos componentes Item, Row, Column, etc., para definir y posicionar los distintos elementos dentro de la celda.
1
Component {
2
3
id: delegado
4
5
Item {
6
7
width: 100
8
9
height: 100
10
11
Image {
12
13
source: decoration
14
15
width: parent.width
16
17
height: parent.height
18
19
fillMode: "Stretch"
20
21
opacity: 0.5
22
23
asynchronous: true
24
25
}
26
27
Text{ text: display; color: "white" }
28
29
MouseArea {
30
31
anchors.fill: parent
32
33
focus: true
34
35
onClicked: {
36
37
detalle.currentIndex = index
38
39
root.state = "vistaDetalle"
40
41
}
42
43
}
44
45
}
46
47
}
Copied!
Aquí definimos el delegado del detalle, es decir, cómo se pintará cada elemento de la lista en el ListView. En realidad, únicamente se mostrará en pantalla uno de los elementos.
Usaremos componentes Grid (no debemos confundir GridView que gestiona una lista de registros, frente a Grid que gestiona una serie de elementos), Row, Column, etc., para definir y posicionar los distintos elementos dentro de la lista.
1
Component {
2
3
id: detalleDelegado
4
5
6
7
Grid {
8
9
id: detalleDelegadoGrid
10
11
rows: 3
12
13
spacing: 20
14
15
width: 500
16
17
Row {
18
19
20
21
Image {
22
23
source: decoration
24
25
asynchronous: true
26
27
width: 320
28
29
fillMode: Image.PreserveAspectFit
30
31
smooth: true
32
33
34
35
MouseArea {
36
37
id: mouseAreaImage
38
39
anchors.fill: parent
40
41
focus: true
42
43
onClicked: {
44
45
listaGrid.currentIndex = index
46
47
listaGrid.itemActivated(index)
48
49
}
50
51
}
52
53
}
54
55
Column {
56
57
Text {
58
59
text: display
60
61
font.pointSize: 24
62
63
color: "white"
64
65
}
66
67
Text {
68
69
text: fecha
70
71
font.pointSize: 18
72
73
color: "white"
74
75
}
76
77
Text {
78
79
text: hora
80
81
font.pointSize: 14
82
83
color: "white"
84
85
}
86
87
}
88
89
}
90
91
Row {
92
93
Text {
94
95
text: display
96
97
font.pointSize: 8
98
99
wrapMode: "Wrap"
100
101
color: "white"
102
103
}
104
105
}
Copied!
En la última fila incluimos dos componentes que definimos como un rectángulo con un texto. Estos componentes los usaremos como botones que nos permitirán volver a la vista anterior o ver el registro en un formulario.
1
Row {
2
3
width: 300
4
5
anchors.bottom: parent.bottom
6
7
8
9
Rectangle {
10
11
id: rectangle1
12
13
width: 80
14
15
height: 25
16
17
color: "black"
18
19
border.color: "white"
20
21
border.width: 2
22
23
radius: 10
24
25
26
27
anchors.left: parent.left
28
29
30
31
32
33
Text {
34
35
id: text1
36
37
text: "Volver"
38
39
40
41
anchors.horizontalCenter: parent.horizontalCenter
42
43
anchors.verticalCenter: parent.verticalCenter
44
45
46
47
font.pointSize: 10
48
49
font.bold: true
50
51
color: "white"
52
53
}
Copied!
Para cambiar qué visualización usaremos, el casillero GridView o la lista de un único elemento con ListView, usaremos state que nos permiten configurar estados para un elemento. Por medio de un elemento MouseArea definimos que si el usuario hace clic sobre un elemento del GridView, deje de estar en el estado Detalle que, como veremos más adelante, define que se vea en el ListView.
1
MouseArea {
2
3
anchors.fill: parent
4
5
focus: true
6
7
onClicked:
8
9
{
10
11
root.state = "";
12
13
}
14
15
}
16
17
18
19
}
20
21
22
23
Rectangle {
24
25
id: rectangle2
26
27
width: 80
28
29
height: 25
30
31
color: "black"
32
33
border.color: "white"
34
35
border.width: 2
36
37
radius: 10
38
39
anchors.right: parent.right
40
41
42
43
Text {
44
45
id: text2
46
47
48
49
text: "Ver"
50
51
52
53
anchors.horizontalCenter: parent.horizontalCenter
54
55
anchors.verticalCenter: parent.verticalCenter
56
57
58
59
font.pointSize: 10
60
61
font.bold: true
62
63
color: "white"
64
65
66
67
}
68
69
}
Copied!
Y por medio de otro MouseArea definimos que el usuario vea el formulario del registro correspondiente, usando la señal de Activado.
1
MouseArea {
2
3
id: mouseAreaText
4
5
anchors.fill: parent
6
7
focus: true
8
9
onClicked: {
10
11
listaGrid.currentIndex = index
12
13
listaGrid.itemActivated(index)
14
15
}
16
17
}
18
19
}
20
21
}
22
23
}
24
25
26
27
}
Copied!
Una vez definido el delegado, vamos a definir cómo se muestra la vista GridView.
1
GridView {
2
3
4
5
id: listaGrid
6
7
model: theListModel
8
9
delegate: delegado
Copied!
Definimos además el modelo, theListModel para que se alimente a partir del proceso de carga en Velneo, además de indicar que el delegado para pintar cada elemento es el que hemos definido anteriormente: delegado.
1
width: root.width
2
3
height: root.height
4
5
cellWidth:110
6
7
cellHeight: 110
Copied!
Definimos el tamaño de las celdas y además configuramos la propiedad objectName y la emisión de las señales para esta vista, que será la que muestre el formulario.
1
objectName: "theListView"
2
3
4
5
signal itemActivated(int index)
6
7
signal selectionChanged(int index)
8
9
10
11
highlightFollowsCurrentItem: false
12
13
onCurrentIndexChanged:
14
15
{
16
17
listaGrid.selectionChanged( listaGrid.currentIndex )
18
19
}
20
21
}
Copied!
A continuación definimos la vista ListView que nos permitirá mostrar el elemento seleccionado. También se carga con el modelo de origen del objeto QML theListModel, pero en este caso se pinta con el delegado correspondiente detalleDelegado, que mostrará en pantalla únicamente el registro seleccionado.
1
ListView{
2
3
id: detalle
4
5
model: theListModel
6
7
delegate: detalleDelegado
8
9
opacity: 0
10
11
12
13
}
Copied!
Ahora definimos los estados. En estado vistaDetalle pasaremos de ver la vista GridView al ListView con un único elemento. Si pasamos al estado anterior “”, entonces volveremos a ver la vista GridView.
1
states: [
2
3
State {
4
5
name: "vistaDetalle"
6
7
PropertyChanges {
8
9
target: listaGrid
10
11
x: -root.width
12
13
}
14
15
}
16
17
]
Copied!
Aprovechamos para añadir un efecto por medio de la propiedad transitions que nos permite configurar la forma en que se pasa de una vista a otra, aprovechando para ello la diversidad de efectos de que nos dota QML.
1
transitions: [
2
3
Transition {
4
5
from: ""
6
7
to: "vistaDetalle"
8
9
NumberAnimation {
10
11
properties: "x"
12
13
easing.type: "OutBounce"
14
15
}
16
17
PropertyAnimation {
18
19
target: detalle
20
21
property: "opacity"
22
23
to: 1
24
25
}
26
27
},
28
29
Transition {
30
31
from: "vistaDetalle"
32
33
to: ""
34
35
NumberAnimation {
36
37
properties: "x"
38
39
easing.type: "OutSine"
40
41
duration: 250
42
43
}
44
45
PropertyAnimation {
46
47
target: detalle
48
49
property: "opacity"
50
51
to: 0
52
53
}
54
55
}
56
57
]
58
59
}
Copied!
Última actualización 1yr ago
Copiar enlace