Results 1 to 5 of 5

Thread: QML: ScrollView with GridView inside: adjust cell to available space (scroll?)

  1. #1
    Join Date
    Apr 2013
    Posts
    61
    Qt products
    Qt4
    Platforms
    Windows

    Default QML: ScrollView with GridView inside: adjust cell to available space (scroll?)

    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

  2. #2
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: QML: ScrollView with GridView inside: adjust cell to available space (scroll?)

    Maybe try something like this
    Qt Code:
    1. GridView {
    2. readonly property bool scrollBarVisible: contentHeight > height
    3. readonly property real visibleWidth: width - (scrollBarVisible ? iScrollWidth : 0)
    4. readonly property read iSizeThumb: visibleWidth / 3
    5. }
    To copy to clipboard, switch view to plain text mode 

    Cheers,
    _

  3. #3
    Join Date
    Apr 2013
    Posts
    61
    Qt products
    Qt4
    Platforms
    Windows

    Default Re: QML: ScrollView with GridView inside: adjust cell to available space (scroll?)

    Thanks a lot for your help. I am afraid it still does not work with that...

    If scroll is visible due to low height and I make it disappear (increasing window height), only 2 columns appear in the grid (instead of the 3 from the beginning)

  4. #4
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: QML: ScrollView with GridView inside: adjust cell to available space (scroll?)

    What if you change the width of the gridview instead

    Qt Code:
    1. GridView {
    2. width: parent.width - (scrollBarVisible ? iScrollWidth : 0)
    3. iSizeThumb: width / 3
    4. }
    To copy to clipboard, switch view to plain text mode 

  5. #5
    Join Date
    Apr 2013
    Posts
    61
    Qt products
    Qt4
    Platforms
    Windows

    Default Re: QML: ScrollView with GridView inside: adjust cell to available space (scroll?)

    It seems to hang (not always) when scroll must appear (maybe a loop resizing?)...

    Qt Code:
    1. GridView {
    2. ...
    3. property bool scrollBarVisible: contentHeight > height
    4. width: parent.width - (scrollBarVisible ? scrollView.iScrollWidth : 0)
    5. property int iSizeThumb: width / 3
    6.  
    7. cellWidth: iSizeThumb; cellHeight: iSizeThumb
    8. delegate: Item {
    9. width: grid.cellWidth; height: grid.cellHeight
    10. Rectangle { color: colorR; anchors.fill: parent; anchors.margins: 2}
    11. }
    12. }
    To copy to clipboard, switch view to plain text mode 

Similar Threads

  1. Replies: 7
    Last Post: 24th June 2016, 11:52
  2. Replies: 9
    Last Post: 2nd July 2014, 12:21
  3. Replies: 7
    Last Post: 9th September 2013, 09:31
  4. Replies: 6
    Last Post: 7th November 2010, 15:17
  5. Long text inside a table cell
    By TheKing in forum Qwt
    Replies: 0
    Last Post: 15th December 2009, 21:35

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.