Search code examples
qmlscrollview

ScrollView available width if scrollbar showig


I have a scrollview which contains a flow which MAY contain many rectangles growing well beyond screen size. My rectangles adjust their width to the width of the ScrollView (their parent).

When no scrollbar is present this works fine, but when the scrollbar appears the rectangles overlap the scrollbar.

How can my rectangles detect if their parent (ScrollView) is showing a scrollbar, and how would they know by how many pixels to reduce their width? The ScrollView component doesn't seem to expose a property for width less scrollbar width.


Solution

  • The widely implemented style nowadays is for scroll bars to appear only when needed and to overlay the content of scroll areas. You normally wouldn't worry about the overlap you are seeing.

    If you want to go old school and have an always visible scrollbar that doesn't overlay the content, you can use the ScrollBar component and the attached API it has with ScrollView. Instead of using the ScrollBars that ScrollView provides, you would attach new ones that you position manually outside of the contentItem instead of on top of it.

    This will be tricky to do but you can get the gist of how to accomplish it by looking at the "Customizing ScrollView" docs here:

    https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-scrollview