specifying QML Component dynamically

[mzimmers]

Hi all -

I have a display with an array of custom buttons. When the button is pressed, a drawer opens. The content of the drawer will be sufficiently different for each button that I think it's best just to create a separate component (ie, QML file) for each button.

I'm not sure what the syntax for this should be. Should I declare a property in my custom button, and if so, what type should it be? Here's a non-working example of what I'm trying to do:

Rectangle {
    id: rect
    property Item contentFile: "MyQMLFilename"
    Drawer {
        contentitem: rect.contentFile
...

I think I'm on the right track, but this obviously needs refinement. Any suggestions?

Thanks...

EDIT:

Here's the file I want to display in my drawer:

// Pump.qml
import QtQuick 2.12

Item {
    anchors.fill: parent
    Rectangle {
        height: 100
        width: 100
        color: 'blue'
    }
}

And my attempted use of it:

Drawer {
    id: drawer
    width: 560
    height: 480
    edge: Qt.RightEdge
    contentItem: drawerContent
    ...

Can someone tell me why my rectangle isn't showing in the drawer?

Thanks...

[mzimmers]

BTT: can anyone provide some guidance on the correct way to dynamically populate the contents of a drawer?

Thanks...

[fcarney]

I have used Loaders and Repeaters and Loaders to do this. For loaders look into the setSource function. It allows specifying the qml file and properties to be set. This can work with with a model in a Repeater.

Are you wanting multiple or single items in the drawer? If you want multiple items I would use a Repeater, and also use a Loader to load different types of qml files based upon the model of the repeater.

[mzimmers]

@fcarney said in specifying QML Component dynamically:

Are you wanting multiple or single items in the drawer

Well, multiple, but not multiple instances of a given class. As I understand repeaters, they're probably not what I want.

Loaders look like the right way to go, but I'm not clear on how to parameterize this. Imagine a GridLayout with several items (all using the same Component) but with different icons, text, etc. I'm doing this with properties now. Can't I pass in the desired Component to load as a property (like I tried to do in my example above)?

Thanks...

EDIT:

I found that using a string for the filename, along with @fcarney's suggestion for using the Loader, solved the problem of how to parameterize the contents:

Rectangle {
    id: tile
    property string drawerFile: ""

    Loader { id: drawerLoader }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            drawerLoader.source = drawerFile
            drawer.open()
        }
    }
    Drawer {
        id: drawer
    }
}

As a follow-up question, how do I get the Loader to display in the drawer, instead of in tile?

Thanks...

[mzimmers]

In answer to my follow-up question:

Rectangle {
    id: tile
    property string drawerFile: "" // supplied by caller

    MouseArea {
        anchors.fill: parent
        onClicked: { drawer.open() }
    }
    Drawer {
        id: drawer
        Loader { id: drawerLoader }
        onOpened: { drawerLoader.source = drawerFile }
    }
}

[fcarney]

Do you want the drawerFile qml file to be unloaded when you close the drawer?

If so, you might consider doing this:

Rectangle {
    id: tile
    property string drawerFile: "" // supplied by caller

    MouseArea {
        anchors.fill: parent
        onClicked: { drawer.open() }
    }
    Drawer {
        id: drawer
        Loader { id: drawerLoader 
          active: drawer.opened
          source: tile.drawerFile
        }
    }
}

This will automatically load/unload the drawerFile qml item for you.

[mzimmers]

@fcarney hmm...interesting point. I don't think this is going to become an issue in this application, but...if my drawer contents were to become very elaborate, are there performance implications with unloading it? If I don't unload it, will opening it a 2nd (and 3rd) time be faster?

[fcarney]

@mzimmers Yes, as is, second time is faster if previously loaded.

[mzimmers]

@fcarney thanks. I'm still going to use your method, because 1) performance isn't going to be an issue, and 2) it looks cleaner.