reusing a component with different arguments

[mzimmers]

Hi all -

I have a ListView with a fairly elaborate delegate. I'd like to reuse the delegate Component for my list header (but with values that don't come from the model, but are descriptive). I seem to be close, but I'm hitting a mental block. Here's a very simple example that doesn't work; maybe someone can suggest how to fix this.

Thanks...

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window

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

    ListView {
        anchors.fill: parent
        model: 5
        delegate: component
        header: item.itemComponent
    }
    Item {
        id: item
        property Component itemComponent: component
        QtObject {
            id: headerProperties
            property string headerText: "I want this for my header string."
            property int index: (-1)
        }

        Component {
            id: component
            Text { text: index < 0 ? headerProperties.headerText : index }
        }
    }
}

[dheerendra]

You are using the component as argument for delegate & header. index property is only available for delegate objects. index property is not available for header objects. Hence this gives the error. What is the intention of header with index ? Not very clear about header.

[mzimmers]

@dheerendra my example might have been a bit misleading; I was just trying to put together a minimal case of reusing a component.

In my app's ListView, I'm actually displaying information from a C++ model, using roles to extract the values. My delegate is a Pane containing a RowLayout with several text fields. As mentioned, I'd like to reuse this Pane for the header row, but I need a way to pass it values that would otherwise come from the model. Does this make sense?

Perhaps this example would better illustrate what I'm trying to do:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window

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

    ListModel {
        id: listModel
        ListElement { dataField: "1" }
        ListElement { dataField: "2" }
        ListElement { dataField: "3" }
        ListElement { dataField: "4" }
        ListElement { dataField: "5" }
    }

    ListView {
        anchors.fill: parent
        model: listModel
        delegate: component
        header: item.itemComponent
    }
    Item {
        id: item
        property Component itemComponent: component
        QtObject {
            id: headerProperties
            property string dataField: "I want this for my header string."
        }

        Component {
            id: component
            Text { text: dataField }
        }
    }
}

[Bob64]

Could you just factor it out to a new component with the parameterisation defined in terms of properties of the component? Then in the delegate context you assign values based on model roles to the properties, and in the header context assign whatever values make sense there.

[mzimmers]

@Bob64 not clear to me what you're suggesting - is it a Component within a Component?

Thanks...

[Anumas]

What @Bob64 says is to create a new file (hence a component) & define the interface in terms of properties.

//MyComponet.qml
Item {
    id: root
    property string dataField
    ...
}

Then in your delegate & header bindings you do the following:

ListView {
  header: MyComponent {
    dataField: headerProperties.dataField
  }
  delegate: MyComponent {
    required dataField // If your rolename from your model matches the property name
  }
  ...other bindings...
}

[mzimmers]

Excellent. I had to play with it a bit, but it works just fine. Thanks for the help.

// ListComponent.qml
Item {
    id: item
    height: 20
    property string xxx
    Text { text: xxx }
}

// Main.qml
    ListModel {
        id: listModel
        ListElement { dataField: "1" }
        ListElement { dataField: "2" }
        ListElement { dataField: "3" }
    }

    ListView {
        anchors.fill: parent
        model: listModel
        QtObject {
            id: headerProperties
            property string xxx: "I want this for my header string."
        }
        header: ListComponent {
            xxx: headerProperties.xxx
        }
        delegate: ListComponent {
            xxx: dataField
        }
    }