Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

ScrollBar right margin in a ListView



  • I'm confused with margins. How I'm supposed to attach the bar on a right side(without gap) and make a margin for all children(not just for a delegate Component) at the same time?

    My markup:

    ListView {
    	id: feedView
    	Layout.fillWidth: true
    	Layout.fillHeight: true
    	Layout.rightMargin: 10
    
    	delegate: {
    		/// I need rightMargin for all these children
    	}
    	ScrollBar.vertical: ScrollBar {
    		/// @xxx ...but not for bar!
    	}
    }
    


  • Setting delegate width should be fine. Like this:

    ListView {
        ...
        Layout.fillWidth: true
        ...
        delegate: Rectangle {
            width: ListView.view.width - (vsb.visible ? vsb.width : 0)
            ...
        }
        ScrollBar.vertical: ScrollBar {
            id: vsb
        }
    }
    


  • Hi @danilabagroff , subtract the margin value from the width of the delegate

    width: (List View Width) - (Margin Value)
    

    Here is the sample code:-

    ListView {
        id: lView
    
        width: 180
        height: 400
        model: 20
        spacing: 10
    
        delegate: Rectangle {
            width: lView.width - 20 //lView.width - (MarginValue)
            height: 40
            color: "transparent"
            border.color: "red"
            
            Text{
                text: index
                anchors.centerIn: parent
            }
        }
    
        ScrollBar.vertical: ScrollBar { id: scrollBar }
    }
    

    Sample Output:-

    0_1564032261415_f0295cb1-6873-42f0-8c6a-22729ec96fb5-image.png


Log in to reply