Hi to all!

I have QML GUI element which shows some product information - basicly QML GridView with delegate:
Qt Code:
  1. import QtQuick 2.5
  2. import QtQuick.Layouts 1.2
  3.  
  4. import "../delegates"
  5.  
  6. Item
  7. {
  8. antialiasing: true
  9.  
  10. clip: true
  11.  
  12. Rectangle
  13. {
  14. id: ueProductSelectorWrapper
  15.  
  16. radius: 16
  17. gradient: Gradient
  18. {
  19. GradientStop
  20. {
  21. position: 0
  22. color: "#ffffff"
  23. } // GradientStop
  24.  
  25. GradientStop
  26. {
  27. position: 1
  28. color: "#000000"
  29. } // GradientStop
  30. } // Gradient
  31.  
  32. border.color: "#4682b4"
  33. border.width: 1
  34.  
  35. antialiasing: true
  36.  
  37. anchors.centerIn: parent
  38. anchors.fill: parent
  39.  
  40. ColumnLayout
  41. {
  42. anchors.margins: parent.radius/2
  43.  
  44. spacing: 0
  45. antialiasing: true
  46.  
  47. anchors.fill: parent
  48. anchors.centerIn: parent
  49.  
  50. GridView
  51. {
  52. id: ueProductGridView
  53.  
  54. antialiasing: true
  55.  
  56. clip: true
  57.  
  58. Layout.fillWidth: true
  59. Layout.fillHeight: true
  60.  
  61. cellWidth: ueProductGridView.width/5//144
  62. cellHeight: ueProductGridView.height/3//144
  63.  
  64. delegate: UeProductSelectorDelegate
  65. {
  66. id: ueProductSelectorDelegate
  67.  
  68. ueParamProductImage: "image://ueProductsModel/"+model.ueRoleProductImage
  69. ueParamProductName: model.ueRoleProductName
  70. ueParamProductPriceSell: model.ueRoleProductPriceSell
  71. ueParamProductCurrentStock: ueCurrentStockModel.ueProductCurrentStockCumulative(model.ueRoleProductId)
  72. } // delegate
  73.  
  74. Component.onCompleted:
  75. {
  76. model=ueProductsModel;
  77. model.ueFetchAllProducts();
  78. ueProductSelectorOpacityAnimator.running=true;
  79. } // Component.onCompleted
  80. } // GridView
  81. } // ColumnLayot
  82. } // Rectangle
  83.  
  84. Connections
  85. {
  86. target: ueCategorySelector
  87.  
  88. onUeSignalStartProductSelectorAnimation:
  89. {
  90. ueProductSelectorOpacityAnimator.running=true;
  91. }
  92. } // Connections
  93.  
  94. Connections
  95. {
  96. target: ueProductSearcher
  97.  
  98. onUeSignalFilterProducts:
  99. {
  100. ueProductGridView.model.ueFilterProducts(pattern);
  101. } // onUeSignalFilterProducts
  102.  
  103. onUeSignalReloadAllProducts:
  104. {
  105. ueProductGridView.model.ueFetchAllProducts();
  106. } // onUeSignalReloadAllProducts
  107. } // Connections
  108. } // Item
