scrollView scrollBars

[jfinn88]

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....




/*
/// \file BScrolView.qml
/// \brief
///
/// Copyright (c) 2017 BIT USA, INC, A BIT Group Company All rights reserved
*/


import QtQuick 2.3
import QtQuick.Window 2.1
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.0
import QtGraphicalEffects 1.0


/*
Note: Should use Common for Sorted list views.
See slide 12: Scrolling Guidelines -- View Results.
1. Vertical gray scrolling bar, proportional to size of results.
2. Grab data from C++
*/

ScrollView {
id: root
objectName: "bScrollView"
flickableItem.interactive: true
style: edit_scrollbar_style
//verticalScrollBarPolicy: Qt.ScrollBarAsNeeded
// anchors {
// centerIn: parent
// }

property int rows: BScrollView_context.getRows()
property int columns: BScrollView_context.getColumns()
property int rowHeight: BScrollView_context.getRowHeight()


function qmlScrollRefresh(){
console.log("Got to scroll refresh...");
dataScroll.model = 0;
dataScroll.model = 1;
}

Component{
id: edit_scrollbar_style
ScrollViewStyle {
//transientScrollBars: true
handle: Item {
id: scrollBar
implicitWidth: 30
implicitHeight: 30
Rectangle {
color: "#424246"
radius: 8
//width: parent.width
//border.width: 3
//border.color: "white"
anchors {
right: parent.right
fill: parent
left: parent.left
leftMargin: 20
}
}
}
decrementControl: Rectangle{
implicitWidth: 7
implicitHeight: 0
color:"transparent"
}
incrementControl: Rectangle{
implicitWidth: 7
implicitHeight: 0
color:"transparent"
}
scrollBarBackground: Rectangle {
implicitWidth: 7
implicitHeight: 30 //root.height
color:"transparent"

}
}
}

DNAe_Color{
id: colorWheel
}


BListView {
id: sortIndicatorArea
height: 5
width: root.width
rectCount: 7
anchors {
top: parent.top
bottom: columnHeaders.top
}

}

Rectangle {
id: columnHeaders
height: rowHeight - 30
width: root.width
anchors {
// top: sortIndicatorArea.bottom
top: parent.top
topMargin: 5
}
Row {
Repeater {
id: headerRepeater
model: columns
BButton {
width: root.width / 7
height: rowHeight - 30
btnTextColor: colorWheel.dnae_pantone317c
bgColor: colorWheel.dnae_pantone433c
btnText: BScrollView_context.getColumnName(index)
borderColor: "transparent"
bgColorOnPressed: "transparent"
onClicked: {
BScrollView_context.columnSort(index);
//redraw sortIndicatorArea Repeater
sortIndicatorArea.rectRepeater.model = 0;
sortIndicatorArea.rectRepeater.model = columns;
}
}
}
}
}

Component {
id: sampleDelegate
// Will be BScrollViewHeader
Column {
id: rectCol
spacing: BScrollView_context.getSecondStandardSpacing();
Repeater {
id: rowRepeater
model: rows
property int rowNum: index
Row {
id: row
Repeater {
id: colRepeater
model: columns
property int colNum: index
Rectangle {
id: cell
width: root.width / 7
height: rowHeight
color: colorWheel.dnae_pantone320c
Text {
id: cell_text
color: colorWheel.dnae_white
text: qsTr(BScrollView_context.getDataAt(colRepeater.col Num, index))
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors {
fill: parent
}
font {
family: colorWheel.dnae_montRegFont;
pointSize: 14.5;
}
wrapMode: Text.Wrap
}
}
}
}
}
}
}

ListView {
id: dataScroll
// height: root.height - BListView_context.getStandardComponentSpacing()
width: root.width
model: 1 //BListModel{}
delegate: sampleDelegate
focus: true
clip: true
anchors {
top: parent.top
// topMargin: rowHeight-30//BScrollView_context.getSecondStandardSpacing()
// topMargin: rowHeight-30//BScrollView_context.getSecondStandardSpacing()
topMargin: columnHeaders.height + sortIndicatorArea.height + BScrollView_context.getSecondStandardSpacing()
bottom: root.bottom
}
Image {
height: 500
rotation: 180
source: "qrc:/Images/Gradient.png"
//fillMode: Image.PreserveAspectFit
anchors {
//top: dataScroll.top
bottom: dataScroll.bottom
}
}
Rectangle{
id: decrementRect
width: 119 //31.5mm
height: 45 //12mm
visible: true
color:colorWheel.dnae_pantone433c
anchors {
horizontalCenter: dataScroll.horizontalCenter
bottom: dataScroll.bottom
}
MouseArea{
id: decrementRectMouseArea
anchors.fill: parent
onClicked : { dataScroll.decrementCurrentIndex(); }
onPressed : { decrementRect.state = "PRESSED" }
onReleased : { decrementRect.state = "RELEASED" }
}

Image {
id: decrementImage2
source: "qrc:/Images/Scroll down.svg"
fillMode: Image.PreserveAspectFit
width: 30
height: 30
anchors {
centerIn: parent
}
}
ColorOverlay {
id: buttonColor_overlay
anchors.fill: decrementImage2
source: decrementImage2
color: colorWheel.dnae_white
}

states: [
State {
name: "PRESSED"
PropertyChanges { target: decrementRect; color: colorWheel.dnae_white}
},
State {
name: "RELEASED"
PropertyChanges { target: decrementRect; color: colorWheel.dnae_pantone433c}
}
]

transitions: [
Transition {
from: "PRESSED"
to: "RELEASED"
ColorAnimation { target: decrementRect; duration: 100}
},
Transition {
from: "RELEASED"
to: "PRESSED"
ColorAnimation { target: decrementRect; duration: 100}
}
]
}
}


states: [
State {
name: "PRESSED"
//PropertyChanges { target: bg; color: "lightblue"}
PropertyChanges { target: sampleDelegate; color: dnae_white}
},
State {
name: "RELEASED"
PropertyChanges { target: sampleDelegate; color: dnae_pantone315c}
}
]

transitions: [
Transition {
from: "PRESSED"
to: "RELEASED"
ColorAnimation { target: sampleDelegate; duration: 100}
},
Transition {
from: "RELEASED"
to: "PRESSED"
ColorAnimation { target: sampleDelegate; duration: 100}
}
]
}

[d_stranz]

In C++ this is accomplished with QWidget::setContentsMargins(). I'm not a QML user, but I am sure the same would work there.

[jfinn88]

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