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

Custom qml module not found



  • Hello,
    I'm trying to create a custom set of components/controls to set things like color/style requirements. I've tried two methods that I've come across but have had no luck it getting things to work.
    The first was from this example on creating a custom style: https://doc.qt.io/qt-5/qtquickcontrols-flatstyle-example.html
    I can get the "QML Plugin" section working but unable to get the "Implementing Custom Controls" section working.

    My custom component, MmControl/ScrollBar.qml:

    /* ScrollBar.qml */
    import QtQuick 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Controls.impl 2.12
    import QtQuick.Templates 2.12 as T
    
    T.ScrollBar {
        id: control
    
        implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                                implicitContentWidth + leftPadding + rightPadding)
        implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                                 implicitContentHeight + topPadding + bottomPadding)
    
        padding: 2
        visible: control.policy !== T.ScrollBar.AlwaysOff
        active: true
        policy: T.ScrollBar.AlwaysOn
    
        contentItem: Rectangle {
            implicitWidth: control.interactive ? 6 : 2
            implicitHeight: control.interactive ? 6 : 2
    
            radius: 32
            color: "blue"
            opacity: 0.0
    
            states: State {
                name: "active"
                when: control.policy === T.ScrollBar.AlwaysOn || (control.active && control.size < 1.0)
                PropertyChanges { target: control.contentItem; opacity: 0.75 }
            }
    
            transitions: Transition {
                from: "active"
                SequentialAnimation {
                    PauseAnimation { duration: 450 }
                    NumberAnimation { target: control.contentItem; duration: 200; property: "opacity"; to: 0.0 }
                }
            }
        }
    }
    

    and the use else where in the code:

    ScrollBar.vertical: ScrollBar {
                    parent: control
                    x: control.width - width
                    y: control.topPadding
                    height: control.availableHeight
                    orientation: Qt.Vertical
                    contentItem: Rectangle {
                            implicitWidth: 10
                            implicitHeight: 100
                    }
    }
    

    But the ScrollBar is not blue or round (still the default white color with square edges). So it doesn't seen to use the custom module. I do have a qtquickcontrols2.conf file with Style=MmControl and a MmControl directory in the resource system at /MmControl.

    The Second example I found was this one: https://doc.qt.io/qt-5/qtqml-qmlextensionplugins-example.html
    I moved my ScrollBar to the import path and renamed it (imports/MmControl/VertScrollBarV1.qml) and created the qmldir file

    module MmControl
    VertScrollBar 1.0 VertScrollBarV1.qml
    

    And updated my .pro file:

    RESOURCES += imports/MmControl/VertScrollBarV1.qml imports/MmControl/qmldir
    

    And updated the file using the custom component:

    import MmControl 1.0
    ....
    ScrollBar.vertical: VertScrollBar {
                        parent: control
                        x: control.width - width
                        y: control.topPadding
                        height: control.availableHeight
                        orientation: Qt.Vertical
                        contentItem: Rectangle {
                            implicitWidth: 10
                            implicitHeight: 100
                        }
    }
    

    But now QtCreator complains at the VertScrollBar line saying Unknown component. (M300)

    Am I close at getting either of these methods to work? Ideally I'd like to override the default ScrollBar (and Button, Switch, etc) so I don't have to create a new name for each with the custom style.


Log in to reply