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

Code:

---

/*
///    \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.colNum, 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}
        }
    ]
}

---

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

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