+ Reply to Thread
Results 1 to 3 of 3

Thread: scrollView scrollBars

  1. #1
    Join Date
    Jun 2016
    Posts
    97
    Thanks
    18
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11

    Default scrollView scrollBars

    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 

  2. #2
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    3,117
    Thanks
    194
    Thanked 491 Times in 481 Posts
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows Android

    Default Re: scrollView scrollBars

    In C++ this is accomplished with QWidget::setContentsMargins(). I'm not a QML user, but I am sure the same would work there.
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.

  3. #3
    Join Date
    Jun 2016
    Posts
    97
    Thanks
    18
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11

    Default Re: scrollView scrollBars

    The issue was reported as QTBUG-31299

    @d_stranz this will not work for QML

    SOLN: The work around that I came up with for creating a margin on the right side of the content item in a scroll view was by manipulating its delegate component. I created a blank column on the right side of the delegate shrunk it down set the color to what I needed. The blank column in the delegated pushed the content area to the side of my frame. By adjusting the width of the column in the delegate I was able to create a margin

  4. The following user says thank you to jfinn88 for this useful post:

    d_stranz (19th June 2017)

+ Reply to Thread

Similar Threads

  1. Replies: 0
    Last Post: 9th October 2015, 07:31
  2. [SOLVED]Scrolling through ScrollView with keys
    By TristanV in forum Qt Quick
    Replies: 1
    Last Post: 22nd June 2015, 23:36
  3. Overriding ScrollView onWheel()
    By oberlus in forum Qt Quick
    Replies: 2
    Last Post: 13th July 2013, 20:37
  4. implementing 'scrollview'
    By rishiraj in forum Newbie
    Replies: 1
    Last Post: 18th December 2008, 12:23
  5. filling scrollview
    By illuzioner in forum Qt Programming
    Replies: 1
    Last Post: 17th February 2006, 22:00

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