Unable to assign [undefined] to int during customizing ScrollBar

[Kamichanw]

Here is code. This code is adapted from qt doc.

import QtQuick
import QtQuick.Controls

Window {
    width: 300
    height: 300
    visible: true

    ScrollView {
        id: control
        anchors.fill: parent
        Text {
            text: "ABC"
            font.pointSize: 224
        }

        ScrollBar.vertical: ScrollBar {
            height: control.availableHeight
            parent: control
            x: control.mirrored ? 0 : control.width - width
            y: control.topPadding
            active: true
            contentItem: Rectangle {
                implicitWidth: 6
                implicitHeight: 100
                radius: width / 2
                color: "#c2f4c6"
            }
        }
    }
}

When I hovered scroll bar, an error occurred

qrc:/qt-project.org/imports/QtQuick/Controls/Windows/ScrollBar.qml:33:49: Unable to assign [undefined] to int

And I cannot open qrc:/qt-project.org/imports/QtQuick/Controls/Windows/ScrollBar.qml, so I have no idea about the reason why I meet this problem.

[sierdzio]

@Kamichanw Which line is 33?

[Lahearle]

@Kamichanw

You have an integer number (like size) that is not defined properly.

if it's not defined, define it

if it is defined, make sure it's defined properly

radius width is not defined, it's width(0) divided by 2
for x and Y I would use anchors.right: parent.right
control.width - width makes no sense math wise, x position being the width of the scrollview box makes no sense

just rewrite it until you get it working to help yourself understand

[Kamichanw]

@sierdzio I don't know. As you can see, the error message shows that error occurred in qrc:/qt-project.org/imports/QtQuick/Controls/Windows/ScrollBar.qml which is a qt internal file.

[Kamichanw]

@Lahearle I've tried to define width, but it still didn't work. In fact, even I just set an empty rectangle as contentItem of ScrollBar, like this:

contentItem: Rectangle {}

The error occurred still occurred when I hovered the ScrollBar.

[LS-KS]

@Kamichanw ScrollView is a Layout. So please try

Layout.preferredWidth

instead of width

[Kamichanw]

@LS-KS I cannot understand... The width we discussed earlier is the width of ScrollBar. And ScrollBar is assigned to ScrollBar.vertical which is a attached property of ScrollView. It shouldn't be a child item of ScrollView.

What's more, when the Rectangle is assigned to contentItem, it doesn't have attached property named Layout.

[sierdzio]

@Kamichanw said in Unable to assign [undefined] to int during customizing ScrollBar:

@sierdzio I don't know. As you can see, the error message shows that error occurred in qrc:/qt-project.org/imports/QtQuick/Controls/Windows/ScrollBar.qml which is a qt internal file.

Well, but looking at it will tell you which property assignment has failed. Then you will know which object in your code is undefined.

[JonB]

@Kamichanw
If you cannot track down which item it is in your code, maybe try commenting each one out till you find out?

[LS-KS]

@Kamichanw
I never used that ScrollBar Item so I may be wrong.
In general when you place something into a Layout object (like ScrollView) you can't use width and height but must use Layout -properties like preferredWidth etc.
You used width in your calculations.

[Kamichanw]

@JonB Of course, I have tried this strategy. However, even I commented all code in Rectangle, the problem persists.

[Kamichanw]

@LS-KS As you can see in qt doc, it uses width as well.

[Kamichanw]

@sierdzio Yes, I hope to open that file as well, but when I click the hyperlink in QML debugger console, it shows that

I also tried to search ScrollBar.qml in qt source directory, but there are too many file named ScrollBar.qml so that I don't know where to start.

[JonB]

@Kamichanw
Is there a directory something like QtQuick\Controls\Windows in the source tree? If so, how many ScrollBar.qml files are there in that directory?

[Kamichanw]

Hey guys, I opened C:\Qt\6.4.2\Src\qtdeclarative\src\quickcontrols2\windows\ScrollBar.qml . I think it might be the correct ScrollBar.qml. The line 33 uses contentITem.transitionDuration. But I cannot set in my file directly.

NativeStyle.ScrollBar {
        // Fade a hovered-looking version of the handle
        // on top of the default handle when hovering it
        x: contentItem.x
        y: contentItem.y
        z: 1
        width: contentItem.width
        height: contentItem.height
        control: controlRoot
        subControl: NativeStyle.ScrollBar.Handle
        overrideState: NativeStyle.StyleItem.AlwaysHovered
        opacity: controlRoot.hovered || control.pressed ? 1 : 0
        visible: contentItem instanceof NativeStyle.StyleItem--
        Behavior on opacity { NumberAnimation { duration: contentItem.transitionDuration } } // line 33
    }

[GrecKo]

@Kamichanw You should not customize native styles.
https://www.youtube.com/watch?v=mImptIBmWW0&t=1179s

[Kamichanw]

@GrecKo But how can I customize ScrollBar of ScrollView? Should I have to implement my own ScrollView?