Is there a way to set a margin between the scrollBar and the content item of the scrollView? I want to put a space between the content area of the ScrollView and the scrollBar. I used scrollView stye to customize my scrollBars but cant set an off set for the anchors to create a space/margin between the content item and the scrollBars....


Qt Code:
  1. /*
  2. /// \file BScrolView.qml
  3. /// \brief
  4. ///
  5. /// Copyright (c) 2017 BIT USA, INC, A BIT Group Company All rights reserved
  6. */
  7.  
  8.  
  9. import QtQuick 2.3
  10. import QtQuick.Window 2.1
  11. import QtQuick.Controls 1.1
  12. import QtQuick.Controls.Styles 1.0
  13. import QtGraphicalEffects 1.0
  14.  
  15.  
  16. /*
  17.   Note: Should use Common for Sorted list views.
  18.   See slide 12: Scrolling Guidelines -- View Results.
  19.   1. Vertical gray scrolling bar, proportional to size of results.
  20.   2. Grab data from C++
  21. */
  22.  
  23. ScrollView {
  24. id: root
  25. objectName: "bScrollView"
  26. flickableItem.interactive: true
  27. style: edit_scrollbar_style
  28. //verticalScrollBarPolicy: Qt.ScrollBarAsNeeded
  29. // anchors {
  30. // centerIn: parent
  31. // }
  32.  
  33. property int rows: BScrollView_context.getRows()
  34. property int columns: BScrollView_context.getColumns()
  35. property int rowHeight: BScrollView_context.getRowHeight()
  36.  
  37.  
  38. function qmlScrollRefresh(){
  39. console.log("Got to scroll refresh...");
  40. dataScroll.model = 0;
  41. dataScroll.model = 1;
  42. }
  43.  
  44. Component{
  45. id: edit_scrollbar_style
  46. ScrollViewStyle {
  47. //transientScrollBars: true
  48. handle: Item {
  49. id: scrollBar
  50. implicitWidth: 30
  51. implicitHeight: 30
  52. Rectangle {
  53. color: "#424246"
  54. radius: 8
  55. //width: parent.width
  56. //border.width: 3
  57. //border.color: "white"
  58. anchors {
  59. right: parent.right
  60. fill: parent
  61. left: parent.left
  62. leftMargin: 20
  63. }
  64. }
  65. }
  66. decrementControl: Rectangle{
  67. implicitWidth: 7
  68. implicitHeight: 0
  69. color:"transparent"
  70. }
  71. incrementControl: Rectangle{
  72. implicitWidth: 7
  73. implicitHeight: 0
  74. color:"transparent"
  75. }
  76. scrollBarBackground: Rectangle {
  77. implicitWidth: 7
  78. implicitHeight: 30 //root.height
  79. color:"transparent"
  80.  
  81. }
  82. }
  83. }
  84.  
  85. DNAe_Color{
  86. id: colorWheel
  87. }
  88.  
  89.  
  90. BListView {
  91. id: sortIndicatorArea
  92. height: 5
  93. width: root.width
  94. rectCount: 7
  95. anchors {
  96. top: parent.top
  97. bottom: columnHeaders.top
  98. }
  99.  
  100. }
  101.  
  102. Rectangle {
  103. id: columnHeaders
  104. height: rowHeight - 30
  105. width: root.width
  106. anchors {
  107. // top: sortIndicatorArea.bottom
  108. top: parent.top
  109. topMargin: 5
  110. }
  111. Row {
  112. Repeater {
  113. id: headerRepeater
  114. model: columns
  115. BButton {
  116. width: root.width / 7
  117. height: rowHeight - 30
  118. btnTextColor: colorWheel.dnae_pantone317c
  119. bgColor: colorWheel.dnae_pantone433c
  120. btnText: BScrollView_context.getColumnName(index)
  121. borderColor: "transparent"
  122. bgColorOnPressed: "transparent"
  123. onClicked: {
  124. BScrollView_context.columnSort(index);
  125. //redraw sortIndicatorArea Repeater
  126. sortIndicatorArea.rectRepeater.model = 0;
  127. sortIndicatorArea.rectRepeater.model = columns;
  128. }
  129. }
  130. }
  131. }
  132. }
  133.  
  134. Component {
  135. id: sampleDelegate
  136. // Will be BScrollViewHeader
  137. Column {
  138. id: rectCol
  139. spacing: BScrollView_context.getSecondStandardSpacing();
  140. Repeater {
  141. id: rowRepeater
  142. model: rows
  143. property int rowNum: index
  144. Row {
  145. id: row
  146. Repeater {
  147. id: colRepeater
  148. model: columns
  149. property int colNum: index
  150. Rectangle {
  151. id: cell
  152. width: root.width / 7
  153. height: rowHeight
  154. color: colorWheel.dnae_pantone320c
  155. Text {
  156. id: cell_text
  157. color: colorWheel.dnae_white
  158. text: qsTr(BScrollView_context.getDataAt(colRepeater.colNum, index))
  159. horizontalAlignment: Text.AlignHCenter
  160. verticalAlignment: Text.AlignVCenter
  161. anchors {
  162. fill: parent
  163. }
  164. font {
  165. family: colorWheel.dnae_montRegFont;
  166. pointSize: 14.5;
  167. }
  168. wrapMode: Text.Wrap
  169. }
  170. }
  171. }
  172. }
  173. }
  174. }
  175. }
  176.  
  177. ListView {
  178. id: dataScroll
  179. // height: root.height - BListView_context.getStandardComponentSpacing()
  180. width: root.width
  181. model: 1 //BListModel{}
  182. delegate: sampleDelegate
  183. focus: true
  184. clip: true
  185. anchors {
  186. top: parent.top
  187. // topMargin: rowHeight-30//BScrollView_context.getSecondStandardSpacing()
  188. // topMargin: rowHeight-30//BScrollView_context.getSecondStandardSpacing()
  189. topMargin: columnHeaders.height + sortIndicatorArea.height + BScrollView_context.getSecondStandardSpacing()
  190. bottom: root.bottom
  191. }
  192. Image {
  193. height: 500
  194. rotation: 180
  195. source: "qrc:/Images/Gradient.png"
  196. //fillMode: Image.PreserveAspectFit
  197. anchors {
  198. //top: dataScroll.top
  199. bottom: dataScroll.bottom
  200. }
  201. }
  202. Rectangle{
  203. id: decrementRect
  204. width: 119 //31.5mm
  205. height: 45 //12mm
  206. visible: true
  207. color:colorWheel.dnae_pantone433c
  208. anchors {
  209. horizontalCenter: dataScroll.horizontalCenter
  210. bottom: dataScroll.bottom
  211. }
  212. MouseArea{
  213. id: decrementRectMouseArea
  214. anchors.fill: parent
  215. onClicked : { dataScroll.decrementCurrentIndex(); }
  216. onPressed : { decrementRect.state = "PRESSED" }
  217. onReleased : { decrementRect.state = "RELEASED" }
  218. }
  219.  
  220. Image {
  221. id: decrementImage2
  222. source: "qrc:/Images/Scroll down.svg"
  223. fillMode: Image.PreserveAspectFit
  224. width: 30
  225. height: 30
  226. anchors {
  227. centerIn: parent
  228. }
  229. }
  230. ColorOverlay {
  231. id: buttonColor_overlay
  232. anchors.fill: decrementImage2
  233. source: decrementImage2
  234. color: colorWheel.dnae_white
  235. }
  236.  
  237. states: [
  238. State {
  239. name: "PRESSED"
  240. PropertyChanges { target: decrementRect; color: colorWheel.dnae_white}
  241. },
  242. State {
  243. name: "RELEASED"
  244. PropertyChanges { target: decrementRect; color: colorWheel.dnae_pantone433c}
  245. }
  246. ]
  247.  
  248. transitions: [
  249. Transition {
  250. from: "PRESSED"
  251. to: "RELEASED"
  252. ColorAnimation { target: decrementRect; duration: 100}
  253. },
  254. Transition {
  255. from: "RELEASED"
  256. to: "PRESSED"
  257. ColorAnimation { target: decrementRect; duration: 100}
  258. }
  259. ]
  260. }
  261. }
  262.  
  263.  
  264. states: [
  265. State {
  266. name: "PRESSED"
  267. //PropertyChanges { target: bg; color: "lightblue"}
  268. PropertyChanges { target: sampleDelegate; color: dnae_white}
  269. },
  270. State {
  271. name: "RELEASED"
  272. PropertyChanges { target: sampleDelegate; color: dnae_pantone315c}
  273. }
  274. ]
  275.  
  276. transitions: [
  277. Transition {
  278. from: "PRESSED"
  279. to: "RELEASED"
  280. ColorAnimation { target: sampleDelegate; duration: 100}
  281. },
  282. Transition {
  283. from: "RELEASED"
  284. to: "PRESSED"
  285. ColorAnimation { target: sampleDelegate; duration: 100}
  286. }
  287. ]
  288. }
To copy to clipboard, switch view to plain text mode