To copy to clipboard, switch view to plain text mode 
And here is its GridView's delegate:
Qt Code:
  1. import QtQuick 2.5
  2. import QtQuick.Layouts 1.2
  3.  
  4. Rectangle
  5. {
  6. //RESOLVED: current stock always 0
  7. //RESOLVED: show price
  8. //BUG: change product's background according to current stock (red: currenstock<=20, disabled/greyed: currenstock<=0)
  9. //TODO: handle service prodcuts (i.e., products which have not connection to stock)
  10.  
  11. property string ueParamProductImage: ""
  12. property string ueParamProductName: ""
  13. property string ueParamProductPriceSell: ""
  14. property string ueParamProductCurrentStock: ""
  15.  
  16. radius: 16
  17.  
  18. clip: true
  19.  
  20. width: ueProductGridView.cellWidth-8
  21. height: ueProductGridView.cellHeight-8
  22.  
  23. border.color: "#4682b4"
  24.  
  25. antialiasing: true
  26.  
  27. gradient: Gradient
  28. {
  29. GradientStop
  30. {
  31. position: 0
  32. color: "#000000"
  33.  
  34. ParallelAnimation on color
  35. {
  36. id: ueProductSelectorDelegateMouseAreaAnimation
  37.  
  38. loops: 1
  39. running: false
  40.  
  41. ColorAnimation
  42. {
  43. from: "#4682b4"
  44. to: "#000000"
  45. duration: 100
  46. } // ColorAnimation
  47. } // ParallelAnimation
  48. } // GradientStop
  49.  
  50. GradientStop
  51. {
  52. position: 1
  53. color: "#ffffff"
  54. } // GradientStop
  55. } // Gradient
  56.  
  57. MouseArea
  58. {
  59. id: ueDelegateMouseArea
  60.  
  61. anchors.fill: parent
  62.  
  63. onClicked:
  64. {
  65. var selectedIndex=ueProductGridView.currentIndex=index;
  66.  
  67. ueProductSelectorDelegateMouseAreaAnimation.running=true;
  68. ueProductGridView.currentIndex=index;
  69.  
  70. ueOrdersModel.ueAddOrder(ueProductGridView.model.get(selectedIndex).ueRoleProductId,
  71. 1);
  72. } // onClicked
  73. } // MouseArea
  74.  
  75. ColumnLayout
  76. {
  77. anchors.fill: parent
  78.  
  79. antialiasing: true
  80.  
  81. spacing: 8
  82.  
  83. RowLayout
  84. {
  85. Layout.fillWidth: true
  86. Layout.fillHeight: true
  87. Layout.margins: 8
  88.  
  89. antialiasing: true
  90.  
  91. spacing: 8
  92.  
  93. Image
  94. {
  95. Layout.fillWidth: false
  96. Layout.fillHeight: true
  97. Layout.alignment: Qt.AlignLeft|Qt.AlignTop
  98.  
  99. fillMode: Image.PreserveAspectFit
  100.  
  101. horizontalAlignment: Image.AlignHCenter
  102. verticalAlignment: Image.AlignVCenter
  103.  
  104. antialiasing: true
  105. source: ueParamProductImage
  106. } // Image
  107.  
  108. Text
  109. {
  110. Layout.fillWidth: true
  111. Layout.fillHeight: true
  112. Layout.alignment: Qt.AlignLeft|Qt.AlignTop
  113. Layout.margins: 8
  114.  
  115. color: "steelblue"
  116.  
  117. text: ueParamProductName
  118. wrapMode: Text.WordWrap
  119. textFormat: Text.RichText
  120.  
  121. font.pointSize: 10
  122. font.bold: true
  123. style: Text.Normal
  124.  
  125. horizontalAlignment: Text.AlignLeft
  126. verticalAlignment: Text.AlignTop
  127. } // Text
  128. } // RowLayout
  129.  
  130. RowLayout
  131. {
  132. Layout.fillWidth: true
  133. Layout.fillHeight: true
  134. Layout.margins: 8
  135.  
  136. antialiasing: true
  137.  
  138. spacing: 8
  139.  
  140. Text
  141. {
  142. Layout.fillWidth: true
  143. Layout.fillHeight: true
  144. Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter
  145.  
  146. text: ueParamProductPriceSell
  147. wrapMode: Text.NoWrap
  148. textFormat: Text.RichText
  149.  
  150. font.pointSize: 10
  151. font.bold: true
  152. style: Text.Normal
  153.  
  154. horizontalAlignment: Text.AlignLeft
  155. verticalAlignment: Text.AlignVCenter
  156. } // Text
  157.  
  158. Text
  159. {
  160. Layout.fillWidth: true
  161. Layout.fillHeight: true
  162. Layout.alignment: Qt.AlignRight|Qt.AlignVCenter
  163.  
  164. text: ueParamProductCurrentStock
  165. wrapMode: Text.NoWrap
  166. textFormat: Text.RichText
  167.  
  168. font.pointSize: 10
  169. font.bold: true
  170. style: Text.Normal
  171.  
  172. horizontalAlignment: Text.AlignRight
  173. verticalAlignment: Text.AlignVCenter
  174. } // Text
  175. } // RowLayout
  176. } // ColumnLayout
  177.  
  178. transform:
  179. [
  180. Rotation
  181. {
  182. id: plateRotation
  183.  
  184. angle: -90
  185. axis { x: 0; y: 1; z: 0 }
  186. origin.x: -200
  187. origin.y: 0
  188. }
  189. ] // transform
  190.  
  191. SequentialAnimation
  192. {
  193. id: addAnimation
  194.  
  195.  
  196. PauseAnimation
  197. {
  198. duration: Math.random()*2000
  199. }
  200.  
  201. NumberAnimation
  202. {
  203. target: plateRotation
  204. property: "angle"
  205. to: 0
  206. duration: 1000
  207. //easing.type: Easing.InOutQuad
  208. }
  209. }
  210.  
  211. SequentialAnimation
  212. {
  213. id: removeAnimation
  214.  
  215.  
  216. PropertyAction
  217. {
  218. target: ueProductSelectorDelegate
  219. property: "GridView.delayRemove"
  220. value: true
  221. }
  222.  
  223. NumberAnimation
  224. {
  225. target: ueProductSelectorDelegate
  226. property: "scale"
  227. to: 0
  228. duration: 1000
  229. //easing.type: Easing.InOutQuad
  230. }
  231.  
  232. PropertyAction
  233. {
  234. target: ueProductSelectorDelegate
  235. property: "GridView.delayRemove"
  236. value: false
  237. }
  238. }
  239.  
  240. GridView.onAdd:
  241. {
  242. print("onAdd");
  243. addAnimation.start();
  244. }
  245.  
  246. GridView.onRemove:
  247. {
  248. print("onRemove");
  249. removeAnimation.start();
  250. }
  251. } // Rectangle
To copy to clipboard, switch view to plain text mode 
Now, animations inside delegate were taken from https://www.youtube.com/watch?v=VAhLnJc5iEY because I am still learning effects and I wanted to be sure effects work. Now, GridView has model, based on QSqlQueryModel and fetching data from database works like a charm! Now, if I comment QML code regarding animations/effect, products are placed into GridView perfectly - I can select them, scroll up and down, search inside them, ... But, I if apply effects/animations, the GridView is NOT empty, because I get debug messages from QSqlQueryModel while scrolling, but I think they are simply not visible. Why?!