Customizing contentItem of ScrollBar

mzimmers

Hi all -

I'm trying to build a screen with the following code (unnecessary stuff removed for brevity):

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

import Manager

ApplicationWindow {
    id: mainWindow
    width: 640
    height: 480
    visible: true

    ColumnLayout {

        // a bunch of other stuff
        
        ScrollView {
            id: scrollView
            property real scrollerWidth: 12
            Layout.preferredHeight: 200
            Layout.preferredWidth: 400
            Layout.alignment: Qt.AlignHCenter
            
            TextArea {
                width: scrollView.width - (scrollView.scrollerWidth * 2)
                text: manager.replyData // manager is a model
            }
            ScrollBar.vertical: ScrollBar {
                x: scrollView.width
                height: scrollView.availableHeight
                policy: ScrollBar.AlwaysOn
                contentItem: Rectangle {} // <== this line causes problems.
            }
        }
    }
}

which produces something like this (just fine):

But I want to customize the contentItem (change the color, add a radius to it, change the background). Any attempts to do so, however, produce an unresponsive ScrollBar (the content item size doesn't change, and when I hover over the ScrollBar, I get a message "Unable to assign [undefined] to int."

Obviously, I'm missing something in the Rectangle code, but I've tried several things (height, implicitHeight, etc) and nothing seems to help. Can someone see what I'm doing wrong here?

Thanks...

JoeCFD

@mzimmers
This is what I did

            // Gutter/Trough
            background: Rectangle {
                id:  gutter
                implicitWidth: 
                color: 
            }

            // Scroll Thumb
            contentItem: Rectangle {
                id: thumb
                implicitWidth: 
                radius: 
                color: 
            }

mzimmers

@JoeCFD I've tried setting those values; it doesn't change the behavior.

I get the impression that somehow, the ScrollBar isn't properly associated with the TextView, but I don't know how to fix it.

JoeCFD

@mzimmers
This code works on Ubuntu 22.04 with Qt 6,5

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    id: mainWindow
    width: 640
    height: 480
    visible: true

    ColumnLayout {

        // a bunch of other stuff
        
        ScrollView {
            id: scrollView
            property real scrollerWidth: 12
            Layout.preferredHeight: 200
            Layout.preferredWidth: 400
            Layout.alignment: Qt.AlignHCenter
            
            TextArea {
                width: scrollView.width - (scrollView.scrollerWidth * 2)
                text: "ABBBBBB\nBBBBBBBBBBB\nBBBBBBBBB\nBBBBBBB\nBBBBBB\nBBBB\nBBBBBBBBB\nBBBB\nBBBBBBBBBB\nBBBBBBBBBBBBBBBBBBBBBB"
            }
         
            ScrollBar.vertical: ScrollBar {
                x: scrollView.width
                height: scrollView.availableHeight
                policy: ScrollBar.AlwaysOn
                contentItem: Rectangle {
                    id: thumb
                    implicitWidth: 10
                    radius: 5
                    color: "#000000"
                }
            }
        }
    }
}

mzimmers

@JoeCFD wow...it absolutely does not work on Windows 10 with Qt 6.4.3.

Amazing. I guess it's time for a bug report, but before I do, I think I'll try a few different styles. Are you using Fusion (the default for Linux)?

EDIT:

I just tried Fusion (on Windows) and it works fine. Sheesh...

JoeCFD

@mzimmers I simply use command qml to test it without any C++ code.

mzimmers

Update: I just installed Qt 6.6.0 and built my app. Still have the same problem, but now, I get an error:

QML Rectangle: The current style does not support customization of this control (property: "background" item: QQuickRectangle(0x193c8278c30, parent=0x0, geometry=0,0 0x0)). Please customize a non-native style (such as Basic, Fusion, Material, etc). For more information, see: https://doc.qt.io/qt-6/qtquickcontrols2-customize.html#customization-reference

Following the link, I see this note:

Note: The macOS and Windows styles are not suitable for customizing. [...]

So...I guess I won't be using the Windows style (which is entirely fine by me). So the takeaway is, if you're going to customize controls, choose one of the custom styles.