Lo bueno de QML es que permite que casos de uso como una simple vista Maestro Detalle pueda ser mejorada agregando animaciones y layouts personalizados con muy poco esfuerzo.<\/p>\n
El ejemplo a implementar es muy simple, vamos a usar un archivo XML como data source y para presentar los datos vamos a usar un GridView<\/a> en donde seleccionaremos el item a mostrar en en el ListView<\/a> que hace las veces de details view.<\/p>\n La acci\u00f3n central ocurren en el delegate usado para poblar el GridView<\/a> el cual espera a que se haga click en alguno de los items, para pasar el index al ListView<\/a> y disparar la animaci\u00f3n que remueve el GridView<\/a> de la escena para cambiar la opacidad del ListView<\/a> de 0 a 1 para poder hacerlo visible, por ultimo hay en elemento Text<\/a> que har\u00e1 de bot\u00f3n para volver a la vista original. <\/p>\n Lo bueno de QML es que permite que casos de uso como una simple vista Maestro Detalle pueda ser mejorada agregando animaciones y layouts personalizados con muy poco esfuerzo. El ejemplo a implementar es muy simple, vamos a usar un…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,9],"tags":[43,44,46],"class_list":["post-472","post","type-post","status-publish","format-standard","hentry","category-development","category-ui","tag-qml","tag-qt","tag-qt-quick"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\r\nimport Qt 4.7\r\n\r\nRectangle {\r\n width: 360\r\n height: 640\r\n id:container\r\n\r\n XmlListModel {\r\n id: oranjeModel\r\n source: "http:\/\/localhost:3002\/players.xml"\r\n query: "\/players\/player"\r\n XmlRole {\r\n name: "name"\r\n query: "name\/string()"\r\n }\r\n XmlRole {\r\n name: "number"\r\n query: "number\/string()"\r\n }\r\n XmlRole {\r\n name: "position"\r\n query: "position\/string()"\r\n }\r\n XmlRole {\r\n name: "picture"\r\n query: "picture\/string()"\r\n }\r\n XmlRole {\r\n name: "bio"\r\n query: "bio\/string()"\r\n }\r\n }\r\n\r\n Component {\r\n id: oranjeDelegate\r\n Item {\r\n width: 80\r\n height: 110\r\n Image {\r\n source: picture\r\n width: parent.width\r\n height: parent.height\r\n fillMode: "Stretch"\r\n opacity: 0.5\r\n }\r\n MouseArea {\r\n anchors.fill: parent\r\n focus: true\r\n onClicked: {\r\n oranjeDetails.currentIndex = index\r\n container.state = "detailsView"\r\n }\r\n }\r\n }\r\n }\r\n\r\n Component {\r\n id: oranjeDetailsDelegate\r\n Grid {\r\n rows: 3\r\n spacing: 6\r\n\r\n Row {\r\n Image {\r\n source: picture\r\n width: 160\r\n height: 230\r\n fillMode: "Stretch"\r\n }\r\n\r\n Column {\r\n Text {\r\n text: number\r\n font.pointSize: 24\r\n }\r\n Text {\r\n text: name\r\n font.pointSize: 18\r\n }\r\n Text {\r\n text: position\r\n font.pointSize: 14\r\n }\r\n }\r\n }\r\n\r\n Row {\r\n Text {\r\n text: bio\r\n font.pointSize: 8\r\n width: container.width\r\n wrapMode: "Wrap"\r\n }\r\n }\r\n\r\n Row {\r\n Text {\r\n text: "Back"\r\n font.pointSize: 12\r\n color: "#ed1e24"\r\n width: container.width\r\n MouseArea {\r\n anchors.fill: parent\r\n onClicked: container.state = ""\r\n }\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n GridView {\r\n id: oranjeList\r\n model: oranjeModel\r\n delegate: oranjeDelegate\r\n width: container.width\r\n height: container.height\r\n cellWidth:90\r\n cellHeight: 120\r\n }\r\n\r\n ListView{\r\n id: oranjeDetails\r\n model: oranjeModel\r\n delegate: oranjeDetailsDelegate\r\n opacity: 0\r\n }\r\n\r\n states: [\r\n State {\r\n name: "detailsView"\r\n PropertyChanges {\r\n target: oranjeList\r\n x: -container.width\r\n }\r\n }\r\n ]\r\n\r\n transitions: [\r\n Transition {\r\n from: ""\r\n to: "detailsView"\r\n NumberAnimation {\r\n properties: "x"\r\n easing.type: "OutBounce"\r\n }\r\n PropertyAnimation {\r\n target: oranjeDetails\r\n property: "opacity"\r\n to: 1\r\n }\r\n },\r\n Transition {\r\n from: "detailsView"\r\n to: ""\r\n NumberAnimation {\r\n properties: "x"\r\n easing.type: "OutSine"\r\n duration: 250\r\n }\r\n PropertyAnimation {\r\n target: oranjeDetails\r\n property: "opacity"\r\n to: 0\r\n }\r\n }\r\n ]\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"