Hi,

I have a QML ScrollView with a GridView inside (rectangles in 3 columns) and I have a repaint problem when the scroll appears/disappears.

The window has fixed width (300) and variable height, so the scroll appears when window height is less than content height, of course.

My target is that the rectangles are completely visibles always (with or without scroll), expanded to the left when no scroll appears, and to the left of the scroll when it is visible. For that, I suppose I need to set the cell size depending on the scroll, for them to adjust the available space.

It works BUT just in the moment the scroll appears/disappears, there is a short window height range when the rectangles are not painted properly.

Here is my code, I have tried with other properties otions with no success...

Qt Code: 
  1. import QtQuick 2.5
  2. import QtQuick.Controls 1.3
  3. import QtQuick.Controls.Styles 1.4
  4.  
  5. Item {
  6.     id: idGrid
  7.  
  8.     property int iNumcolums: 3
  9.     property int iMarginGrid: 2
  10.  
  11.     ListModel {
  12.         id: appModel
  13.  
  14.         ListElement { colorR: "red"}
  15.         ListElement { colorR: "green" }
  16.         ListElement { colorR: "blue" }
  17.         ListElement { colorR: "cyan"}
  18.         ListElement { colorR: "yellow"}
  19.         ListElement { colorR: "blue" }
  20.         ListElement { colorR: "lightgray" }
  21.         ListElement { colorR: "red" }
  22.         ListElement { colorR: "green" }
  23.         ListElement { colorR: "blue" }
  24.         ListElement { colorR: "cyan" }
  25.         ListElement { colorR: "yellow" }
  26.         ListElement { colorR: "lightgray" }
  27.         ListElement { colorR: "blue" }
  28.     }
  29.  
  30.     ScrollView {
  31.  
  32.         id: scrollView
  33.  
  34.         anchors.top: parent.top
  35.         anchors.bottom: parent.bottom
  36.         anchors.left: parent.left
  37.         anchors.right: parent.right
  38.  
  39.         anchors.leftMargin: iMarginGrid
  40.         anchors.rightMargin: iMarginGrid
  41.  
  42.         property int scrollWidth: 10
  43.  
  44.         style: ScrollViewStyle {
  45.             id: sptScrollStyle
  46.  
  47.             property int iScrollWidth: 10
  48.  
  49.             handle: Rectangle {
  50.                 implicitWidth: iScrollWidth
  51.                 color: "gray"
  52.                 radius: 20
  53.             }
  54.             scrollBarBackground: Rectangle {
  55.                 implicitWidth: iScrollWidth
  56.                 color: "lightgray"
  57.                 radius: 20
  58.             }
  59.             decrementControl: Rectangle {
  60.                 implicitWidth: 0
  61.             }
  62.             incrementControl: Rectangle {
  63.                 implicitWidth: 0
  64.             }
  65.         }
  66.  
  67.         GridView {
  68.             id: grid
  69.  
  70.             width: parent.width; height: parent.height
  71.  
  72.             model: appModel
  73.  
  74.             property int iSizeThumb: scrollView.width/3
  75.  
  76.             cellWidth: iSizeThumb; cellHeight: iSizeThumb
  77.  
  78.             delegate: Item {
  79.                 width: grid.cellWidth; height: grid.cellHeight
  80.                 Rectangle { color: colorR; anchors.fill: parent; anchors.margins: 2}
  81.             }
  82.  
  83.             onHeightChanged: {
  84.  
  85. //                if ( height >= contentItem.height )
  86. //                    grid.iSizeThumb = scrollView.width/3
  87. //                else
  88. //                    grid.iSizeThumb = scrollView.width/3 - 3
  89.  
  90.                 if ((idSptGridThumbs.width - scrollView.scrollWidth) > width)
  91.                     grid.iSizeThumb = scrollView.width/3 - 3
  92.                 else
  93.                     grid.iSizeThumb = scrollView.width/3
  94.  
  95.             }
  96.         }
  97.     }
  98. }
To copy to clipboard, switch view to plain text mode 

Thanks in advance!

Diego