I have a QT application and need to custom my ListView ScrollBar, to have a Windows Look&Fell scroll, including top and bottom buttons (to scroll up or down when clicked)

As far as I know, all I can customize from ScrollBar is the contentItem and the background. There is no default way to add these top & bottom buttons. To add it manually

To add buttons at top & bottom I have added margins in the contentItem, so I have space for my buttons. But with that margin, the height of the contentItem is smaller and with a lot of elements in my ListView the handle is NOT visible...

Is it possible to have a minimum height for the contentItem? Is there any other way to have this 2 buttons?

Thanks in advance

Code:

Qt Code:
  1. import QtQuick 2.7
  2. import QtQuick.Controls 2.0
  3.  
  4. Item {
  5. anchors.fill: parent
  6.  
  7. MouseArea {
  8. anchors.fill: id_list
  9. onWheel: id_list.flick(0, wheel.angleDelta.y * 5)
  10. }
  11.  
  12. ListModel {
  13. id: listModel
  14. Component.onCompleted: {
  15. for (var i = 0; i < 1000; i++)
  16. append({ role_text: "Item " + i});
  17. }
  18. }
  19.  
  20. ListView {
  21. id: id_list
  22. anchors.fill: parent
  23.  
  24. interactive: false
  25. boundsBehavior: Flickable.StopAtBounds
  26. focus: true
  27.  
  28. Keys.onPressed: {
  29. if (event.key === Qt.Key_Up) id_list.flick(0, 500)
  30. else if (event.key === Qt.Key_Down) id_list.flick(0, -500)
  31. }
  32.  
  33. keyNavigationEnabled: true
  34.  
  35. model: listModel
  36. ScrollBar.vertical: ScrollBar {
  37. id: id_scroll
  38. interactive: true;
  39. policy: ScrollBar.AlwaysOn
  40. anchors { top: parent.top; topMargin: 0; bottom: parent.bottom; bottomMargin: 0; right: parent.right/*; rightMargin: -2*/}
  41.  
  42. contentItem: Item {
  43. implicitWidth: 11
  44. implicitHeight: 100
  45.  
  46. Rectangle {
  47. anchors { top: parent.top; topMargin: 13; bottom: parent.bottom; bottomMargin: 13; left: parent.left; leftMargin: -2; right: parent.right; rightMargin: -2}
  48. color: "green"
  49. }
  50. }
  51.  
  52. background: Item {
  53. implicitWidth: 11
  54. implicitHeight: id_scroll.height
  55.  
  56. Rectangle {
  57. anchors { top: parent.top; bottom: parent.bottom; bottomMargin: 0; left: parent.left; right: parent.right}
  58. color: "#ededed"
  59. }
  60.  
  61. Rectangle {
  62. anchors { top: parent.top; right: parent.right }
  63. height: 15; width: height
  64. color: "red"
  65. MouseArea {
  66. anchors.fill: parent
  67. onClicked: id_list.flick(0, 500)
  68. }
  69. }
  70. Rectangle {
  71. anchors { bottom: parent.bottom; right: parent.right }
  72. height: 15; width: height
  73. color: "red"
  74. MouseArea {
  75. anchors.fill: parent
  76. onClicked: id_list.flick(0, -500)
  77. }
  78. }
  79. }
  80. }
  81.  
  82. delegate: Rectangle {
  83. height: 40
  84. width: id_list.width
  85. color: "white"
  86. border { color: "black"; width: 1 }
  87. TextEdit {
  88. anchors.centerIn: parent
  89. id: id_text
  90. text: role_text;
  91. selectByMouse: true;
  92. readOnly: true;
  93. persistentSelection: true
  94. }
  95. }
  96. }
  97. }
To copy to clipboard, switch view to plain text mode